Sti*_*es2 14 javascript module node.js ecmascript-6 webpack
我已经使用 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为对象 on window：
import './lib.js';
console.log(window.lib);
// Output: Module {default: ƒ, __esModule: true, Symbol(Symbol.toStringTag): "Module"} default: class SomeClass_SomeClass
我不希望我的类在 global 上可用window，因为它很难模块化我的代码。
我还希望能够在网络上的各种位置（反应应用程序、独立 html 文件等）使用这个库，因此希望最小化依赖项。
我可以做些什么来将模块作为 es6 导入导入？
小智 0
ES6导入仅适用于export以下关键字：
export { A }
export default B
Nodejs 的 commonjs2 模块无法在 Web 上运行，如下所示：
module.exports = { A, default: B }
Webpack 的libraryTarget: "umd"输出也不会保留 ES6export关键字，因为关键字语法不可 ployfill-able，并且会在其他环境中中断。
所以你可能想像其他包一样发布 2 组文件（cjs/和es/），并使用 babel 或 rollup 来打包es/版本并保留 ES6export关键字。
另请查看：Output an ES module using webpack，它很好地解释了 Webpack 部分。
| 归档时间： |
|
| 查看次数： |
1962 次 |
| 最近记录： |