Webpack 4 - 无法正确地将 ES6 转换为 UMD

Question

我正在尝试迁移旧库以使用 ES6 imports/exports（例如，将 const SomeClass = require('./SomeClass') 替换为 import SomeClass from './SomeClass'）。

问题是当我尝试使用生成的 umd 库包时，返回了一个 Module 实例而不是库本身。

<script src="lib.min.js"></script>
<script>
var lib = new Lib();
// Should be Lib instance, instead receive the following:
Module { {default: ƒ, __esModule: true, Symbol(Symbol.toStringTag): "Module" }
<script>

这是我的 package.json devDependencies：

"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"babel-loader": "^8.0.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1"

这是我的 webpack 配置：

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        libraryTarget: 'umd',
        library:       'Lib',
        filename:      'lib.min.js',
        path:          (__dirname + '/dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: [__dirname + '/src'],
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        ]
    }
};

这是我正在使用的库中的示例代码：

// /src/SomeClass.js
export default class SomeClass {...};

// /src/index.js
import SomeClass from './SomeClass';
export default SomeClass;

可能我在 webpack/babel-loader 配置上搞砸了，但找不到我做错了什么。

Answer 1

在关注各种 github 问题线程后，这似乎是 Babel6+ 的预期行为，因为它们放弃了导出默认值 modules.export (https://github.com/babel/babel/issues/2212).

如果您需要添加它（例如，为了防止调用 Lib.default），可以使用 babel-plugin-add-module-exports 来修复它。我更新的 babel 加载器配置如下所示：

presets: [['@babel/env', { 'modules': 'umd' }]],
plugins: ['add-module-exports']

Webpack 4 - 无法正确地将 ES6 转换为 UMD

Webpack 4 - Unable to properly transpile ES6 to UMD

webpack

umd

babel-loader