無法將 webpack 捆綁的 UMD 庫作為 ES6 導入導入

Question

我已經使用 Webpack 編寫了一個 javascript 庫。 someClass.js的入口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設置為window上的對象：

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

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

我不希望我的類在全局window可用，因為它很難模塊化我的代碼。

我還希望能夠在網絡上的各種位置（react 應用程序、獨立的 html 文件等）使用這個庫，因此希望最大限度地減少依賴關系。

我可以做些什么來將模塊作為 es6 導入導入？

Answer 1

ES6 導入僅適用於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關鍵字。

另請查看：使用 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