如何使用depcheck检查依赖?

简介: 如何使用depcheck检查依赖?

1. 你是否遇到过以下问题:


1. GitHub上面克隆的项目,运行报错…

2.去一家新公司,用新电脑运行项目各种报错…

3.明明这个项目在公司电脑上运行正常,用我自己的电脑运行就各种错误,运行不起来?

4.项目在别人哪里运行的好好地,拿到自己这边就跑不起来了…

5.…

2. 原因


不能说绝对,但是90%以上的原因是依赖问题,或者版本、环境问题。

犹记得当年老师跟我们说,以后去了公司,遇到的第一个困难可能是,一周运行不起来项目…

3. 解决


下面隆重介绍猪脚 depcheck 插件 ,运用得当的话可以帮我们节省很多不必要的时间。

3.1 在项目中安装


1. npm install -g depcheck 最好是在cmd窗口安装
2. 或
3. yarn add depcheck

3.2  运行命令


depcheck

3.3 先看missing devDependencies


看下面这个示例图,说明你还有lodash插件没下载。解释下原因哈,一般咱们运行项目前会先运行npm install下载依赖,他会按照package.json(包括package-lock.json)里面的文件下载,但是有的依赖可能没有写在这个文件里,所以就没下载这个依赖,很狗血的是大部分情况下它不会提示你lodash没下载,而是报一些乱七八糟的错误。

ps:现在下载depcheck插件默认还会显示,缺失的依赖在哪些文件里用到了,非常人性化了。

image.png

3.4 安装缺失的依赖


如上面缺失lodash插件,我们可以npm i  lodash  然后再重新运行下项目,看看是否可以运行了。

4. depcheck的其他功能


到此为止,depcheck的核心功能介绍完毕,然而,他还有一些其他的功能,是优化方面的,他还可以检查出哪些依赖我们没有用到过(就是你的package.json里面写了,但是项目没用过),我们可以把这些多余的插件去除掉(不要直接删除packsge.json里面的,应当使用npm uninstall XXX),这个实用性还是很高的,推荐。

image.png

image.png

5.需要说明可能存在的问题

其实有些插件我们是需要的,但是他会提示我们说是多余的,比如说less 、vue-cli等  我们可以新建一个文件 depcheckrc 里面写 ignorse:["@vue/cli-plugin-babel"]这种形式

总结:


最推荐的功能还是依赖检查,Missing 表示使用到了但是没有在 json 文件中声明的依赖包,我们可以安装缺失的依赖,然后重新运行项目。

其次是,Unused 表示没有使用的依赖包,我们可以使用npm uninstall 去卸载,减少项目体积,是项目优化的一种手段。

相关文章
|
JavaScript
js中数组reduce的使用原来这么简单
js中数组reduce的使用原来这么简单
|
11月前
|
JavaScript 前端开发 容器
粘性定位Position:sticky已死?
粘性定位(`sticky`)是CSS3新增的一种定位方式,结合了相对定位(`relative`)和固定定位(`fixed`)的特点。当页面滚动时,元素在跨越特定阈值前表现为相对定位,之后则固定在指定位置。它常用于导航菜单等需要吸附效果的场景。 **特点:** - 需配合`top`、`right`、`bottom`或`left`属性使用。 - 相对于父元素定位,而非整个视窗(与`fixed`区别)。 - 兼容性:低版本浏览器可能不支持。 通过案例可见,`sticky`可简化以往需JS实现的效果,但实际应用需考虑浏览器兼容性问题。
341 6
粘性定位Position:sticky已死?
|
JSON 前端开发 JavaScript
如何检查前端项目中未使用的依赖包?
如何检查前端项目中未使用的依赖包?
804 0
|
开发者
Eslint插件使用配置, 规范化开发, 详细配置流程
Eslint插件使用配置, 规范化开发, 详细配置流程
|
JavaScript
Vue找到package.json中没有用到依赖并删除
Vue找到package.json中没有用到依赖并删除
1323 55
|
存储 缓存 程序员
C++ 文件读写:探索 ofstream, ifstream 和 fstream 的奥秘
C++ 文件读写:探索 ofstream, ifstream 和 fstream 的奥秘
1561 0
|
存储 前端开发 JavaScript
JavaScript学习 -- AES加密算法
JavaScript学习 -- AES加密算法
864 0
|
缓存 前端开发 JavaScript
HTTP协议的缓存策略有哪些?
HTTP协议的缓存策略有哪些?
372 0
|
前端开发 JavaScript Go
前端开发规范
前端开发规范
12499 3
|
算法 容器
Flutter 弹性布局的基石: flex 和 flexible
Flutter 弹性布局的基石: flex 和 flexible
779 0
Flutter 弹性布局的基石: flex 和 flexible

热门文章

最新文章