溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“jscpd統計項目中的代碼怎么重復使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“jscpd統計項目中的代碼怎么重復使用”吧!
jscpd是一個開源的js工具庫，用于檢測項目的代碼重復率，針對復制粘貼的代碼尤其有效，支持超過150種的源碼文件格式。
我們在前端項目中，無論是原生的javascript、css、html代碼，還是使用typescript、less、vue、react等代碼，都能較好的識別出項目中的重復代碼。
當然，這里的重復，更多的指代碼完全重復，即代碼行與代碼字符串，都相同。
下面，先看下如何使用它。
我們先以全局方式，安裝該工具庫：
npm install jscpd -g
安裝成功后，系統就有一個全局命令 jscpd，可以查看版本號，當前最新版本是 3.5.3，如下所示：
$ jscpd -V 3.5.3
安裝成功后，我們就可以很方便的使用它。
例如，我們需要統計一個文件 app.js，只需要在文件目錄執行以下命令：
jscpd ./app.js
執行成功后，在命令行界面會顯示結果，如下圖所示：
圖中的內容，我們下面一一做個說明說明：
Clone found (javascript)顯示找到的拷貝的重復代碼塊，這里是javascript文件。
并且會顯示重復代碼在文件中具體的行數，便于查找。
HTML report saved to report\html\這句話的意思是，會在文件目錄下輸出對應報告的html頁面，一般默認是 report\html\ 目錄下，用于在頁面中展示結果。
Format文件格式，這里是 javascript，還可以是 typescript、tsx 等。
Files analyzed已分析的文件數量，統計項目中的代碼文件數。
Total lines所有文件的總行數。
這里只有一個文件，總行數是105行。
Total tokens所有的token數量。
這里一般以 標識符/變量等、數字、字符串、空格 或 符號 等等作為一個 token 來統計數量。
一行代碼一般包含幾個到幾十個不等的token數量。
Clones found找到拷貝的重復塊數量。
Duplicated lines重復的代碼行數，以及占比。
在表格的 Total 行里，重復代碼的占比就是代碼行的重復度了，這里是18.1%。
Duplicated tokens重復的token數量，以及占比。
Found 0 clones找到了1個重復塊。
Detection time檢測耗時。
由此可知，./app.js 檢測1個文件，發現了1個重復快，在總行數為105行的代碼中，共有19行代碼完全重復，重復度為 18.1%。
以上示例是比較簡單的，直接檢測單個文件，通過命令行檢測單個文件，打印結果，并默認生成report報告的頁面。
如果是在當前主流的前端項目中，由于很多文件是輔助工具如依賴包、構建、文檔等，并不是有效的代碼，需要排除。這種情況下，我們一般使用配置文件的方式，通過選項配置規范 jscpd 的使用場景。
jscpd 的配置選項可以通過以下兩種方式創建：
在項目根目錄下創建配置文件 .jscpd.json，然后在該文件中增加具體的配置選項；
也可以直接在 package.json 文件中添加
如果項目根目錄下沒有 package.json 文件，可以自行添加一個，然后在該件中個增加對應的配置。
無論是Vue還是React項目，使用大致都一樣，如下，在 package.json 中增加 jscpd 配置屬性：
"jscpd": {
"threshold": 1,
"reporters": [
"html",
"console"
],
"ignore": [
".git",
"node_modules",
"public",
".husky"
],
"format": ["javascript", "typescript"],
"absolute": true
}以上是一個常用的配置，具體說明：
threshold 表示重復度的閾值，超過這個值，就會打印錯誤報警。
如閾值設為 1，當重復度為18.1%時，會報錯：ERROR: jscpd found too many duplicates (18.1%) over threshold (1%)。
雖然報錯，但代碼的檢測仍然會正常完成。
reporters 表示生成結果檢測報告的方式，一般有以下幾種：
console：控制臺打印
html：創建可訪問的 html 頁面
json：輸出 json 格式的文件報告
xml：輸出 xml 格式的文件報告
csv：輸出 csv 格式的文件報告
markdown：輸出 md 格式的文件報告
consoleFull：控制臺完整打印重復代碼塊
verbose：控制臺輸出 debug 信息
ignore
檢測時會忽略的文件目錄或文件，用于過濾一些非業務代碼，如依賴包、構建或靜態文件等
format
需要進行重復度檢測的源代碼格式，目前支持150多種，我們常用的如 javascript、typescript、css 等
absolute
在檢測報告中使用絕對路徑
除此以外，還有很多配置屬性，我們這里不在一一介紹。
上面介紹會輸出重復度檢測報告，我們在項目中設置好配置文件以后，執行以下命令：
jscpd ./src -o 'report'
項目中的業務代碼，通常會選擇放在 ./src 目錄下，所以我們可以直接檢測該目錄。-o 'report' 通過命令行參數，輸出檢測報告到項目根目錄下的 report 文件夾中——當然也可以自定義目錄，這時候就會生成對應的頁面文件：
如上所示，本質上是一個本地網頁，而且是基于 VUE 框架創建的網頁，可以在瀏覽器訪問查看，界面長這樣：
從上圖可知，檢測了149個文件，其中存在8塊拷貝復制的代碼，代碼行計算的重復度是 1.18%，非常直觀。
通過生成本地網頁直接展示所有的檢測報告，并且還能查看到重復的代碼在哪：
上圖可以看到，在兩個 tsx 組件文件中，存在一段重復的代碼，也標識除了這兩段代碼在文件中具體行數。
上面介紹的是單個項目的重復度檢測，如果有多個項目，且存在代碼的復制粘貼現象，也可以通過jscpd工具進行檢測處理。
我們只需要在多個項目的上層目錄下新建一個 package.json 文件，設置相應的配置選項，就能根據設置檢測這些項目間的重復代碼。這里需要注意的是，一般只需要檢測業務代碼 src，在配置文件中 ignore 屬性的忽略目錄，需要帶上各項目的項目名稱。
"ignore": [ "project1/.git", "project1/node_modules", "project2/.git", "project2/node_modules" // ... ]
這樣，就能快速檢測出多個項目中的重復代碼，仍然可在命令行輸出基本信息，以及對應的report頁面報告。
當我們使用jscpd執行項目的重復度檢測時，由于一些重復代碼可能是必要的，不想檢測，可以使用代碼注釋標識的方式，讓這部分代碼不用檢測。
在代碼的首尾位置添加相應注釋，jscpd:ignore-start 和 jscpd:ignore-end，包裹代碼即可。
如在js代碼中，可以這樣使用：
/* jscpd:ignore-start */
import { provide, computed, watch, onMounted, defineComponent } from 'vue'
import { useStore } from 'vuex'
/* jscpd:ignore-end */在css及各種預處理中，也是與js中的用法一樣：
/* jscpd:ignore-start */
.content {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* jscpd:ignore-end */如下在html中的使用：
<!-- // jscpd:ignore-start --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!-- // jscpd:ignore-end -->
通過以上注釋標識以后，這部分的代碼就不會再被統計為重復代碼了。
到此，相信大家對“jscpd統計項目中的代碼怎么重復使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
