Javascript 无法将网页包绑定的UMD库作为ES6导入导入_Javascript_Node.js_Webpack_Ecmascript 6_Module

Javascript 无法将网页包绑定的UMD库作为ES6导入导入

javascript node.js webpack ecmascript-6 module

Javascript 无法将网页包绑定的UMD库作为ES6导入导入,javascript,node.js,webpack,ecmascript-6,module,Javascript,Node.js,Webpack,Ecmascript 6,Module,我使用Webpack编写了一个javascript库。入口点someClass.js如下所示： import x from './x' /* several more imports here */ class SomeClass {} export default SomeClass; 捆绑此库的我的网页包配置如下所示： module.exports = { entry: './someClass.js', output: { path: __dirnam

我使用Webpack编写了一个javascript库。入口点

someClass.js

如下所示：

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

class SomeClass {}

export default SomeClass;

捆绑此库的我的网页包配置如下所示：

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

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

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

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

console.log(lib);

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

然后，我将生成的

lib.js

导入一个简单的

index.html

，其定义如下：

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

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

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

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

console.log(lib);

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

但是，这个import语句似乎没有按计划工作（我希望模块具有一个

默认

字段，该字段是我的

SomeClass

构造函数）

访问库的默认导出

SomeClass

的唯一方法是在

app.js

中执行如下全局导入语句，该语句将

lib

设置为

窗口上的对象：
import './lib.js';
console.log(window.lib);

// Output: Module {default: ƒ, __esModule: true, Symbol(Symbol.toStringTag): "Module"} default: class SomeClass_SomeClass

我不希望我的类在全局窗口中可用，因为它使我的代码很难模块化
我还希望能够在web上的各种位置（react应用程序、独立html文件等）使用此库，并希望最小化依赖关系
我可以做些什么来将模块作为es6导入吗？
es6仅与导出
关键字一起工作，如：
export { A }
export default B

Nodejs的commonjs2模块在Web上无法工作，如下所示：
module.exports = { A, default: B }

网页包的libraryTarget:“umd”
输出也不会保留ES6export关键字，
因为关键字语法不可部署，并且在其他环境中会中断
因此，您可能希望像其他软件包一样使用2组文件发布（cjs/
和es/
），并使用babel或rollup打包es/
版本并保留ES6导出
关键字
还可以查看：这很好地解释了网页部分