Webpack umd 库 return 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

如果你想知道为什么？

如果您使用 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 中是 killed。在此决定：

To always export a default to exports.default

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

您可以自己添加此行或使用某种 babel plugin that adds it for you.

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

export default myLib;

module.exports = myLib;

Answer 2

您应该将 libraryExport 设置为 default;

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

Answer 3

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

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

Webpack umd 库 return Object.default

Webpack umd library return Object.default

javascript

module

webpack

umd