npm pnpm yarn

114 阅读4分钟

前言

大家好,我是不太懂技术的阿康,作为开发人员,我们的项目在很大部分上是需要使用到别人的插件的。比如前端开发人员常见的elemetui,我们可以到指定的官网去进行下载,然后进行使用,当一个网站依赖的代码越来越多,我们会发现这是一件很麻烦的事情:

去 jQuery 官网下载 jQuery

去 BootStrap 官网下载 BootStrap

去 AntdesignUI 官网下载 AntdesignUI

那么这就是有点麻烦了,所以有个程序员:Isaac Z. Schlueter,他使用js编写了npm(全称:Node Package Manager)

具体步骤

NPM 的思路大概是这样的:

买个服务器作为代码仓库(registry),在里面放所有需要被共享的代码

发邮件通知 jQuery、Bootstrap、Underscore 作者使用 npm publish 把代码提交到 registry 上,分别取名 jquery、bootstrap 和 underscore(注意大小写)

社区里的其他人如果想使用这些代码,就把 jquery、bootstrap 和 underscore 写到 package.json 里,然后运行 npm install ,npm 就会帮他们下载代码,这样就方便多了。

pnpm 和yarn

首先我们看下npm和yarn的发展历程:

npm :从2010年开始到现在2022年,一共大的更新是八个版本,现在的最新版本是8.19.1;

yarn :大公司就是有钱啊,facebook在2016年发布了自己的包管理工具,yarn当时主要是解决了两个问题:

安装速度:npm是依次安装每个包,当一个完成后才会去完成下一个,而yarn是同步的执行所有任务,这样就会提升安装的速度。

版本统一:yarn在下载时新增了一个yarn.lock,用来保证每次下载是不会因为更新导致代码的运行出现问题,不过npm也增加了package-lock.json解决了这一问题。

pnpm :17年pnpm出现了(全称:Performance npm),相较于npm 和yarn那就是提升了很多了,pnpm最显著的特点就是:速度快,节约空间、安全性高。

速度快:从下面这张图中你可以很明显的看出,pnpm就是相对的快很多。

4d54cac194554bf2bbac75c67c1dff83_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

节约空间: pnpm 内部使用 基于内容寻址 的文件系统来存储磁盘上所有的文件,这个文件系统出色的地方在于:

  • 不会重复安装同一个包。用 npm/yarn 的时候,如果 100 个项目都依赖 lodash,那么 lodash 很可能就被安装了 100 次,磁盘中就有 100 个地方写入了这部分代码。但在使用 pnpm 只会安装一次,磁盘中只有一个地方写入,后面再次使用都会直接使用 hardlink
  • 即使一个包的不同版本,pnpm 也会极大程度地复用之前版本的代码。举个例子,比如 lodash 有 100 个文件,更新版本之后多了一个文件,那么磁盘当中并不会重新写入 101 个文件,而是保留原来的 100 个文件的 hardlink ,仅仅写入那 一个新增的文件 。

安全性高: 之前在使用 npm/yarn 的时候,由于 node_module 的扁平结构,如果 A 依赖 B, B 依赖 C,那么 A 当中是可以直接使用 C 的,但问题是 A 当中并没有声明 C 这个依赖。因此会出现这种非法访问的情况。但 pnpm 自创了一套依赖管理方式,很好地解决了这个问题,保证了其安全性。

yarn npm pnpm 的一些常见的基本操作:

npmyarnpnpm
安装npm installyarnpnpm install
安装插件包npm install 包名yarn add 包名pnpm ada 包名
卸载插件包npm uninstall 包名yarn remove 包名pnpm remove 包名
更新npm update 包名yarn upgrade 包名pnpm update 包名

更换镜像源:

有一些公司使用的是内网开发,所以他们不能直接访问外部的库,所以需要走公司的地址去进行一个访问,还有就是一些比较不常见的国外插件他下载的比较慢,访问速度贼慢。

查看镜像源:

pnpm config get registry

更黄镜像源(淘宝为例):

pnpm config set registry http://registry.npm.taobao.org

写的不是很好,最后附上引用地址:

3. https://wenku.baidu.com/view/f9ade20da6e9856a561252d380eb6294dd8822ec.html
4. https://blog.csdn.net/snowball_li/article/details/124787870
5. https://www.sohu.com/a/453682438_463987