使用 Webpack 5 构建 ES 模块包，并在 Node.js ES 模块中使用该包

Question

是否可以使用 Webpack 5 构建 ES 模块包（使用默认导出），然后在 Node.js ES 模块中使用（导入）该包？

• 这是以下文件的现场演示。

我有以下文件：

|- webpack.config.js
|- package.json
|- /src
  |- index.js

index.js

function util() {
    return "I'm a util!";
}
export default util;

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    experiments: {
        outputModule: true,
    },
};

package.json

{
  "name": "exporter",
  "version": "1.0.0",
  "module": "dist/index.js",
  "scripts": {
    "build": "webpack"
  }
}

运行后npm run build，我们得到：

|- webpack.config.js
|- package.json
|- /src
  |- index.js
|- /dist
  |- bundle.js

太好了，现在我只想创建一些importer.js可以导入util和使用它的“演示”文件。为了方便起见，我将在同一文件夹中创建它：

|- importer.js
|- webpack.config.js
|- package.json
|- /src
  |- index.js
|- /dist
  |- bundle.js

importer.js

import util from './dist/bundle.js';

console.log(util());

现在我运行node importer.js，并收到此（预期）错误：

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
[...]
SyntaxError: Cannot use import statement outside a module

好吧，让我们将其添加"type": "module"到package.json：

package.json

{
  "name": "exporter",
  "version": "1.0.0",
  "module": "dist/index.js",
  "scripts": {
    "build": "webpack"
  },
  "type": "module"
}

现在，再次尝试node importer.js会出现另一个错误：

SyntaxError: The requested module './dist/bundle.js' does not provide an export named 'default'

更重要的是，当尝试重新运行时npm run build，我们收到另一个错误：

[webpack-cli] Failed to load 'path\to\webpack.config.js' config
[webpack-cli] ReferenceError: require is not defined

• 注意：Webpack 5 和 ESM可能被认为有些相关，但实际上并非如此，因为它想将webpack.config.js 自己用作ES 模块。

我怎样才能让它发挥作用？

Answer 1

由于您使用type: "module"，Node.js 会将此模块视为 ESM。根据文档esm_no_require_exports_or_module_exports、require、module.exports、__dirname在 ESM 中不可用。我将使用ESM语法来重写webpack.config.js.

\n

为变量创建一个填充__dirname。

\n

来自 webpack 文档：

\n

\n

如果您使用 webpack 编译供其他人使用的库，请确保在isoutput.libraryTarget时设置为“module” 。output.moduletrue

\n

\n

例如

\n

webpack.config.js：

\n

import path from "path";\nimport { fileURLToPath } from "url";\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url));\n\nexport default {\n  mode: "development",     \n  entry: "./src/index.js",\n  output: {\n    filename: "bundle.js",\n    path: path.resolve(__dirname, "dist"),\n    library: {\n      type: "module",\n    },\n  },\n  experiments: {\n    outputModule: true,\n  },\n};\n

\n

package.json：

\n

{\n  "name": "exporter",\n  "version": "1.0.0",\n  "main": "dist/bundle.js",\n  "scripts": {\n    "build": "webpack"\n  },\n  "devDependencies": {\n    "webpack": "^5.51.1",\n    "webpack-cli": "^4.8.0"\n  },\n  "type": "module"\n}\n

\n

./src/index.js：

\n

function util() {\n  return "I\'m a util!";\n}\nexport default util;\n

\n

importer.js：

\n

import util from "./dist/bundle.js";\n\nconsole.log(util());\n

\n

建造：

\n

\xe2\x9a\xa1  npm run build   \n\n> exporter@1.0.0 build /Users/dulin/workspace/github.com/mrdulin/webpack-samples/packages/webpack-v5/stackoverflow/68913996\n> webpack\n\nasset bundle.js 3.01 KiB [compared for emit] [javascript module] (name: main)\nruntime modules 670 bytes 3 modules\n./src/index.js 65 bytes [built] [code generated]\nwebpack 5.51.1 compiled successfully in 87 ms\n

\n

执行importer.js：

\n

\xe2\x9a\xa1  node importer.js \nI\'m a util!\n

\n