Webpack配合ts-loader编译为ES5失败 产物含箭头函数致IE异常

问题根本原因 #

1. 当前配置仅对排除了node_modules的业务代码使用ts-loader转译，第三方依赖（如@fluentui/react）中包含的箭头函数等ES6语法不会被处理，这是产物中残留箭头函数的核心来源。
2. 现有babel配置仅包含@babel/preset-typescript，缺失负责将ES6+语法转译为ES5的@babel/preset-env，且webpack构建链路中未加入babel-loader执行转译逻辑。
3. webpack配置中taskpane.html的chunks配置错误，注入的chunk名写为polyfills，与entry中定义的polyfill不符，导致基础兼容逻辑未生效。
4. tsconfig的lib配置包含es7，会导致typescript保留部分高版本语法特性，增加转译残留风险。

修改步骤 #

1. 安装缺失依赖

npm install @babel/preset-env babel-loader -D

2. 调整babel.config.json

新增@babel/preset-env配置，会自动读取package.json中的browserslist规则生成对应转译规则，将ES6+语法转换为ES5：

{
    "presets": [
        "@babel/preset-typescript",
        ["@babel/preset-env", {
            "useBuiltIns": "usage",
            "corejs": 3
        }]
    ]
}

3. 修改webpack.config.js配置

首先调整ts文件的loader规则，加入babel-loader，同时调整exclude规则，将需要转译的第三方包纳入处理范围（示例中包含@fluentui，可根据实际情况调整）：

{
    test: /\.tsx?$/,
    use: ['react-hot-loader/webpack', 'babel-loader', 'ts-loader'],
    // 仅排除不需要转译的第三方包，保留需要兼容的包进行转译
    exclude: /node_modules\/(?!(@fluentui)\/)/,
}

其次修正HtmlWebpackPlugin中taskpane的chunks配置，将polyfills改为polyfill，保证兼容逻辑正确注入：

new HtmlWebpackPlugin({
    filename: 'taskpane.html',
    template: './src/taskpane/taskpane.html',
    chunks: ['taskpane', 'vendor', 'polyfill'],
}),

4. 调整tsconfig.json（可选，降低兼容风险）

将compilerOptions下的lib配置改为es5，避免typescript保留高版本语法：

"lib": ["es5", "dom"],

验证方式 #

打包完成后在产物文件中搜索=>字符，确认无箭头函数残留后，即可在IE11环境中测试运行。

内容的提问来源于stack exchange，提问作者Sheldon