解決 npm install 時出現警告 minimist 風險問題

應該有很有一段時間，在手上的專案在部署時，進行「npm install」，雖然過程沒有什麼問題，但最後都會出現一些風險警告，然後輸入「npm audit」查看時，會發現排在第一個的都是

minimist <= 1.2.5

Serverity: ciritical

Prototype Pollution in minimist - xxxxxxxx

...

雖然是警告，但這層級有到 ciritical …一直讓我覺得要解決(但其實經手了幾個案子…現在新案子開啟時我才想到…)

那這邊提供兩個解法

1. https://sca.analysiscenter.veracode.com/vulnerability-database/security/prototype-pollution/javascript/sid-34731
• 其實應該不少人看到這裡會覺得「呃，我的 packages.json 的 dependencies 中就沒有 minimist 呀，那為什麼會出現這個風險警告」…是的，其實我本來也是一樣的疑惑…但仔細瞭解 npm 的作法後大概知道，其實有不少的東西是因為 packages.json 中的其他套件有用到 minimist 的關係；以我自己的檢查，雖然我 packages.json 中沒有指定使用 minimist ，但部份其他會用到的套件自己的 packages.json 中有列出來，但實際上下載下來的 minimist 也已經是 1.2.6 版了，但因為 npm 的警告是依 packages.json 的設定在走的，所以 npm 檢查到某個套件要求要裝 minimist x.x.x 以上的版本，只是寫在 packages.json 中的 x.x.x 不是 ^1.2.5 ，所以就告警了
• 所以解決的方法就是直接在最外面專案的 packages.json 指定下載 minimist 1.2.6 即可
2. https://github.com/substack/minimist/issues/164
   
• 利用 npm 某一版之後內建 npm-force-resolutions 功能，可在 packages.json 建立 resolutions 區塊來指定要將 minimist 定義轉移至 minimist-list@2.2.0
• 我是使用這個方式

minimist 的問題解決了，但現在還有出現兩個警告讓我看了不舒服

npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1

是說，這邊的警告只是告知使用者，這兩個套件已經被棄用，且只適用在 legacy 模式下…也就是說…原則上上面的警告是提醒，不是說有什麼問題…

只是，單純看了會不舒服…網路有說不然就把告警的訊息關閉，但就喪失「提醒」的意義了。

我會再找找看有沒有比較兩全的作法…

Larave 8 使用 terser-webpack-plugin 在 webpack 時用 esbuild 進行 minify

用 Laravel 的朋友們應該都知道，無論用 vue、react 或單純 js、css 都可以經由 webpack.mix.js 來打包成 webpack 或單純就是把上述的 code 集收起來…不過，開發到一定時日或用的套件越來越多時，這個 pack …就會越來越肥大。

雖說在發佈成 production 時會自帶 minify，但不知道有沒有和在下一樣的，因為案子是多 pg 合作，pg 有全端或單後端或單前端…前端目前有分 js + jq 和 js + vue3 的，在下是全端，在前端雖會用 vue，但目前來說還是 js + jq 是主力；但目前案子很常是 npm run watch 或 npm run dev 出來的 vue 是可以運作的，但發佈成 npm run prod 後就壞掉了…所以案子都是以 development 的方式在運行…但，匯出來的 js 頗肥呀。

在下原本用來解決這個的方式是在 packages.json 的 scripts 多寫一個用 uglifyjs 來做 minify 的指令來做，可以看看

uglifyjs public/js/app.js -o public/js/app.min.js -c -m --source-map && uglifyjs public/js/vue.js -o public/js/vue.min.js -c -m --source-map

之後接觸 esbuild 這強大的工具之後，就利用這篇改寫了上述用來 minify 的指令，效果是不錯，但…因為強大的懶惰基因就一直讓我在想「如果在 npm run watch 時就可以同時把 app.js, vue.js minify 那不就更好」，所以就開始找工具了…後來果然網路是強大的…

利用 esbuild 指令來對 js, css 進行 minify

esbuild 是個快速又不錯用的 javascript 打包工具，速度快就不說了，還可以幫你檢查語法。

可以利用以下參數來進行 minify (這個應該要叫壓縮還是縮小…或，就是檔案容量縮小)

esbuild --charset=utf8 index.js --minify --minify-whitespace --minify-syntax --drop:debugger --drop:console --legal-comments=none --sourcemap --outfile=index.min.js

以下把一些特別參數拿出來說明一下

• --minify-whitespae
• 把多餘空格拿掉
• --minify-syntax
• 簡化語法
• --legal-comments=none
• 把註解拿掉
• --out-extension:.js=.min.js
• 轉換後的是存為 xxx.min.js
• 此參數與參數「--outdir={path}」一起用
• --outdir={path}
• 指定匯出路徑，匯出的檔名預設原檔名，但可以搭配參數「--out-extension:.js=.min.js」讓匯出後的檔名改為是以 .min.js 為主

css minify 的指令是差不多的，可參考以下

esbuild --charset=utf8 index.css --minify --minify-whitespace --minify-syntax --legal-comments=none --sourcemap --outfile=index.min.css