【解决】ERROR in xxx.js from UglifyJs

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

ERROR in index.js from UglifyJs

这是因为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

如果依然存在问题,你可以在下方留言

### UglifyJs 错误分析 UglifyJsWebpack 中常用的压缩工具之一,但在处理 JavaScript 文件时可能会遇到一些兼容性问题。以下是可能导致 `UglifyJs` 处理 `app.js` 出现错误的原因以及解决方案。 #### 可能原因 1. **ES6+ 语法不支持**: 如果项目中使用了 ES6 或更高版本的语法(如箭头函数、模板字符串等),而未经过 Babel 转译,则可能引发 UglifyJs 的解析失败[^1]。 2. **第三方库未转义**: 部分第三方库可能存在未被完全转换为 ES5 的代码片段,这也会导致 UglifyJs 报错[^2]。 3. **Webpack 版本冲突**: 不同版本的 Webpack 和其插件之间可能存在兼容性问题,尤其是当使用的插件版本较旧或过新时[^3]。 --- ### 解决方案 #### 方法一:升级到 Terser 替代 UglifyJs 由于 UglifyJs 已停止维护,推荐切换至更现代的替代品——Terser。它能够更好地支持最新的 ECMAScript 标准并提供更高的性能。 修改 `webpack.config.js` 如下: ```javascript const TerserPlugin = require('terser-webpack-plugin'); module.exports = { optimization: { minimize: true, minimizer: [ new TerserPlugin({ terserOptions: { ecma: 8, // 支持最新标准 warnings: false, }, }), ], }, }; ``` 此方法通过引入 `TerserPlugin` 来替换默认的 UglifyJs 插件。 --- #### 方法二:Babel 转换所有代码 确保项目的源码和依赖项均已被正确地编译成 ES5。可以通过调整 `.babelrc` 或 `babel-loader` 的配置实现这一目标。 `.babelrc` 示例: ```json { "presets": ["@babel/preset-env"], "plugins": ["transform-class-properties"] } ``` 更新 `webpack.config.js` 中的相关部分: ```javascript module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], }, }, }, ], }, }; ``` 上述设置可以有效防止因高级语法引起的 UglifyJs 错误。 --- #### 方法三:排除特定模块 对于某些无法正常工作的第三方库,可以选择将其从优化过程中移除。例如,在 React 应用程序中,可尝试跳过 Ant Design 组件库的压缩操作。 示例代码: ```javascript optimization: { splitChunks: { cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, priority: -10, name(module) { const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]; return `npm.${packageName.replace('@', '')}`; }, }, }, }, }, ``` 这样做的好处是可以减少不必要的复杂度,同时保留其他资源的最佳化效果。 --- ### 总结 综上所述,针对 `UglifyJs` 在处理 `app.js` 过程中的报错现象,建议优先考虑迁移到 Terser 并重新审视现有的构建流程是否存在潜在隐患。此外,合理运用 Babel 对整个项目进行预处理也是不可或缺的一环。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值