不断的迭代更新，项目中不可避免的会出现一些重复的代码，这可能是CTRL C + CTRL V造成的，也有可能是因为不同的项目成员重复造轮子造成的。为了保证项目代码的质量，应尽早对项目进行代码重复率的管控。
一般的重复代码有一下几类：
完全一致的代码或者只修改了空格和评论结构上和句法上一致的代码，例如只是修改了变量名插入和删除了部分代码功能和逻辑上一致的代码，语义上的拷贝
在技术上，重复代码检测主要有以下分类：
基于代码行的基于标识符（token）的基于度量（metrics）的基于抽象语法树（Abstract Syntax Tree）的基于程序依赖图（Program Dependence Graph）的
由于前端源代码文件格式多样，重复率检测除了源码检测以外，还可以从检测打包文件和文件退化角度考虑。
检测前端代码重复率的工具有jsinspect**、jscpd**，PMD-CPD（PMD’s Copy/Paste Detector）中也支持js文件的重复率检测。
jsinspect工具支持js和jsx格式的文件，基于抽象语法树，可以检测出结构类似的代码块jscpd工具支持文件格式广泛，如java、oc、js、jsx、vue、ts、less等。其重复率判定依据为一定长度标识符的MD5值是否相同PMD-CPD工具支持js文件检测，也可以自己开发扩展包来解析指定的语言：官方介绍**
每个工具各有其优缺点，若只需要检测js或jsx文件，且对检测结果要求较高，可以选择jsinspect或者PMD-CPD工具，若考虑检测工具的通用性，可以选择jscpc工具。
经过分析：
检测打包文件方案，若有多个打包文件，无法区分跨文件的重复代码是源代码重复还是由于打包生成的，因此不太适合。文件退化方案，jsx文件转换成js文件可以进行检测，但vue或less等包含css的文件格式无法检测。退化成纯文本的检测工具有商业收费的simian。
jsinspect
/danielstjules/jsinspect
jsinspect 利用 babylon 对于 JavaScript 或者 JSX 代码构建 AST 语法树，根据不同的 AST 节点类型，譬如 BlockStatement、VariableDeclaration、ObjectExpression 等标记相似结构的代码块。同时还可以自由指定一个阈值，以确定要分析的最小节点子集。
用法：
安装：npm install -g jsinspect
用法：jsinspect [options] <paths ...>
示例：jsinspect -I -L -t 20 --ignore "test" ./path/to/src
意思是检查 ./path/to/src 路径下文件-I不匹配标识符-L不匹配文字-t 20匹配大于20个字节的代码 忽略test文件
Options:-h, --helpoutput usage information 输出使用信息-V, --version output the version number 输出版本号-t, --threshold <number> number of nodes (default: 30) 检查字节阀值（默认是30个字节）-m, --min-instances <number> min instances for a match (default: 2) 匹配的最小实例（默认2个字节）-c, --config [config] path to config file (default: .jsinspectrc) 配置文件路径-r, --reporter [default|json|pmd] specify the reporter to use 指定类型使用-I, --no-identifiersdo not match identifiers 不匹配标识符-L, --no-literals do not match literals 不匹配文字-C, --no-color disable colors 禁用颜色--ignore <pattern> ignore paths matching a regex 忽略与正则表达式匹配的路径--truncate <number>length to truncate lines (default: 100, off: 0) 截线长度--debug print debug information 打印调试信息
缺点
仅支持.jsx、.js文件类型（可以把源码下下来改一下loader）；库从后作者不再更新维护展示的结果很不友好
jscpd
/kucherenko/jscpd
jscpd工具可以在本地使用，也可以集成在gulp中。
jscpd采用Rabin-Karp算法,能够在150多种编程语言中检测重复代码。
Rabin-Karp算法，它是字符串快速查找的一种算法，解决思路是把一个字符串，看作是字符集长度进制的树，如果是ASCII，这个进制就是128，如果是只考虑英文小写字母，那这个进制就是26，通过数值的比较得出字符串的比较结果。
用法
安装：npm install -g jscpd
用法：jscpd /path/to/codeorjscpd --pattern "src/**/*.js"
npx jscpd --pattern"src/**/*.js"
配置参数：
--min-tokens, -k：代码的最小块大小。小于的代码块min-tokens将被跳过,默认为50；
--min-lines，-l：最小代码行数，默认为5；
--max-lines, -x: 最大代码行数，默认为1000；
--max-size, -z:最大文件大小，单位为kb，默认100；
--threshold, -t:重复级别的阈值，当项目重复级别大于该阈值时报错退出，默认为空；
--ignore，-i:忽略的文件类型；
--reporters，-r：输出类型
所有配置参数也可以直接在终端命令行中以参数形式附加。
console -报告要克隆的克隆；consoleFull-报告有关要克隆的克隆的代码块；json-jscpd-report.json具有克隆报告的输出文件为json格式；xml-jscpd-report.xml带有xml格式的克隆报告的输出文件；csv-jscpd-report.csv具有csv格式的克隆报告的输出文件；markdown-输出jscpd-report.md文件，其克隆报告为markdown格式；html-生成html报告到html/文件夹；verbose -向控制台输出大量调试信息；
--output, -o:报告目录的路径。JSON和XML报告将保存在此处;
--mode，-m:检测质量的模式；strict -使用所有类型的符号作为标记，仅跳过标记为已忽略的块。mild -跳过标记为已忽略的块以及新行和空符号。weak -跳过标记为已忽略的块以及新行以及空符号和注释。
也可以把.jscpd.json文件放到项目根目录中:
{"threshold": 0,"reporters": ["html", "console", "badge"],"ignore": ["**/__snapshots__/**"],"absolute": true}
在项目目录配置.cpd.yaml文件，配置参考**
#.cpd.yamllanguages:- javascript- typescript- jsx- vue- cssfiles:- 'src/**'- 'less/**'exclude:- 'dist/**'- 'dest/**'- 'neurons/**'- 'node_modules/**'- 'test/**'- 'data/**'- 'css/**'- 'entries/**'reporter: xmlxsl-href: 'simple.xsl'//模板limit: 100min-tokens: 70min-lines: 5output: 'reports.xml'
注意：less文件，language参数值应设为cssfiles 检查的文件范围，默认全部exclude 检查忽略的文件，默认无min-tokens 重复最小token，默认70min-lines 重复最小行数，默认5output 输出报告文件地址，默认空，可不输出文件
其中languages值对应的文件后缀如下：
TokenizerFactory.prototype.LANGUAGES = {javascript: ['js', 'es', 'es6'],typescript: ['ts', 'tsx'],jsx: ['jsx'],haxe: ['hx', 'hxml'],coffeescript: ['coffee'],ruby: ['rb'],php: ['php', 'phtml'],python: ['py'],css: ['less', 'css'],sass: ['scss'],java: ['java'],csharp: ['cs'],go: ['go'],clike: ['cpp', 'c', 'm', 'h'],htmlmixed: ['html', 'htm'],yaml: ['yaml', 'yml'],erlang: ['erl', 'erlang'],swift: ['swift'],xml: ['xml', 'xsl', 'xslt'],puppet: ['pp', 'puppet'],twig: ['twig'],vue: ['vue']};
输出文件：
jscpd支持输出xml和json两种格式的报告文件，为了便于查看重复代码块，建议输出xml格式文件，配置xsl模板后在浏览器中具有较高的可读性。
首页：
重复代码块：
gulp集成
npm install gulp-jscpd
在gulp.js中添加以下任务，配置参考**
var jscpd = require('gulp-jscpd');gulp.task('jscpd', function() {return gulp.src([path.join(__dirname, 'src/**'), path.join(__dirname, 'less/**')]).pipe(jscpd({'min-lines' : 5,'min-tokens': 70,reporter : 'xml',languages : ['javascript', 'jsx', 'css'],output: 'report.xml',verbose: false,debug : false,silent: false,failOnError : false,'xsl-href' : 'report.xls'}));});
值得注意的是，failOnError配置项指定检查完毕后是否抛出错误，默认true，会终止打包流程。在CI中，若不希望重复率检查停止正常打包，应指定为false。
为了适应多种前端代码文件，本团队目前选择jscpd作为前端代码重复率检测工具。对于重复率要求较严格的项目，可以使用jsinspect针对js(x)文件进行进一步检测。
