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

Question

I've authored a javascript library using Webpack.我已经使用 Webpack 编写了一个 javascript 库。 The entrypoint someClass.js looks like this: someClass.js的入口someClass.js如下所示：

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

class SomeClass {}

export default SomeClass;

My webpack config that bundles this library is as follows:我捆绑这个库的 webpack 配置如下：

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

I then import the generated lib.js into a simple index.html that is defined as follows:然后我将生成的lib.js导入一个简单的index.html ，其定义如下：

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

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

In app.js , I simply try to import the file as follows:在app.js ，我只是尝试按如下方式导入文件：

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

console.log(lib);

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

However, this import statement does not seem to work as planned (I expect a module with a default field that is my SomeClass constructor).但是，这个导入语句似乎没有按计划工作（我希望有一个default字段是我的SomeClass构造函数的模块）。

The only way I can access my library's default export SomeClass is if I do a global import statement in app.js as follows, which sets lib as an object on window :我可以访问我的库的默认导出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

I don't want my class to available at the global window , as it makes it tough to modularise my code.我不希望我的类在全局window可用，因为它很难模块化我的代码。

I also want to be able to use this library in a variety of places on the web (react app, standalone html files, etc), and so want to minimize dependencies.我还希望能够在网络上的各种位置（react 应用程序、独立的 html 文件等）使用这个库，因此希望最大限度地减少依赖关系。

Is there anything I can do to import the module as an es6 import?我可以做些什么来将模块作为 es6 导入导入？

Answer 1

The ES6 import works only with the export keyword like: ES6 导入仅适用于export关键字，例如：

export { A }
export default B

Nodejs's commonjs2 module will not work on the Web, which looks like: Nodejs 的 commonjs2 模块将无法在 Web 上运行，如下所示：

module.exports = { A, default: B }

Webpack's libraryTarget: "umd" output will not keep the ES6 export keyword either, for reason that the keyword syntax is not ployfill-able and will break on other environment. Webpack 的libraryTarget: "umd"输出也不会保留 ES6 export关键字，因为关键字语法不可填充，并且会在其他环境中中断。

So you may want to release with 2 set of files like other packages do ( cjs/ and es/ ), and use babel or rollup to pack the es/ version and keep the ES6 export keyword.所以你可能想像其他包一样发布 2 组文件（ cjs/和es/ ），并使用 babel 或 rollup 来打包es/版本并保留 ES6 export关键字。

Also check out: Output an ES module using webpack which explains the Webpack part really well.另请查看：使用 webpack 输出一个 ES 模块，它很好地解释了 Webpack 部分。

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

问题描述

1 个解决方案

解决方案1
0 2021-01-21 09:08:52

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

问题描述

1 个解决方案

解决方案1 0 2021-01-21 09:08:52

解决方案1
0 2021-01-21 09:08:52