无法将 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.jsindex.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 语句似乎没有按计划工作（我希望模块的字段是我的构造函数）。defaultSomeClass

我可以访问库的默认导出的唯一方法是，如果我执行全局导入语句，如下所示，该语句设置为对象：SomeClassapp.jslibwindow

import './lib.js';
console.log(window.lib);

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

我不希望我的类在全局可用，因为它很难模块化我的代码。window

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

我可以做些什么来将模块导入为 es6 导入？

JavaScript 节点.js Webpack ecmascript-6 模块

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

Unable to import webpack-bundled UMD library as an ES6 import

评论