是否可以使用Webpack 5构建ES模块包(使用默认导出),然后在Node.js ES模块中使用(导入)该包?
- 下面是一个live demo的以下文件。
我有以下文件:
|- 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 and ESM可能被认为是有点相关的,但实际上它不是,因为它想使用
webpack.config.js
* 本身 * 作为ES模块。
我怎么才能让它工作?
1条答案
按热度按时间ajsxfq5m1#
由于您使用
type: "module"
,Node.js会将此模块视为ESM。根据文档esm_no_require_exports_or_module_exports,require
、module.exports
、__dirname
在ESM中不可用。我将使用ESM语法重写webpack.config.js
。为
__dirname
变量创建polyfill。Webpack文档:
如果你正在使用webpack编译一个库供其他人使用,请确保在
output.module
为true
时将output.libraryTarget
设置为“module”。例如
webpack.config.js
:package.json
:./src/index.js
:importer.js
:版本号:
执行
importer.js
: