时间戳

首页 > 解决方案 > Webpack 4 - 无法正确地将 ES6 转换为 UMD

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

问题描述

我正在尝试迁移旧库以使用 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 配置中搞砸了一些东西，但找不到我到底做错了什么。

标签： webpackbabel-loaderumd

解决方案

在关注各种 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']

推荐阅读