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

我使用 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"

但是，这个导入语句似乎没有按计划工作（我期望一个带有

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 导入吗？

回答如下：

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

关键字。

另请查看：使用 webpack 输出 ES 模块，它很好地解释了 Webpack 部分。

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

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

与本文相关的文章

评论列表(0)