webpack - 如何使用 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
}]);

结束 test函数在全局范围内不可用。

Answer 1

您可以轻松地在全局 window 上设置属性。目的。这会将您的对象暴露给全局范围。

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

window.test = test;

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