Webpack 在 ES5 中生成箭头函数

Question

我想使用 TypeScript 模块并通过 Webpack 捆绑它们。这是我的配置文件：

webpack.config.js：

const path = require('path');

module.exports = () => {
    return {
        entry: './index.ts',
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist'),
        },
        module: {
            rules: [{
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            }],
        },
    };
};

tsconfig.json：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es3"
  },
  "include": ["./**/*"],
  "exclude": ["node_modules/**/*", "webpack.config.js"]
}

也许我从文档中发现了一些错误。目的是在 ES5（或更早版本）中生成代码。但这是我的捆绑文件：

(()=>{var n=function(n,o){console.warn(o)};n(0,0),n(0,1)})();

它有一个箭头功能，这是ES6中添加的。我很困惑。我怎样才能摆脱它？

---

编辑：

这是我尝试编译的代码：

const func = (foo, bar: number) => {
    console.warn(bar);
};

func(0, 0);
func(2, 1);

编辑2：

此外，我在生产模式下运行编译过程。 （idk，也许这是有用的信息）

Answer 1

只需将

target: ['web', 'es5']

添加到您的 webpack 配置中即可。 （除了更改 .tsconfig 之外。）有关接受值的完整列表，请参阅 docs。

你也可以设置

target: 'es5'

，但这样的话，会出现一些问题。至少在我的情况下，如果没有指定“web”，TerserWebpackPlugin 拒绝在生产模式下压缩文件。

Answer 2

这是我上周将 webpack 升级到版本 5 后遇到的问题。

默认情况下，它会将其捆绑为 ES6。在您的 webpack 配置中，配置

output.environment

应该可以解决问题。

编辑：webpack 仅通过这些配置更改其内部用法。

webpack.js.org/configuration/output/#outputenvironment

它不编译模块。对于模块编译，应该使用babel。