ERROR in xxx.js from UglifyJs

ERROR in xxx.js from UglifyJs

问题

ERROR in app.bundle.js from UglifyJs
Unexpected token: name «element», expected: punc «;» [app.bundle.js:106,8]

在用webpack对代码打包的时候报错,在网上找到了类似的答案,还是没有解决我的问题.

能解决大部分问题的链接

https://stackoverflow.com/questions/41254538/error-in-bundle-js-from-uglifyjs
http://www.cnblogs.com/aredleave/p/7586911.html
https://segmentfault.com/a/1190000011212544

按照以上方法对环境进行重新配置,依然报错!

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core' babel-loader@8 requires Babel 7.x (the package '@babel/core').
If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
报错原因

通过代码报错原因是 babel-loader 版本问题,因为 babel-loader 用的最新的版本,和 UglifyJs 不兼容.

解决方法

通过运行下面代码对babel-loader进行重新安装(低版本).

npm install --save-dev babel-loader@7

通过修改后的package.json配置文件,亲测可以正确打包,无报错现象.

{
  "name": "kankan",
  "version": "1.0.0",
  "description": "kankan",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  "author": "kankan",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "clean-webpack-plugin": "^2.0.1",
    "css-loader": "^2.1.1",
    "express": "^4.16.4",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1",
    "webpack-dev-middleware": "^3.6.2",
    "webpack-dev-server": "^3.3.1",
    "webpack-manifest-plugin": "^2.0.4",
    "webpack-merge": "^4.2.1"
  }
}

奇卡奇卡 哈哈哈

个人主页:https://kankan.fun

明天的你一定会感谢现在拼命的自己!

### UglifyJs 错误分析 UglifyJs 是 Webpack 中常用的压缩工具之一,但在处理 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 对整个项目进行预处理也是不可或缺的一环。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值