UglifyJs 壓縮 JavaScript 遇到錯誤 Unexpected token: operator «>»

PhpStorm 使用 UglifyJs 壓縮 JavaScript 遇到錯誤「ERROR: Unexpected token: operator «>»」，導致 JavaScript 壓縮檔無法順利產生。PhpStorm 壓縮 JavaScript 的文件提到，ES6 (ECMAScript 2015) 或之後的版本 UglifyJs 不支援，需要使用 Babel 或 webpack 編譯工具。可以改安裝 terser 壓縮 JavaScript 檔案。

Logo of terser

問題原因

PhpStorm 壓縮 JavaScript 的文件提到 UglifyJs 支援 ES5 或更早版本，但是不支援 ES6 或之後的版本：

UglifyJS works only with JavaScript (ES5 and earlier). For ES6 and later versions, use build tools, for example, Babel or webpack. Learn more from the UglifyJS official website.

解決方式

網路論壇文章 javascript - UglifyJS throws unexpected token: keyword (const) with node_modules - Stack Overflow 提到安裝 webpack 以及 terser-webpack-plugin，但是因為目前使用環境並用不到 webpack，可以改成直接使用 BSD （BSD授權條款） 可商業用途授權的 terser/terser: 🗜 JavaScript parser, mangler and compressor toolkit for ES6+

以 Mac 作業系統為例

1. 需要安裝 Node.js。Mac 作業系統則可透過 Homebrew 安裝 Node.js

2. 終端機輸入以下指令，確認 Node.js 安裝完成，預期會顯示版本號碼

node --version

3. 終端機輸入以下指令，全域安裝 terser

npm install terser -g

或者是專案方式安裝

npm install terser

4. 終端機輸入以下指令，確認 terser 安裝完成，預期會顯示版本號碼

terser --version

5. 到 PhpStorm 設定 File Watchers 

• Program: terser 或完整路徑 /usr/local/bin/terser
  安裝完整路徑可能會因為作業系統不同而有差異
• Arguments: $FileName$ -o $FileNameWithoutExtension$.min.js
• Output path to refresh: $FileNameWithoutExtension$.min.js

無效的嘗試

改成使用 YUI Compressor 一樣會遇到 JavaScript 語法錯誤

參考資料

• Install Node.js and npm using Homebrew on OS X and macOS |> Changelog
• terser/terser: 🗜 JavaScript parser, mangler and compressor toolkit for ES6+
• Minifying JavaScript | PhpStorm