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

【问题标题】：Webpack 4 - Unable to properly transpile ES6 to UMDWebpack 4 - 无法正确地将 ES6 转换为 UMD
【发布时间】：2019-05-02 15:31:25
【问题描述】：

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

问题是当我尝试使用生成的 umd lib 包时，会返回一个 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 配置中搞砸了一些东西，但找不到我到底做错了什么。

【问题讨论】：

标签： webpack babel-loader umd

【解决方案1】：

在关注了各种 github 问题线程之后，这似乎是 Babel6+ 的预期行为，因为它们删除了 export default modules.export (https://github.com/babel/babel/issues/2212)。

如果您需要添加它（例如，为了防止调用Lib.default），有一个babel-plugin-add-module-exports 应该可以修复它。我更新后的 babel loader 配置如下：

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

【讨论】：