ES模块未被Babel&Webpack转译，UglifyJsPlugin报const语法错误求助

嘿，我之前也碰到过一模一样的情况！你说的这个问题，核心原因就是那个Rollup打包的ES模块没被Babel正确转译，而UglifyJsPlugin本身不支持处理ES6+语法，所以才会报错。下面给你几个靠谱的解决办法，按顺序试就行：

1. 强制让Babel处理这个特定模块 #

虽然你没写exclude: /node_modules/，但Webpack有时候会因为模块的导入逻辑或者缓存，跳过某些node_modules里的文件。你可以直接用include把目标模块的路径写死，确保babel-loader一定会处理它：

const path = require('path');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        include: [
          path.resolve(__dirname, 'src'), // 你的业务代码目录
          path.resolve(__dirname, 'node_modules/[你的目标模块名]') // 替换成那个ES模块的实际名字
        ]
      }
    ]
  }
};

这样就不会有漏网之鱼了。

2. 检查你的Babel配置是否真的能转ES6 #

别光配置了babel-loader，要是.babelrc或者babel.config.js里的预设没配对，转译等于白做。比如你得确保用了@babel/preset-env，并且设置了合适的目标环境，举个例子：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"], // 按需调整目标浏览器范围
        "node": "14"
      },
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

这个预设会把ES6+语法转成目标环境支持的代码，确保UglifyJs能处理。

3. 直接换掉UglifyJsPlugin（最省心的方案） #

说实话，UglifyJs已经有点过时了，Webpack 4及以上版本官方推荐用terser-webpack-plugin，它原生支持压缩ES6代码，根本不用把所有模块都转成ES5。配置起来也简单：

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

module.exports = {
  // ...其他配置
  optimization: {
    minimizer: [new TerserPlugin()]
  }
};

换上之后，就算模块里有const、箭头函数这些ES6语法，也能正常压缩，不会再报那个错。

4. 检查模块的package.json入口 #

有些Rollup打包的模块会在package.json里同时放module（ES模块版本）和main（ES5版本）字段，Webpack默认会优先用module字段。如果这个模块有ES5版本的话，你可以让Webpack先加载main字段的文件，在配置里加：

module.exports = {
  // ...其他配置
  resolve: {
    mainFields: ['main', 'module']
  }
};

这样直接用现成的ES5版本，省得自己转译了。

你可以先试第1和第3个方案，这两个解决这个问题的概率最高，要是还不行再看其他的。

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