建站
咨詢
售后
建站咨詢
新聞中心
隨著前端項(xiàng)目中使用的依賴包越來(lái)越多，而其中一部分依賴包可能并未被項(xiàng)目所使用，手動(dòng)查找這些依賴包既耗時(shí)又繁瑣。那么，有沒(méi)有工具能夠快速地幫助我們識(shí)別和清理項(xiàng)目中未使用的依賴包呢？下面就來(lái)介紹兩個(gè)用于檢查未使用依賴包的常用工具！
我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、泉州ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的泉州網(wǎng)站制作公司
depcheck
Depcheck 是一款用于分析項(xiàng)目中依賴關(guān)系的工具，它可以幫助我們找出以下問(wèn)題：在 package.json 中，每個(gè)依賴包如何被使用、哪些依賴包沒(méi)有用處、哪些依賴包缺失。它是解決前端項(xiàng)目中依賴包清理問(wèn)題的一個(gè)常用工具。
Depcheck 不僅可以識(shí)別 JavaScript 文件中的依賴關(guān)系，還支持以下語(yǔ)法：
- JavaScript (ES5、ES6 和 ES7)
- React JSX
- CoffeeScript
- TypeScript（需要安裝 typescript 依賴）
- SASS 和 SCSS
- Vue.js（需要安裝 @vue/compiler-sfc 依賴）
可以在終端中運(yùn)行一下命令來(lái)安裝 depcheck（需要確保 node.js 的版本大于等于 10.0.0）：
npm install -g depcheck
在安裝時(shí)，報(bào)了以下錯(cuò)誤：
問(wèn)題很明顯就是權(quán)限不夠（筆者的電腦是 M1 MacBook，這里以 mac 的操作為例），問(wèn)了一下 chatgpt，給出的解答如下：
這里使用最簡(jiǎn)單的第一種方案來(lái)解決，使用管理員權(quán)限來(lái)安裝：
sudo npm install -g depcheck
這樣就安裝成功了。接下來(lái)在前端項(xiàng)目的根目錄下執(zhí)行以下命令：
depcheck
可以看到以下沒(méi)有被引用的依賴包以及缺少依賴的文件：
當(dāng)然，這些依賴并不一定是真的沒(méi)用到，比如 less、less-loader、file-loader、svgo、TypeScript 等都在項(xiàng)目或者 webpack 等配置中用到了，depcheck 會(huì)忽略這些包。實(shí)際上，depcheck 會(huì)忽略這些配置文件中使用到的依賴項(xiàng)。
depcheck 的基本語(yǔ)法如下：
depcheck [directory] [arguments]
其中，directory 是項(xiàng)目根目錄（即 package.json 文件所在的目錄）。如果未指定，默認(rèn)為當(dāng)前目錄。所有參數(shù)都是可選的：
- --ignore-bin-package=[true|false]：表示 depcheck 是否忽略包含 bin 入口的包。默認(rèn)值為 false。
- --skip-missing=[true|false]：表示 depcheck 是否跳過(guò)計(jì)算缺失的依賴項(xiàng)。默認(rèn)值為 false。
- --json：以 JSON 格式輸出結(jié)果。當(dāng)未指定時(shí)，depcheck 會(huì)以友好的格式輸出。
- --oneline：將結(jié)果作為用空格分隔的字符串輸出。用于復(fù)制/粘貼很有用。
- --ignores：一個(gè)由逗號(hào)分隔的數(shù)組，包含要忽略的包名稱。它可以是 glob 表達(dá)式。例如，--ignores="eslint,babel-*"。
- --ignore-dirs：已過(guò)時(shí)，請(qǐng)改用 ignore-patterns。一個(gè)由逗號(hào)分隔的數(shù)組，包含要忽略的目錄名稱。例如，--ignore-dirs=dist,coverage。
- --ignore-path：指定包含描述要忽略的文件的模式的文件的路徑。文件必須符合 .gitignore 規(guī)范。例如，--ignore-path=.eslintignore。
- --ignore-patterns：用逗號(hào)分隔的描述要忽略的文件的模式。模式必須符合 .gitignore 規(guī)范。例如，--ignore-patterns=build/Release,dist,coverage,*.log。
- --help：顯示幫助信息。
- --parsers、--detectors 和 --specials：這些參數(shù)用于高級(jí)用途。它們提供了一種易于定制文件解析器和依賴項(xiàng)檢測(cè)的方法。。
- --cnotallow=[文件名]：一個(gè)外部配置文件（見下文）。
例如，想忽略某些包或文件夾，可以在命令后面添加相應(yīng)的選項(xiàng)：
depcheck --ignores="eslint" --ignore-dirs="dist"
除此之外，我們還可以在項(xiàng)目中增加 depcheck 的配置文件來(lái)配置要忽略解析的文件、要解析的文件、要忽略的包等，可以查看官方的文檔來(lái)進(jìn)行配置。
Github：https://github.com/depcheck/depcheck
npm-check
npm-check 用于檢查項(xiàng)目中的依賴項(xiàng)，并提供有關(guān)過(guò)期，未使用和缺少依賴項(xiàng)的信息。npm-check 是基于 depcheck 實(shí)現(xiàn)的。它可以提示項(xiàng)目依賴項(xiàng)的狀態(tài)，但它只會(huì)檢查并更新項(xiàng)目的直接依賴項(xiàng)，并不會(huì)檢查和更新嵌套的依賴項(xiàng)（即項(xiàng)目的依賴項(xiàng)的依賴項(xiàng)）
npm-check 具有以下特性：
- 告訴哪些內(nèi)容已經(jīng)過(guò)期。
- 提供包的文檔鏈接，以便決定是否要更新。
- 提醒代碼中沒(méi)有使用某個(gè)依賴項(xiàng)。
- 通過(guò) -g 支持全局安裝的包。
- 通過(guò) -u 提供交互式更新，減少輸入和拼寫錯(cuò)誤。
- 支持公有和私有的 @scoped/packages。
- 支持 ES6 風(fēng)格的 import from 語(yǔ)法。
- 使用安裝的版本的 npm 進(jìn)行模塊升級(jí)，包括新的 npm@3，以確保依賴項(xiàng)到達(dá)預(yù)期的位置。
- 適用于任何公共的 npm 注冊(cè)表、私有注冊(cè)表以及類似 Sinopia 的備用注冊(cè)表。
- 在 package.json 中設(shè)置 private: true 的包不會(huì)在注冊(cè)表中查詢。
- 為命令行應(yīng)用添加了表情符號(hào)。
- 適用于 npm@2 和 npm@3，以及一些新的替代安裝程序，例如 ied 和 pnpm。
可以在終端中通過(guò)以下命令來(lái)安裝 npm-check（需要確保 node.js 的版本大于等于 10.9.0）：
npm install -g npm-check
安裝時(shí)同樣遇到了權(quán)限的問(wèn)題，這里也使用管理員權(quán)限來(lái)安裝：
sudo npm install -g npm-check
接下來(lái)就可以執(zhí)行以下命令來(lái)檢測(cè)項(xiàng)目的 npm 包：
npm-check
執(zhí)行完之后，就可以看到類似的結(jié)果：
這里面會(huì)詳細(xì)介紹每個(gè) npm 的情況，可以根據(jù)實(shí)際情況進(jìn)行分析。
npm-check 的基本語(yǔ)法如下：
npm-check
其中 path 是要檢查的路徑。默認(rèn)為當(dāng)前目錄。可以使用 -g 檢查全局模塊。
除此之外，還有以下選項(xiàng)：
- -u, --update 交互式更新。
- -y, --update-all 非交互式更新。無(wú)需提示即應(yīng)用所有更新。
- -g, --global 查看全局模塊。
- -s, --skip-unused 跳過(guò)未使用的軟件包檢查。
- -p, --production 跳過(guò) devDependencies。
- -d, --dev-only 僅查看 devDependencies（跳過(guò) dependencies）。
- -i, --ignore 根據(jù)成功的 glob 忽略依賴項(xiàng)。
- -E, --save-exact 在 package.json 中保存精確版本（x.y.z），而不是 caret (^x.y.z)。
- --specials depcheck 特殊功能列表，用于檢查未使用的依賴項(xiàng)。
- --no-color 強(qiáng)制啟用或禁用顏色輸出。
- --no-emoji 去除表情符號(hào)支持。CI 環(huán)境默認(rèn)沒(méi)有表情符號(hào)。
- --debug 顯示調(diào)試輸出，報(bào)告 github 上的問(wèn)題時(shí)，請(qǐng)?zhí)砑拥?gist 中。
除此之外，npm-check 也像 depcheck 一樣，支持在項(xiàng)目根目錄添加配置文件來(lái)進(jìn)行配置，可以查看官方的文檔來(lái)進(jìn)行配置。
Github：https://github.com/dylang/npm-check
網(wǎng)頁(yè)題目：如何檢查前端項(xiàng)目中未使用的依賴包？
轉(zhuǎn)載來(lái)源：http://www.5511xx.com/article/dpsedse.html
