Question

我正在使用这些设置在webpack上编写一个lib：

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

MyLib中：

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。在这里决定：

始终将默认值导出为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

Webpack umd库返回Object.default

2 个答案: