在前端开发中,webpack 是一个非常常用的构建工具。它可以将多个 JavaScript 文件打包成一个文件,减小文件体积,提高加载速度。但是,在使用 webpack 进行构建时,我们有时会遇到 ERROR in app.js from UglifyJs Unexpected token: operator(>) 的错误,这时应该怎么办呢?
错误原因
这个错误的原因是因为 UglifyJs 在压缩代码时,遇到了一个不被支持的语法。具体来说,就是在代码中使用了类似于大于号(>)这样的符号,而 UglifyJs 并不支持这种符号。因此,在压缩代码时,就会出现 Unexpected token: operator(>) 的错误。
解决方法
解决这个错误的方法有两种,一种是升级 UglifyJs 的版本,另一种是在 webpack 的配置文件中增加一个插件。
升级 UglifyJs 的版本
升级 UglifyJs 的版本是一种较为简单的解决方法。我们只需要将 UglifyJs 的版本升级到最新版本即可。
npm install uglify-js@latest --save-dev
在 package.json 中,将 uglify-js 的版本号修改为最新版本:
{
"devDependencies": {
"uglify-js": "^3.14.2"
}
}然后重新运行 webpack 即可。
增加插件
另一种解决方法是在 webpack 的配置文件中增加一个插件。这个插件叫做 babel-plugin-transform-remove-strict-mode。
npm install babel-plugin-transform-remove-strict-mode --save-dev
在 webpack 的配置文件中增加这个插件:
-- -------------------- ---- -------
----- -------------- - -----------------------------------
----- ------------------------------ - -----------------------------------------------------
-------------- - -
-- ---
------------- -
---------- -
--- ----------------
-------------- -
--------- -
-- - -------- -------- ---- ------- --
----------- -
-- - ----------------------------------------- ----- ---- ------- --
-- -------------- ---- ------- --
-- -----------------------------------------------
-- ------------------------------------------
------- ------
--
--
--
---------- -----
---
--
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
-
------- ---------------
-------- -
-------- --------
-------- -
-------------------------------
--
--
--
--
--
--
--
--这个插件的作用是移除代码中的 "use strict" 语句。在移除了 "use strict" 语句之后,UglifyJs 就可以正常压缩代码了。
示例代码
下面是一个使用了大于号(>)的 JavaScript 代码示例:
const a = 1; const b = 2; const c = a > b ? a : b; console.log(c);
在使用 webpack 进行构建时,会出现 ERROR in app.js from UglifyJs Unexpected token: operator(>) 的错误。我们可以使用上面介绍的两种方法来解决这个错误。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d3d4bca941bf713473dfc8