[已解决]npm run build 报错:ERROR in static/js/vendor.js from UglifyJs

523 阅读1分钟

最近对以前的一个vue项目进行迭代,之前编译和打包都正常,然后有半年没动过此项目,结果遇到的问题是:
可以正常启动,可是打包的时候运行 npm run build 就报错,报错信息如下图所示:

image.png image.png

为方便查询,现将报错信息复制如下:

ERROR in static/js/0.c82c8d0933d549b8fdae.js from UglifyJs
Unexpected token: keyword (const) [./node_modules/_d3-cloud@1.2.7@d3-cloud/index.js:91,0][static/js/0.c82c8d0933d549b8fdae.js:1724,9]

ERROR in static/js/vendor.2410c45cc1a76d3ec97f.js from UglifyJs
Unexpected token: punc (}) [./node_modules/_v-viewer@1.7.4@v-viewer/dist/index.es.js:568,0][static/js/vendor.2410c45cc1a76d3ec97f.js:136385,2]

  Build failed with errors.

解决方案:

需要修改前端文件夹下的build/webpack.base.conf.js文件, image.png

修改如下:

// 修改前

module: {
  rules: [
    {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')],
      },
  ]
}
// 修改后

module: {
  rules: [
    {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('/node_modules/_d3-cloud@1.2.7@d3-cloud'), resolve('/node_modules/_v-viewer@1.7.4@v-viewer/dist')],
      },
  ]
}

即将报错的两个文件放在include中,路径的对应方式如下图:

image.png

之后再次执行 npm run build, build 成功。

image.png

解决问题的过程中,了解到原因:

由于 UglifyJs 只支持 ES5 而引入的 ui框架 中可能引入了一部分 ES6 的写法,所以导致 webpack 打包失败。