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配置中。

您也可以设置target: 'es5'，但在这种情况下，会出现一些问题。至少在我没有指定"web"的情况下，TerserWebpackPlugin拒绝在生产模式下压缩文件。

Answer 2

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

默认情况下，它将其绑定为ES6。在您的webpack配置中，配置output.environment应该可以解决问题。

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

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

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