是否可以使用 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.config.js
本身 作为 ES 模块。我怎样才能让它发挥作用?
由于您使用了
type: "module"
,Node.js 会将此模块视为 ESM。从文档来看,esm_no_require_exports_or_module_exports、require
、module.exports
、__dirname
在 ESM 中不可用。我将使用ESM语法来重写webpack.config.js
。
为
__dirname
变量创建一个填充。
来自 webpack 文档:
如果您使用 webpack 编译供其他人使用的库,请确保当
为output.libraryTarget
时将output.module
设置为“模块”。true
例如
webpack.config.js
:
import path from "path";
import { fileURLToPath } from "url";
const __dirname = path.dirname(fileURLToPath(import.meta.url));
export default {
mode: "development",
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
library: {
type: "module",
},
},
experiments: {
outputModule: true,
},
};
package.json
:
{
"name": "exporter",
"version": "1.0.0",
"main": "dist/bundle.js",
"scripts": {
"build": "webpack"
},
"devDependencies": {
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0"
},
"type": "module"
}
./src/index.js
:
function util() {
return "I'm a util!";
}
export default util;
importer.js
:
import util from "./dist/bundle.js";
console.log(util());
构建:
⚡ npm run build
> [email protected] build /Users/dulin/workspace/github.com/mrdulin/webpack-samples/packages/webpack-v5/stackoverflow/68913996
> webpack
asset bundle.js 3.01 KiB [compared for emit] [javascript module] (name: main)
runtime modules 670 bytes 3 modules
./src/index.js 65 bytes [built] [code generated]
webpack 5.51.1 compiled successfully in 87 ms
执行
importer.js
:
⚡ node importer.js
I'm a util!
进行这些更改后出现错误并且无法构建
外部“反应”中的错误 目标环境不支持 EcmaScriptModule 语法,因此无法使用外部类型“模块” 错误:目标环境不支持 EcmaScriptModule 语法,因此无法使用外部类型“模块”