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;

如果您正在开发一段不代表库但只是在全局范围内运行的一些操作或功能的代码，我更倾向于使用此方法来设置库输出属性，如接受的答案中所述。

Answer 2

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

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

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

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

2 个答案: