UglifyJs意外token错误：已配置Babel仍无法转换ES6的解决咨询

别担心，这个问题我之前也碰到过，核心原因就是Webpack默认的UglifyJsPlugin确实不支持ES6语法——哪怕你配置了Babel，要么是转译没覆盖到所有代码，要么就是压缩工具没跟上。下面给你几个靠谱的解决办法：

1. 替换为支持ES6的压缩工具（最推荐） #

直接换掉旧版UglifyJs，用terser-webpack-plugin就好，它是Webpack官方推荐的替代方案，原生支持ES6+语法压缩，完全能解决let这类语法导致的报错。

操作步骤： #

• 先安装插件：

  npm install terser-webpack-plugin --save-dev
  

• 修改你的webpack.config.js，添加优化配置：

  const TerserPlugin = require('terser-webpack-plugin');
  
  module.exports = {
    // 其他原有配置...
    optimization: {
      minimizer: [new TerserPlugin()]
    }
  };
  

之后再执行webpack -p，就会用Terser代替旧的UglifyJs，不会再出现ES6语法相关的错误。

2. 确保Babel真正转译了所有ES6代码 #

有时候配置了babel-loader，但可能没覆盖到所有需要转译的文件，导致部分ES6代码漏网。检查你的loader配置，重点确认这几点：

const path = require('path');

module.exports = {
  // 其他原有配置...
  module: {
    rules: [
      {
        test: /\.jsx?$/, // 匹配所有js、jsx文件
        include: path.resolve(__dirname, 'src'), // 明确指定你的源码目录，确保所有ES6代码都在这里
        exclude: /node_modules/, // 排除第三方依赖（除非某些依赖本身是ES6编写的）
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['es2015', 'es2016', 'react']
            }
          }
        ]
      }
    ]
  }
};

确认include的路径正确，保证你写的包含let的代码都在这个目录下，被babel-loader处理。

3. 升级Babel到7.x版本（更长远的方案） #

旧的es2015、es2016预设已经被官方废弃了，推荐用@babel/preset-env代替，它能根据你指定的目标环境自动转译所需的ES特性，转译更精准，也能避免旧预设的潜在问题。

操作步骤： #

• 先卸载旧的Babel依赖：

  npm uninstall babel-loader babel-preset-es2015 babel-preset-es2016 babel-preset-react
  

• 安装新版Babel包：

  npm install @babel/core @babel-loader @babel/preset-env @babel/preset-react --save-dev
  

• 修改loader配置：

  {
    loader: 'babel-loader',
    options: {
      presets: [
        '@babel/preset-env', // 替代原有的es2015/es2016预设
        '@babel/preset-react'
      ]
    }
  }
  

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