webpack构建时UglifyJs因ES6语法报错，clone-deep未转译求助

我刚碰到过几乎一模一样的问题，咱们来一步步把它搞定：

问题根源 #

你遇到的报错核心原因有两个：

1. webpack 3 自带的 UglifyJs 插件不支持 ES6 语法，它只能处理 ES5 代码；
2. 你的 webpack 配置只对自己项目 src 目录下的代码做了 Babel 转译，但依赖包 clone-deep@4.0.1 的源码里用了 let 这类 ES6 特性，完全没经过转译就被交给了 UglifyJs，自然就报错了。

手动修改包源码确实能临时解决，但下次 npm install 就会被覆盖，完全不是长久之计。

靠谱的解决方案 #

这里给你三个可行的方案，按需选择：

方案一：让 Babel 转译 clone-deep 包 #

修改 webpack 配置，把 clone-deep 加入 Babel 转译范围，让它的 ES6 代码先转成 ES5 再交给 UglifyJs 处理：

打开 webpack.build.config.js，修改 module.loaders 里的 include 配置：

module : {
  loaders : [
    {
      test : /\.jsx?/,
      // 把 clone-deep 目录加入转译范围
      include : [APP_DIR, path.resolve(__dirname, 'node_modules/clone-deep')],
      loader : 'babel-loader',
      options: {
        "presets" : ["env", "react"],
        "plugins": ["transform-decorators-legacy"]
      }
    }
  ]
},

方案二：升级 UglifyJs 到支持 ES6 的版本 #

webpack 3 自带的 UglifyJs 是旧版，我们可以安装支持 ES6 的 uglifyjs-webpack-plugin 替代它：

1. 先安装兼容 webpack 3 的版本：

npm install uglifyjs-webpack-plugin@1.3.0 --save-dev

2. 修改 webpack.build.config.js，引入并配置这个插件：

var webpack = require('webpack');
var path = require('path');
// 引入新的 Uglify 插件
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var BUILD_DIR = path.resolve(__dirname, 'out/');
var APP_DIR = path.resolve(__dirname, 'src/');
var config = {
  entry: ['babel-polyfill', APP_DIR + '/App.jsx'],
  output: {
    path: BUILD_DIR,
    filename: './bundle.js'
  },
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader',
        options: {
          "presets" : ["env", "react"],
          "plugins": ["transform-decorators-legacy"]
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  // 添加插件配置
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        ecma: 6, // 开启 ES6 语法支持
        compress: true,
        mangle: true
      }
    })
  ]
};
module.exports = config;

3. 最后修改 package.json 的 build 脚本，去掉 -p 参数（因为 -p 会自动启用旧版 Uglify，和我们手动配置的冲突）：

"scripts": {
  "dev": "webpack -d --watch",
  "build": "webpack --config webpack.build.config.js"
}

方案三：替换/降级 clone-deep 包 #

如果不想改配置，也可以换一个本身就输出 ES5 代码的深克隆包，比如 lodash.clonedeep：

npm uninstall clone-deep
npm install lodash.clonedeep --save

然后把项目里用到 clone-deep 的地方换成 lodash.clonedeep 就行。或者你也可以尝试降级 clone-deep 到 3.x 版本，这些早期版本可能还没使用 ES6 语法。

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