How expose a exported function into global scope with babel and webpack

问题

How can I compile my code with webpack and babel so that the exported function is available in the global scope.

So for example:

export function test(){console.log('test')}

Should be available under window.test().

When I just run babel -d I got what I expect:

'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true
});
exports.test = test;

function test() {
  console.log('test');
}

but the webpack output looks like this:

!function(e) {
  function t(r) {
    if (o[r])return o[r].exports;
    var n = o[r] = {exports: {}, id: r, loaded: !1};
    return e[r].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
  }

  var o = {};
  return t.m = e, t.c = o, t.p = "", t(0)
}([function(e, t) {
  "use strict";
  function o() {
    console.log("test")
  }

  Object.defineProperty(t, "__esModule", {value: !0}), t.test = o
}]);

end the test function is not available in the global scope.

回答1:

check out: https://webpack.github.io/docs/library-and-externals.html#examples

By setting the library output property to whatever name you want to wrap your globals would allow you to then call: YourLibrary.test();

module.exports = {
    entry: ['./_js/script.js'],
    output: {
       library: 'YourLibrary',
        path: __dirname,
        filename: './build/script.js'
    }

回答2:

You can easily set a property on the global window object. This will expose your object to the global scope.

function test() {
  console.log('test');
}

window.test = test;

If you are developing a piece of code that does not represent a library but just some operations or functionalities to operate in global scope, I would prefer this method over to setting the library output property as mentioned in the accepted answer.

来源：https://stackoverflow.com/questions/33148787/how-expose-a-exported-function-into-global-scope-with-babel-and-webpack

标签

Webpack

babeljs