使用webpack导出全局函数

Question

I'm trying to write an isomorphic module. The server javascript is going to run inside of JINT. I have created a webpack bundle specifically to build the server version of the module. I want to expose a single function that I can get JINT to call. I am using the scriptEngine.Invoke function from JINT however this is looking for a function on the global object. I don't know how to get a function onto the global object. I have tried using the expose-loader but this seems to export the entire module and I can't get it to just expose a single function.

Here is my entry point:

require("expose?FormValidator!./formValidator.js");

Here is my formValidator.js:

export default function validate () {
    return 'HelloWorld';
}

When I load up the resulting bundle and examine the FormValidator global it is an object with a validate function. Is there a way I can get the validate function to be directly assigned to FormValidator?

Answer 1

Instead of using the ES6 export syntax, try simply using module.exports = function validate() {} , which should work.

Babel is probably why things don't work the way you expect them too right now. Exporting with Babel does the following:

export default function testDefault() {}
export function testNamed() {}

Turns into

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = testDefault;
exports.testNamed = testNamed;
function testDefault() {}
function testNamed() {}

In this case, your exported object would have a default() and testNamed().

Update for webpack 2: In webpack 2 you can't mix ES6 imports and CommonJS exports. If you use module.exports you should also use require, and if you use import you should use export paired with it.

In webpack 2, you cannot use ES6 default exports to make a global available. The most-used solution right now is to make a small entry point that simply does the following:

// assuming myLibraryEntry is the default export in the required file.
const myLibraryEntry = require('./real-entry-point-in-es6.js').default;

// This makes myLibraryEntry available as whatever you set libraryName to in your config.
module.exports = myLibraryEntry;

Answer 2

I am in the same situation as you do.Here is my code:

webpack.config.js:

module.exports = {
    entry: './src/method/eTrack/index.js',
    output: {
        filename: 'eTrack.js',
        path: path.resolve(__dirname, 'dist'),
        library: 'eTrack',
        libraryTarget: 'umd'
    },
};

./src/method/eTrack/index.js：

import create from './create';
import getAll from './getAll';
import getByName from './getByName';
import remove from './remove';

export function eTrack () {

}
eTrack.trackers = [];
eTrack.create = create;
eTrack.getAll = getAll;
eTrack.getByName = getByName;
eTrack.remove = remove;

Well, after bundled via webpack, I can access eTrack in window but it turn out to be an object.That means I can't call eTrack() directly, but should call like eTrack.eTrack() .

And I've tried @Ambroos's solution, change ./src/method/eTrack/index.js into：

module.exports = function eTrack () {

}

This time after bundled, I can't access eTrack in browser window, the eTrack object gone and it throws eTrack is undefined error in the console.

Then I found an article that helps a lot: http://siawyoung.com/coding/javascript/exporting-es6-modules-as-single-scripts-with-webpack.html

And change my index.js into:

function eTrack () {

}
module.exports = eTrack;

Then everything works as expected!I can call eTrack() directly in <script> tag.Though I don't know the difference between @Ambroos's answer and this solution.