用 Depcheck 去除vue 项目没有用到的依赖

前言

目前开源项目刚准备上线，发现很多依赖未使用，但是在 package.json 中有定义，因此需要清理一下。这里记录一下排查过程

安装 Depcheck

PS E:\work\iedaworkspace\project\web\bpm-web> npm install depcheck -g
C:\Program Files\nodejs\node_global\depcheck -> C:\Program Files\nodejs\node_global\node_modules\depcheck\bin\depcheck.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules\depcheck\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN @vue/compiler-sfc@3.0.7 requires a peer of vue@3.0.7 but none is installed. You must install peer dependencies yourself.

+ depcheck@1.4.0
updated 1 package in 17.14s

使用 Depcheck

错误使用方式

PS E:\work\iedaworkspace\project\web\bpm-web> depcheck
depcheck : 无法将“depcheck”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
所在位置 行:1 字符: 1
+ depcheck
+ ~~~~~~~~
    + CategoryInfo          : ObjectNotFound: (depcheck:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

正确使用方式

1. 找到 node_global,因为刚刚是全局安装

2. 使用cmd 打开步骤一目录

使用命令

 .\depcheck + "projectPath"

“projectPath” 指的时前端项目 package.json 同级目录

PS C:\Program Files\nodejs\node_global> .\depcheck  E:\work\iedaworkspace\project\web\bpm-web
Unused dependencies
* babel-polyfill
* bpmnlint
* bpmnlint-loader
* bpmnlint-plugin-easy-bpm
* css-loader
* csvjson-json_beautifier
* diagram-js-direct-editing
* diagram-js-minimap
* eslint-plugin-bpmn-io
* eslint-plugin-import
* eslint-plugin-prettier
* html-webpack-plugin
* less
* less-loader
* moddle
* moment
* node-sass
* prettier
* sass
* sass-loader
* saxen
* script-ext-html-webpack-plugin
* script-loader
* sortablejs
* style-loader
* stylus-loader
* svg-sprite-loader
* transform-runtime
* v-jsoneditor
Unused devDependencies
* @vue/cli-plugin-babel
* @vue/cli-plugin-eslint
* @vue/cli-plugin-unit-jest
* @vue/eslint-config-prettier
Missing dependencies
* clearfix: .\src\styles\mixin.scss
* scrollBar: .\src\styles\mixin.scss
* relative: .\src\styles\mixin.scss
* quill: .\src\components\QuillEditor\index.vue
* min-dom: .\src\components\minimap\index.js
* tiny-svg: .\src\components\minimap\index.js
* min-dash: .\src\components\minimap\index.js
* css.escape: .\src\components\minimap\index.js
* codemirror: .\src\components\GeneratorCodemirror\index.vue
* @babel/polyfill: .\src\components\elementFormDesign\index.js
* lodash: .\src\components\DiagramManager\props\CallActivityProps.vue
* uuid: .\src\components\DiagramManager\props\SequenceFlowProps.vue
* inherits: .\src\components\custom-modeler\index.js
* chokidar: .\mock\mock-server.js
* body-parser: .\mock\mock-server.js

3. 根据步骤二提示 移除相应依赖 （步骤二结果可能不准，仅供参考移除时一定要小心）

PS E:\work\iedaworkspace\project\web\bpm-web> npm uninstall postcss-pxtorem px2rem-loader
npm WARN stylus-loader@3.0.2 requires a peer of stylus@>=0.52.4 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\sane\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

removed 15 packages and audited 1950 packages in 8.114s
found 85 vulnerabilities (72 low, 7 moderate, 6 high)
  run `npm audit fix` to fix them, or `npm audit` for details

参考文档

depcheck : depcheck.