webpack将导入更改为需要

ymdaylpp  于 2023-03-23  发布在  Webpack
关注(0)|答案(1)|浏览(171)

我想用webpack编译我的nodeJS项目。当它编译时,每件事都是正确的,但导入更改为需要,当我想运行index.js时,得到必须在ES模块中使用导入的错误。
这是我的webpack.config.js:

import path from "path";
import {fileURLToPath} from "url";
const __dirname = path.dirname(fileURLToPath(import.meta.url));
import nodeExternals from "webpack-node-externals";

export default {
    entry: './src/index.ts',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'index.js',
        chunkFormat: "module"
    },
    target: 'node',
    module: {
        rules: [
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                use: {
                    loader: 'ts-loader'
                }
            }
        ]
    },
    devtool: 'source-map',
    externals: [nodeExternals()]
}

这是我的typescript文件:

import fetch from "node-fetch";
fetch("http://example.com").then((data => console.log(data)));

当它被编译时:

const o = require("node-fetch");

我想成为:

import o from "node-fetch";

我希望webpack不要改变ES到commonJS,只是优化和缩小我的文件。

kkbh8khc

kkbh8khc1#

在撰写本文时,使用Webpack 5输出ESM仍处于试验阶段,必须使用特殊的配置选项启用。
要启用将bundle输出为ESM,您必须将以下内容添加到Webpack配置中:

// webpack.config.js
export default {
 // ... other config
 experiments: {
    outputModule: true,
 },
 // ... other config
}

相关问题