解决前端项目中npm包管理的常见问题
2024-12-09 11:13:16

最近新入职了新公司,然后要走熟悉的流程,安装npm包,启动项目。

只是,公司有些项目版本实在太老,且最近似乎又有新项目升级项目的考量,所以项目的包管理肯定是个问题。

所以,这里整合一些常见的命令,用来处理有问题的地方。

正文

本篇文档主要是整理一些我在开发过程中常常遇到的npm问题,过程中顺便分享一些自己的理解和心得。

本文主要面对刚上路的前端新手,如果高手路过,还请评论区轻喷并指导一二。

node环境管理

如果你的手里有数个周期达到3年以上的老项目需要维护,那么大抵会有一些包只有低版本的node环境才能适配。

早些年有人会用nvm来进行版本管理,但是新生代的有了很多平替产品,个人推荐volta,当然也有朋友推荐fnm。

这两者都是新生代的产品,随便选哪个都好,相对于nvm,volta和fnm的操作更简单方便。

npm与pnpm

虽然我依然还在使用npm,但那是因为低版本项目不支持pnpm,如果你手里的项目平均超过18,可以尝试使用pnpm。

pnpm比起npm更能节约空间,大多数开发者手里的电脑都是1T容量的开发本,这种容量基本上遇到几个黑洞项目容量就开始捉襟见肘。

如果你需要再本地跑一些后端项目,再加上一些大型的文档,或者是一些设计图什么的,很难说自己的电脑那1T的可怜容量是否能够保证。

而pnpm可以把各个项目中的相同包放在一个地方管理,通过软连接的形式,各个项目包就只要下载一次即可。

比起传统的npm,这种方式更节省磁盘,也更节省下载时间。

npm相关操作

这里的常规操作,如果不清楚,各个推荐使用gpt或者其他AI来在线去问。

现在AI对于这种通用的操作的解释准确度,很多时候甚至比人整理的文档更准。

切换镜像

很多开发中,会遇到下载依赖包迟迟下载不下来的问题,这个问题估计新手会很懵。

其实,只要冲浪强度稍微高一点的朋友,大概都猜到是国内网络环境的问题了,只要遇到类似于环境配置下载的问题,大概都是网络问题。

目前能解决的方案,一种是翻墙,另一种就是常见的切换镜像下载了。

而npm的包下载问题,常用的就是切换镜像下载。

镜像是什么?

前面我们说了,国内因为环境特殊的问题,往往会遇到环境配置难搞的问题。

而国内的大公司为了下载方便,于是就做了一个服务器用来同步这些主流的环境和包。

比如,淘宝镜像环境往往每隔10分钟同步一次外网的npm库,将npm线上的包同步到国内的服务器,便于开发者下载。

因为这些内容是同步npm库的东西,像镜子一样,于是这种服务器就被称作镜像。

要在npm中切换镜像源,你可以使用npm config set registry命令来设置你想要的npm注册表镜像。

以下是一些常用的npm镜像源以及如何切换到它们的示例操作。

使用淘宝镜像
1
2
npm config set registry https://registry.npm.taobao.org
pnpm config set registry https://registry.npmmirror.com
切换回官方npm镜像
1
2
npm config set registry https://registry.npmjs.org
pnpm config set registry https://registry.npmjs.org
查看当前配置的镜像
1
2
npm config get registry
pnpm config get registry
.npmrc文件配置

(位于用户的主目录,负责管理npm包安装的一些偏好),添加或修改下面的行

1
registry=https://registry.npm.taobao.org

以上这些命令可以在命令行中直接运行,无需进入项目目录。

运行这些命令后,你将使用指定的镜像源来安装npm包。

切换镜像类的命令,pnpmnpm是通用的。

包安装及查看

1
2
3
4
5
6
npm install 包 -g //全局安装
npm install 包 -s -d //安装到devDependencies
npm install mockjs@1.0.0 //安装指定版本的包

包 -v //检查版本
npm root //查看包的安装路径

包卸载

有些时候,我们卸载包重装,会遇到一些奇怪的问题。

我们可以先卸载包,然后再清除npm本地缓存,再安装,效果会好很多。

1
2
3
npm uninstall 包   // 卸载
npm cache clean // 清除npm本地缓存
npm update // 更新模块

结语

本来一开始只是想简单记录一些npm的相关操作,后来想了想,反正做都做了,干脆索性做个新手级的科普文档。

为了做这期文档,特意去了解了很多东西,没想到这次简单的整理让我了解了不少npm的相关知识。

不过,本篇文档是主要还是以整理工作中常用问题为主,所以对于太过基本的问题就不去科普了,推荐看我参考整理的几篇参考文档。

他们对npm的解释较为深刻,如果你有时间将这些看完,对于npm包管理这块,应该会有一个较为深刻的理解。

参考

彻底了解npm——架构、进化史及原理解析