javascript - Webpack umd 库返回 Object.default

Question

我正在用这些设置编写一个带有 webpack 的库：

output: {
    path: path.join('build'),
    filename: 'my_lib.js',
    library: 'MyLib',
    libraryTarget: 'umd'
  },

我的库：

export default function() {
  console.log('MyLib');
}

问题是，当我尝试在浏览器中加载 build/my_lib.js 时，访问 MyLib 的唯一方法是通过 MyLib.default ...

任何想法？

Answer 1

你应该设置libraryExport 为default;

https://webpack.js.org/configuration/output/#outputlibraryexport

Answer 2

关键是这样使用libraryExport: "default"：

  module.exports = {
    entry: ...,
    output: {
      path: __dirname + "/dist/",
      filename: "Template.js",
      library: "Template",
      libraryTarget: "umd",
      libraryExport: "default",
      globalObject: "this",
    },

Answer 3

如果你问任何关于为什么的想法？

如果您使用 Babel 启用 ES6 功能，那么您可能面临 Babel5 和 Babel6 之间的变化之一。

使用 Babel5，您的代码将被转译为：

'use strict';

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

exports['default'] = function () {
  console.log('MyLib');
};

module.exports = exports['default'];

但是使用 Babel6 你会得到：

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = function () {
  console.log('MyLib');
};

你看出区别了吗？

module.exports = exports['default'];

这条线在 Babel6 中被杀死。在这里决定：

始终将默认值导出到exports.default

如果您询问任何解决方法的想法？

你可以自己添加这一行，或者使用某种为你添加它的 babel 插件。

const myLib = function () {
  console.log('MyLib');
};

export default myLib;

module.exports = myLib;