无法将 webpack 捆绑的 UMD 库作为 ES6 导入导入答案

【问题标题】：Unable to import webpack-bundled UMD library as an ES6 import无法将 webpack 捆绑的 UMD 库作为 ES6 导入导入
【发布时间】：2019-07-16 00:19:21
【问题描述】：

我使用 Webpack 编写了一个 javascript 库。入口点someClass.js 如下所示：

import x from './x'
/* several more imports here */

class SomeClass {}

export default SomeClass;

我捆绑这个库的 webpack 配置如下：

module.exports = {
    entry: './someClass.js',
    output: {
        path: __dirname,
        filename: 'lib.js',
        library: 'lib',
        libraryTarget: 'umd',
    },

然后我将生成的lib.js 导入一个简单的index.html，其定义如下：

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<script src="app.js" type="module"></script>
</body>
</html>

在app.js，我简单尝试导入文件如下：

import  * as lib from './lib.js';

console.log(lib);

// Output: Module {Symbol(Symbol.toStringTag): "Module"}   Symbol(Symbol.toStringTag): "Module"

但是，这个 import 语句似乎没有按计划工作（我希望一个带有 default 字段的模块是我的 SomeClass 构造函数）。

我可以访问我的库的默认导出SomeClass 的唯一方法是，如果我在app.js 中执行如下全局导入语句，它将lib 设置为window 上的对象：

import './lib.js';
console.log(window.lib);

// Output: Module {default: ƒ, __esModule: true, Symbol(Symbol.toStringTag): "Module"} default: class SomeClass_SomeClass

我不希望我的课程在全球 window 上可用，因为它使我的代码难以模块化。

我还希望能够在网络上的各种地方使用这个库（react 应用程序、独立的 html 文件等），因此希望最大限度地减少依赖关系。

有什么办法可以将模块导入为 es6 导入？

【问题讨论】：

标签： javascript node.js webpack ecmascript-6 module

【解决方案1】：

ES6 import 仅适用于 export 关键字，例如：

export { A }
export default B

Nodejs 的 commonjs2 模块无法在 Web 上运行，如下所示：

module.exports = { A, default: B }

Webpack 的 libraryTarget: "umd" 输出也不会保留 ES6 export 关键字，因为关键字语法不是 ployfill-able 并且会在其他环境中中断。

因此，您可能希望像其他软件包一样使用 2 组文件（cjs/ 和 es/）发布，并使用 babel 或 rollup 打包 es/ 版本并保留 ES6 export 关键字。

还可以查看：Output an ES module using webpack，它很好地解释了 Webpack 部分。

【讨论】：