Vue.js项目执行npm run build时UglifyJs报错求助

最近我在Vue.js项目里执行npm run build --verbose（包括npm run-script build）时碰上个头疼的错误——UglifyJs编译失败，提示Unexpected token punc «:», expected punc «,»，具体指向./node_modules/debug/src/browser.js文件的第168行。折腾了一阵后总算找到了解决办法，分享给大家：

完整报错信息 #

ERROR in static/js/vendor.4776fef98deb2b7313a7.js from UglifyJs
Unexpected token punc «:», expected punc «,» [./node_modules/debug/src/browser.js:168,0][static/js/vendor.4776fef98deb2b7313a7.js:55100,55]
Build failed with errors.

npm verb lifecycle aili@1.0.0~build: unsafe-perm in lifecycle true
npm verb lifecycle aili@1.0.0~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/ldl/repo/vue_user_site/node_modules/.bin:/usr/local/git/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin:/usr/local/git/bin:/home/ldl/.local/bin:/home/ldl/bin
npm verb lifecycle aili@1.0.0~build: CWD: /home/ldl/repo/vue_user_site
npm info lifecycle aili@1.0.0~build: Failed to exec build script
npm verb stack Error: aili@1.0.0 build: `node build/build.js`
npm verb stack Exit status 1
npm verb stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16)
npm verb stack     at emitTwo (events.js:126:13)
npm verb stack     at EventEmitter.emit (events.js:214:7)
npm verb stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
npm verb stack     at emitTwo (events.js:126:13)
npm verb stack     at ChildProcess.emit (events.js:214:7)
npm verb stack     at maybeClose (internal/child_process.js:925:16)
npm verb stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
npm verb pkgid qiyun@1.0.0
npm verb cwd /home/ldl/repo/vue_user_site
npm verb Linux 3.10.0-327.el7.x86_64
npm verb argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build" "--verbose"
npm verb node v8.11.1
npm verb npm v5.6.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! qiyun@1.0.0 build: `node build/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the aili@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm verb exit [ 1, true ]
npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ldl/.npm/_logs/2018-05-11T02_00_29_973Z-debug.log

我的项目build/build.js代码如下（确认这块没有问题）：

'use strict';
require('./check-versions')();
process.env.NODE_ENV = 'production';

const ora = require('ora');
const rm = require('rimraf');
const path = require('path');
const chalk = require('chalk');
const webpack = require('webpack');
const config = require('../config');
const webpackConfig = require('./webpack.prod.conf');

const spinner = ora('building for production...');
spinner.start();

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err;
  webpack(webpackConfig, (err, stats) => {
    spinner.stop();
    if (err) throw err;
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false,
      // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
      chunks: false,
      chunkModules: false
    }) + '\n\n');

    if (stats.hasErrors()) {
      console.log(chalk.red('  Build failed with errors.\n'));
      process.exit(1);
    }

    console.log(chalk.cyan('  Build complete.\n'));
    console.log(chalk.yellow(
      '  Tip: built files are meant to be served over an HTTP server.\n' +
      '  Opening index.html over file:// won\'t work.\n'
    ));
  })
});

问题原因 #

说白了就是旧版UglifyJs不支持ES6+语法，而debug包的browser.js文件里使用了ES6的新语法（比如对象属性简写、箭头函数这类），UglifyJs无法解析这些语法，导致编译失败。

三种解决办法任你选 #

办法一：换用支持ES6的压缩插件

UglifyJs已经停止维护，推荐使用它的继任者terser-webpack-plugin，天生支持ES6+语法：

1. 安装插件：

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

2. 修改build/webpack.prod.conf.js中的压缩配置：
   找到原来的UglifyJsPlugin部分，替换为以下代码：

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

// ... 其他配置保持不变 ...

module.exports = {
  // ...
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            warnings: false
          }
        },
        sourceMap: config.build.productionSourceMap,
        parallel: true
      })
    ]
  }
  // ...
};

办法二：让Babel转译debug包

如果不想更换压缩插件，可以配置Babel将node_modules中的debug包转译为ES5语法：
修改build/webpack.base.conf.js里的babel-loader规则，调整exclude逻辑：

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      // 排除node_modules里除了debug之外的所有包
      exclude: file => (
        /node_modules/.test(file) &&
        !/node_modules\/debug/.test(file)
      )
    }
  ]
}

办法三：降级debug到ES5兼容版本

找一个使用ES5编写的debug旧版本安装，比如3.1.0版本：

npm install debug@3.1.0 --save

验证解决 #

修改完成后重新执行npm run build，应该就能顺利完成生产环境的构建了！

内容的提问来源于stack exchange，提问作者sof-03