如何使用babel和webpack将导出的函数公开到全局范围

Question

如何用webpack和babel编译我的代码，使导出的函数在全局范围内可用？

比如说:

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

应该在window.test（）下可用。

当我刚刚运行Babel-d时，我得到了我所期望的：

'use strict';

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

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

但是webpack的输出如下所示:

!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＜code＞测试＜/code＞函数在全局范围内不可用。

Answer 1

退房：https://github.com/webpack/docs/wiki/library-and-externals#examples

通过将库输出属性设置为要包装全局变量的任何名称，您可以调用：YourLibrary.test（）;

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

Answer 2

您可以轻松地在全局窗口对象上设置属性。这将向全局范围公开您的对象。

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

window.test = test;

如果您正在开发一段代码，该代码不表示库，而只是表示在全局范围内运行的一些操作或功能，我更喜欢使用此方法，而不是设置接受的答案中提到的库输出属性。