ERROR in index.js from UglifyJs(VUE打包时遇到的错误)

首先声明下,这篇文章是从百度看到的,没找到转载,所以粘贴进来。记录一下自己的错误

当我们运行打包脚本npm run build或者打包iosweexpack build ios有可能会遇到以下报错


这是因为webpack在打包vue文件时没有成功转换ES6的语法

解决方法

解决方法很简单,加入babel-preset-es2015插件即可
1、安装依赖包
$ npm install --save-div babel-preset-es2015

ps:babel-loaderbabel-core应该是默认装好的,如果没有安装,请重新安装

2、修改【webpack.config.js】配置文件
找到 /\.js$/的rules,进行修改

 {
        test: /\.js$/,
        use: [{
          loader: 'babel-loader',
          options: {
             presets: ['es2015']
          }
        }]
      }
3、根目录下添加【.babelrc】文件
文件内容:
{
  "presets": ["es2015"]
}

重试

重新运行打包脚本查看效果,指令视情况而定
$ npm run build
如果还不行,把node-modules删掉,在cnpm install



打个广告:淘宝天猫内部优惠群,加我微信拉你进群18801014156

<think>我们正在解决一个Vue项目构建出现的UglifyJs报错问题。报错信息为"UglifyJsundefinederrorinchunk-vendors.js",这通常发生在使用Webpack进行构建(如VueCLI项目)的过程中。此错误可能由多种原因引起,包括但不限于:1.代码中存在ES6+语法,而UglifyJs不支持(因为UglifyJs主要处理ES5)。2.第三方库(位于chunk-vendors.js)中包含UglifyJs无法解析的语法。3.版本兼容性问题。根据提供的引用,用户之前关注的是使用compression-webpack-plugin进行gzip压缩,但当前问题与压缩无关,而是构建过程中的压缩(混淆)步骤出错。解决方案通常包括:1.升级或更换压缩工具:由于UglifyJs对ES6+支持有限,可以改用Terser(Webpack4+默认使用Terser)。2.检查第三方库:确保所有第三方库都是兼容的,或者通过配置排除某些库的压缩。3.调整Webpack配置。由于VueCLI项目默认使用Terser(如果使用Webpack4及以上),所以出现UglifyJs报错可能是因为项目中显式配置了UglifyJs插件,或者使用的是旧版本VueCLI(Webpack3)。因此,我们分步骤解决:步骤1:确认VueCLI版本如果项目使用VueCLI3及以上,则默认使用Terser,不会出现UglifyJs。所以,如果出现此错误,可能是由于:-项目是基于VueCLI2(Webpack3)创建的,而Webpack3默认使用UglifyJs。-项目中有自定义配置,显式使用了UglifyJs。步骤2:升级VueCLI(如果版本过低)如果项目是旧版本,考虑升级到VueCLI4或5(现在最新是5,但4也可以)。步骤3:如果不想升级,则修改配置(针对VueCLI2)在VueCLI2生成的项目中,我们可以通过修改`webpack.prod.conf.js`来更换压缩插件为Terser。具体操作:1.安装Terser插件:```bashnpminstallterser-webpack-plugin--save-dev```2.在`webpack.prod.conf.js`中,找到UglifyJsPlugin的配置,将其替换为TerserPlugin。替换前(示例):```javascriptnewUglifyJsPlugin({compress:{warnings:false,drop_debugger:true,drop_console:true},sourceMap:true})```替换后:```javascriptconstTerserPlugin=require('terser-webpack-plugin')//在plugins数组中找到UglifyJsPlugin并替换,或者在optimization.minimizer中配置(取决于Webpack版本)//如果是Webpack4,通常配置在optimization.minimizeroptimization:{minimizer:[newTerserPlugin({parallel:true,//开启多进程terserOptions:{compress:{drop_console:true,//移除consoledrop_debugger:true//移除debugger}}})]}```同,移除原有的UglifyJsPlugin。步骤4:如果问题仍然存在,可以尝试排除某些模块有候某个第三方库有问题,我们可以通过配置Terser(或UglifyJs)排除某些文件。在TerserPlugin中,可以使用`exclude`或`include`选项,或者使用`test`来匹配文件。步骤5:检查具体错误信息错误信息中可能会指出是哪个文件有问题,我们可以根据错误信息去查找原因。例如,如果错误指向一个特定的第三方库,我们可以尝试:-升级该库-检查该库是否有ES5版本-在构建排除该库的压缩(不推荐,因为会增大体积)步骤6:如果使用VueCLI3以上,但仍有类似错误可能是自定义配置中使用了UglifyJs,需要检查`vue.config.js`中是否有相关配置,并改为Terser。在VueCLI3以上,默认使用Terser,所以通常不需要配置。但如果有自定义配置,可以这样:```javascript//vue.config.jsconstTerserPlugin=require('terser-webpack-plugin')module.exports={configureWebpack:{optimization:{minimizer:[newTerserPlugin({terserOptions:{compress:{drop_console:true}}})]}}}```注意:VueCLI内部已经配置了Terser,所以这样配置可能会覆盖默认配置,需要小心。步骤7:如果不想使用Terser,也可以尝试升级UglifyJs并配置支持ES6但是,UglifyJs对ES6的支持有限,推荐使用Terser。安装支持ES6的UglifyJs(即uglify-es):```bashnpminstalluglifyjs-webpack-plugin@^2.2.0--save-dev```然后在Webpack配置中使用:```javascriptconstUglifyJsPlugin=require('uglifyjs-webpack-plugin')//替换原有的UglifyJsPluginnewUglifyJsPlugin({uglifyOptions:{compress:{drop_console:true,drop_debugger:true},mangle:true,output:{comments:false}},sourceMap:true,parallel:true})```但是,uglify-es已经不再维护,所以还是推荐Terser。总结:推荐使用Terser替换UglifyJs,并根据项目情况调整配置。如果问题仍然存在,请提供具体的错误信息,以便进一步分析。相关问题:1.如何升级VueCLI2项目到VueCLI4?2.在Webpack中如何配置TerserPlugin以保留特定的注释?3.如何排除某个第三方库的压缩?</think>### 解决 npm run build UglifyJs 报错问题 该错误通常发生在 Vue/Webpack 项目中打包,因 UglifyJS 无法正确处理 ES6+ 语法导致。以下是分步解决方案: --- #### 1. **确认问题根源(关键步骤)** UglifyJS 不支持 ES6+ 语法(如箭头函数、const/let、async/await),而 `chunk-vendors.js` 可能包含 ES6+ 代码: ```bash ERROR in chunk-vendors [minimizer] SyntaxError: Unexpected token: keyword «const» [chunk-vendors.xxxx.js:yyy,zzz] ``` --- #### 2. **解决方案:启用 Terser 替代 UglifyJS(推荐)** > **原理**:Vue CLI 默认已用 Terser(支持 ES6+)替换 UglifyJS,但旧项目可能残留配置。 **步骤**: ```javascript // vue.config.js module.exports = { configureWebpack: { optimization: { minimizer: [ new TerserPlugin({ // 使用 Terser 替代 UglifyJS terserOptions: { compress: { drop_console: true, // 生产环境移除 console }, }, }), ], }, }, }; ``` - 安装 Terser 插件(如未安装): ```bash npm install terser-webpack-plugin --save-dev ``` --- #### 3. **备选方案:显式排除 ES6+ 语法** > **适用场景**:无法升级 Terser ,强制转译依赖库。 **步骤**: ```javascript // vue.config.js module.exports = { transpileDependencies: [ /node_modules[\\/]your-es6-package/, // 替换为报错的包名 /node_modules[\\/]another-es6-lib/, ], }; ``` --- #### 4. **检查兼容性配置** 确保 Babel 正确处理 `node_modules` 中的依赖: ```javascript // babel.config.js module.exports = { presets: [ ['@babel/preset-env', { targets: { browsers: '> 0.25%' }, // 覆盖更广的浏览器兼容 useBuiltIns: 'usage', corejs: 3, }] ], include: [ // 强制转译特定依赖 /node_modules[\\/]es6-package-name/, ], }; ``` --- #### 5. **验证与调试** 1. 清理缓存后重新构建: ```bash rm -rf node_modules/.cache npm run build ``` 2. 若仍报错,检查具体出错位置: ```bash npm run build -- --debug ``` --- ### 常见原因总结 | 原因 | 解决方案 | |---------------------|----------------------------| | 第三方库含 ES6+ 代码 | `transpileDependencies` 转译 | | UglifyJS 未替换 | 启用 Terser 插件 | | Babel 配置不完整 | 扩展 `@babel/preset-env` | > **注意**:Vue CLI 4+ 已默认使用 Terser[^3],若项目较旧建议升级 Vue CLI: > ```bash > npm update @vue/cli-service > ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值