Webpack UMD库返回Object.default [英] Webpack umd library return Object.default

问题描述

我正在使用webpack编写具有以下设置的库:

I'm writing a lib with webpack with these settings:

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 ...

The problem is, when I try to load the build/my_lib.js in a browser, the only way to access MyLib is through MyLib.default...

有什么主意吗?

推荐答案

如果您要问为什么?

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

If you are using Babel to enable ES6 features then you are probably facing one of the changes between Babel5 and Babel6.

使用Babel5，您的代码将被转换为此:

With Babel5 your code is transpiled to this:

'use strict';

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

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

module.exports = exports['default'];

但是使用Babel6，您将得到:

But with Babel6 you get:

'use strict';

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

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

您发现差异了吗?

module.exports = exports['default'];

此行在Babel6中被杀死.在这里决定:

This line was killed in Babel6. Here it was decided:

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

如果您有任何解决方法的想法?

您可以自己添加此行，也可以使用某种 babel插件为您添加.

You can add this line yourself or use some kind of babel plugin that adds it for you.

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

export default myLib;

module.exports = myLib;

这篇关于Webpack UMD库返回Object.default的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！