可以使用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
好的,那么让我们在 package.json
中添加 "type": "module"
:
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 模块使用。
我该如何使它工作?
package.json
中列出。 - Dan Owebpack@^5.51.1
和webpack-cli@^4.8.0
时,当我尝试构建时,最终得到的bundle.js
文件是空的。 - Dan O