执行npm run build遇UglifyJs Unexpected Token错误，npm run watch却正常

兄弟，我太懂你这种情况了！明明npm run watch编译顺顺利利，一执行npm run build就被UglifyJs的错误卡脖子，简直头大。咱们来一步步拆解问题：

问题根源 #

你的build脚本用了webpack -p参数，这个参数会自动触发webpack内置的旧版UglifyJsPlugin来压缩代码，但这个老版本的UglifyJs只能处理ES5语法。如果你的代码（或者依赖的第三方包）里有ES6+的新语法（比如对象最后一个属性后的逗号、箭头函数、解构赋值这类），它就会识别不了，直接抛出Unexpected token的错误。

而watch模式用了-d（开发模式），webpack只做打包转译，不会启用代码压缩，自然不会触发UglifyJs的语法检查，所以能正常跑起来。

解决方案 #

1. 替换成支持ES6+的压缩工具 #

旧版UglifyJs已经被淘汰了，换成terser-webpack-plugin就行，它是官方推荐的替代工具，完美支持ES6+语法：

• 先安装依赖：

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

• 然后修改你的webpack.prod.config.js，手动配置压缩插件：

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

• 最后把build脚本里的-p参数去掉（因为-p会自动启用旧的UglifyJs），修改后的脚本：

  "scripts": {
    "build": "webpack --define process.env.NODE_ENV='\"production\"' --progress --colors --config ./webpack.prod.config.js",
    "watch": "webpack-dev-server -d --hot --inline --define process.env.NODE_ENV='\"development\"' --config ./webpack.dev.config.js"
  }
  

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

如果你的代码里有未被Babel转译的ES6语法，也会导致压缩失败。检查你的webpack配置里的babel-loader：

module: {
  rules: [
    {
      test: /\.js$/,
      // 如果某些第三方依赖也用了ES6语法，要把它们从exclude里排除，比如：exclude: /node_modules\/(?!lodash-es)/
      exclude: /node_modules/,
      use: 'babel-loader'
    }
  ]
}

同时确认你的.babelrc或者babel配置文件里，已经包含了转译ES6的预设（比如@babel/preset-env）。

3. 临时修复：检查报错代码行 #

根据错误提示里的xxx.js:102316,12，找到对应的代码位置，看看是不是有ES6+的语法（比如对象最后一个属性后面多了逗号），手动改成ES5兼容的写法，也能快速解决这个问题。

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