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...有什么想法吗？

- gtournie

Answer 1

您应该将libraryExport设置为default；

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

- Jack Pu

Answer 2

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

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

- Dorian

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;

- dreyescat

---

请考虑在此处投票支持功能请求：https://github.com/webpack/webpack/issues/3929 ;) - Luckylooke