webpack 捆绑的 UMD 库作为 ES6 导入来导入"/>
无法将 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 导入来导入
发布评论