天天看點

實用技巧:檢查前端項目中未使用的依賴包

作者:Git風去雲往

下面來介紹兩個用于檢查未使用依賴包的常用工具:Depcheck和npm-check。

depcheck

Depcheck 是一款用于分析項目中依賴關系的工具,它可以幫助我們找出以下問題:在 package.json 中,每個依賴包如何被使用、哪些依賴包沒有用處、哪些依賴包缺失。它是解決前端項目中依賴包清理問題的一個常用工具。

Depcheck 不僅可以識别 JavaScript 檔案中的依賴關系,還支援以下文法:

  • JavaScript (ES5、ES6 和 ES7)
  • React JSX
  • CoffeeScript
  • TypeScript(需要安裝 typescript 依賴)
  • SASS 和 SCSS
  • Vue.js(需要安裝 @vue/compiler-sfc 依賴)

可以在終端中運作一下指令來安裝 depcheck(需要確定 node.js 的版本大于等于 10.0.0):

npm install -g depcheck
           

在安裝時,報了以下錯誤:

實用技巧:檢查前端項目中未使用的依賴包

問題很明顯就是權限不夠(筆者的電腦是 M1 MacBook,這裡以 mac 的操作為例),問了一下 chatgpt,給出的解答如下:

實用技巧:檢查前端項目中未使用的依賴包

這裡使用最簡單的第一種方案來解決,使用管理者權限來安裝:

sudo npm install -g depcheck
           

這樣就安裝成功了。接下來在前端項目的根目錄下執行以下指令:

depcheck
           

可以看到以下沒有被引用的依賴包以及缺少依賴的檔案:

實用技巧:檢查前端項目中未使用的依賴包

當然,這些依賴并不一定是真的沒用到,比如 less、less-loader、file-loader、svgo、TypeScript 等都在項目或者 webpack 等配置中用到了,depcheck 會忽略這些包。實際上,depcheck 會忽略這些配置檔案中使用到的依賴項。

depcheck 的基本文法如下:

depcheck [directory] [arguments]
           

其中,directory 是項目根目錄(即 package.json 檔案所在的目錄)。如果未指定,預設為目前目錄。所有參數都是可選的:

  • --ignore-bin-package=[true|false]:表示 depcheck 是否忽略包含 bin 入口的包。預設值為 false。
  • --skip-missing=[true|false]:表示 depcheck 是否跳過計算缺失的依賴項。預設值為 false。
  • --json:以 JSON 格式輸出結果。當未指定時,depcheck 會以友好的格式輸出。
  • --oneline:将結果作為用空格分隔的字元串輸出。用于複制/粘貼很有用。
  • --ignores:一個由逗号分隔的數組,包含要忽略的包名稱。它可以是 glob 表達式。例如,--ignores="eslint,babel-*"。
  • --ignore-dirs:已過時,請改用 ignore-patterns。一個由逗号分隔的數組,包含要忽略的目錄名稱。例如,--ignore-dirs=dist,coverage。
  • --ignore-path:指定包含描述要忽略的檔案的模式的檔案的路徑。檔案必須符合 .gitignore 規範。例如,--ignore-path=.eslintignore。
  • --ignore-patterns:用逗号分隔的描述要忽略的檔案的模式。模式必須符合 .gitignore 規範。例如,--ignore-patterns=build/Release,dist,coverage,*.log。
  • --help:顯示幫助資訊。
  • --parsers、--detectors 和 --specials:這些參數用于進階用途。它們提供了一種易于定制檔案解析器和依賴項檢測的方法。。
  • --config=[檔案名]:一個外部配置檔案(見下文)。

例如,想忽略某些包或檔案夾,可以在指令後面添加相應的選項:

depcheck --ignores="eslint" --ignore-dirs="dist"
           

除此之外,我們還可以在項目中增加 depcheck 的配置檔案來配置要忽略解析的檔案、要解析的檔案、要忽略的包等,可以檢視官方的文檔來進行配置。

Github:https://github.com/depcheck/depcheck

npm-check

npm-check 用于檢查項目中的依賴項,并提供有關過期,未使用和缺少依賴項的資訊。npm-check 是基于 depcheck 實作的。它可以提示項目依賴項的狀态,但它隻會檢查并更新項目的直接依賴項,并不會檢查和更新嵌套的依賴項(即項目的依賴項的依賴項)

npm-check 具有以下特性:

  • 告訴哪些内容已經過期。
  • 提供包的文檔連結,以便決定是否要更新。
  • 提醒代碼中沒有使用某個依賴項。
  • 通過 -g 支援全局安裝的包。
  • 通過 -u 提供互動式更新,減少輸入和拼寫錯誤。
  • 支援公有和私有的 @scoped/packages。
  • 支援 ES6 風格的 import from 文法。
  • 使用安裝的版本的 npm 進行子產品更新,包括新的 npm@3,以確定依賴項到達預期的位置。
  • 适用于任何公共的 npm 系統資料庫、私有系統資料庫以及類似 Sinopia 的備用系統資料庫。
  • 在 package.json 中設定 private: true 的包不會在系統資料庫中查詢。
  • 為指令行應用添加了表情符号。
  • 适用于 npm@2 和 npm@3,以及一些新的替代安裝程式,例如 ied 和 pnpm。

可以在終端中通過以下指令來安裝 npm-check(需要確定 node.js 的版本大于等于 10.9.0):

npm install -g npm-check
           

安裝時同樣遇到了權限的問題,這裡也使用管理者權限來安裝:

sudo npm install -g npm-check
           

接下來就可以執行以下指令來檢測項目的 npm 包:

npm-check
           

執行完之後,就可以看到類似的結果:

實用技巧:檢查前端項目中未使用的依賴包

這裡面會詳細介紹每個 npm 的情況,可以根據實際情況進行分析。

npm-check 的基本文法如下:

npm-check <path> <options>
           

其中 path 是要檢查的路徑。預設為目前目錄。可以使用 -g 檢查全局子產品。

除此之外,還有以下選項:

  • -u, --update 互動式更新。
  • -y, --update-all 非互動式更新。無需提示即應用所有更新。
  • -g, --global 檢視全局子產品。
  • -s, --skip-unused 跳過未使用的軟體包檢查。
  • -p, --production 跳過 devDependencies。
  • -d, --dev-only 僅檢視 devDependencies(跳過 dependencies)。
  • -i, --ignore 根據成功的 glob 忽略依賴項。
  • -E, --save-exact 在 package.json 中儲存精确版本(x.y.z),而不是 caret (^x.y.z)。
  • --specials depcheck 特殊功能清單,用于檢查未使用的依賴項。
  • --no-color 強制啟用或禁用顔色輸出。
  • --no-emoji 去除表情符号支援。CI 環境預設沒有表情符号。
  • --debug 顯示調試輸出,報告 github 上的問題時,請添加到 gist 中。

除此之外,npm-check 也像 depcheck 一樣,支援在項目根目錄添加配置檔案來進行配置,可以檢視官方的文檔來進行配置。

Github:https://github.com/dylang/npm-check

繼續閱讀