Question

我已经使用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设置为{{1}上的对象}：

window

我不希望在全局import './lib.js'; console.log(window.lib); // Output: Module {default: ƒ, __esModule: true, Symbol(Symbol.toStringTag): "Module"} default: class SomeClass_SomeClass上提供我的课程，因为这很难对我的代码进行模块化。

我还希望能够在网络上的多个位置（反应应用程序，独立的html文件等）使用此库，因此希望最大限度地减少依赖性。

作为es6导入，我可以做些什么来导入模块吗？

Answer 1

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

export { A }
export default B

Nodejs 的 commonjs2 模块在 Web 上不起作用，看起来像：

module.exports = { A, default: B }

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

所以你可能想像其他包一样发布 2 组文件（cjs/ 和 es/），并使用 babel 或 rollup 来打包 es/ 版本并保留 ES6 export 关键字。

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

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

1 个答案: