Webpack代码无法通过babel-loader转译为ES5的问题求助

我尝试了多种Webpack配置组合，但不管是在生产环境还是开发环境打包，总有部分代码无法通过babel-loader转译为ES5（注：我清楚webpack-dev-server已经取消了相关的ES5兼容支持）。

我已经按照官方文档的指引，移除了旧的es2015预设，切换成了@babel/preset-env，但问题依然没有解决。我有可复现的场景，能看到打包产物里仍存在未转译的ES6+语法。

我的配置文件如下：

.babelrc #

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      },
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

Webpack核心配置片段 #

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  // 其他配置（如entry、output等）...
};

嘿，我之前也碰到过一模一样的问题，折腾了好久才找到几个有效的解决办法，分享给你：

1. 别漏掉第三方依赖的转译 #

默认情况下babel-loader会排除node_modules目录，但很多小众库、私有包或者一些更新较快的库并没有提前转译为ES5。如果你的项目依赖了这类包，它们的代码就会跳过babel转译。

你可以修改exclude规则，用反向断言把需要转译的包包含进来：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        // 排除node_modules，但不指定需要转译的包名
        exclude: /node_modules(?!\/(my-custom-package|some-untranspiled-lib))/,
        use: 'babel-loader'
      }
    ]
  }
};

2. 处理Webpack生成的Runtime代码 #

Webpack自身生成的runtime代码（比如模块加载逻辑）可能会包含ES6语法，尤其是Webpack 4及以上版本。要转译这部分代码，你需要用到@babel/plugin-transform-runtime插件：

首先安装依赖：

npm install --save-dev @babel/plugin-transform-runtime
npm install @babel/runtime @babel/runtime-corejs3

然后修改.babelrc添加插件配置：

{
  "presets": [/* 你已有的preset配置 */],
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 3
    }]
  ]
}

3. 确认@babel/preset-env的目标浏览器配置 #

有时候问题出在targets配置不够精确，比如你要兼容IE11，只写last 2 versions是不够的，必须明确指定ie >= 11。另外，推荐用.browserslistrc文件统一管理目标浏览器，这样babel、postcss等工具都会共用这个配置，避免不一致：

创建.browserslistrc文件：

last 2 versions
ie >= 11

之后可以删掉.babelrc里的targets配置，@babel/preset-env会自动读取这个文件的设置。

4. 生产环境用Terser补充转译 #

在生产环境，Webpack默认会用terser-webpack-plugin压缩代码，你可以显式配置它强制输出ES5代码：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          ecma: 5, // 指定输出ES5
          compress: {
            warnings: false
          },
          output: {
            comments: false,
            ecma: 5
          }
        }
      })
    ]
  }
};

5. 检查Loader执行顺序 #

如果你的项目同时使用了其他转译loader（比如ts-loader），可能会和babel-loader的执行顺序冲突。确保babel-loader在loader链的最后执行，或者用enforce属性控制顺序：

{
  test: /\.js$/,
  exclude: /node_modules/,
  enforce: 'post', // 确保在其他loader之后执行
  use: 'babel-loader'
}

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