一篇文章让你搞懂npm、cnpm、yarn

如果你是前端开发者,或多或少都会接触过一种或多种包管理工具。

一篇文章让你搞懂主流包管理工具npm、cnpm、yarn

今天我们讲下目前主流的npm、cnpm、yarn分别是什么、怎么用、有什么区别?

不过再讲之前我还是要啰嗦一下,因为上面说的几种工具你在网上随便查下就一大堆,对于小白来讲,可能更想知道是的为什么要用包管理工具。

在node未出世之前,比如jquery时代,我们做项目的时候想引用第三方插件怎么做,一般都是把插件下载后用script标签引用对吧。

<script src="插件包"></script>

如果引用的插件很多也是件很头疼的事情。最头疼的可能就是这位名叫Isaac Z. Schlueter(npm创始人)的程序员了,他实在受不了于是提出一个方案:“用一个工具把这些代码集中到一起来管理吧!”

于是npm问世了,全称是 Node Package Manager。现在新版本的Node都集成了npm,直接使用就可以了。

好了,废话不多说开始正题吧!

NPM

npm (node package manager)是 JavaScript 世界的包管理工具,是 Node.js 平台的默认包管理工具,是前端模块化下的一个标志性产物,简单地说,就是通过npm下载模块,复用已有的代码,提高工作效率。

下面是关于 npm 的快速介绍:

npm 由三个独立的部分组成:网站注册表(registry)命令行工具 (CLI)

网站 是开发者查找包(package)、设置参数以及管理 npm 使用体验的主要途径。

注册表 是一个巨大的数据库,保存了每个包(package)的信息。

CLI 通过命令行或终端运行。开发者通过 CLI 与 npm 打交道。

npm常用命令

  1. 查看npm的版本
npm -v #npm -version
  1. 查看npm帮助
# 查看所有的命令帮助
npm help
# 如果要单独查看install命令的帮助,可以使用下面的命令
npm help install
  1. 查看安装过的所有包
npm list #列出当前安装过的所有包
#或者简写
npm ls
npm ls -g #查看全局安装的模块及依赖 
  1. 本地安装依赖包和全局安装(global)
#安装nodejs的依赖包,默认安装最新版本(本地)
npm install <Package name> 
#一次性安装多个(本地)
npm install 模块名 模块名	
#安装指定版本号的依赖包(本地)
npm install <Package name>@version 
#将包安装到全局环境中
npm install <Package name> -g  
# 根据package.json文件安装
npm install
  1. 卸载依赖包
npm  uninstall <Package name>
npm uninstall gulp --save-dev #卸载开发版本的模块
  1. 安装生产阶段的依赖包

-S, - -save 安装包信息将加入到dependencies(生产阶段的依赖)

npm install gulp --save 或 npm install gulp -S

package.json文件的 dependencies 字段:

"dependencies": {
    "gulp": "^4.0.2"
}
  1. 安装开发阶段的依赖包

-D, --save-dev 安装包信息将加入到devDependencies(开发阶段的依赖),所以开发阶段一般使用它

npm install gulp --save-dev 或 npm install gulp -D

package.json 文件的devDependencies字段:

"devDependencies": {
    "gulp": "^4.0.2"
}
  1. 安装可选阶段的依赖包

-O, --save-optional 安装包信息将加入到optionalDependencies(可选阶段的依赖)

npm install gulp --save-optional 或 npm install gulp -O

package.json文件的optionalDependencies字段:

"optionalDependencies": {
    "gulp": "^4.0.2"
}
  1. 精确安装指定版本依赖包

-E, --save-exact 精确安装指定模块版本

npm install gulp --save-exact 或 npm install gulp -E

输入命令npm install gulp -ES留意package.json 文件的 dependencies字段,以看出版本号中的^**消失了。

"dependencies": {
    "gulp": "4.0.2"
}

模块的依赖都被写入了package.json文件后,他人打开项目的根目录(项目开源、内部团队合作),使用npm install命令可以根据dependencies配置安装所有的依赖包。

npm install

注意:

npm 的package.json中的~和^~ 会匹配最近的小版本依赖包,比如~1.2.3会匹配所有1.2.x版本,但是不包括1.3.0^ 会匹配最新的大版本依赖包,比如^1.2.3会匹配所有1.x.x的包,包括1.3.0,但是不包括2.0.0

  1. 更新依赖包
npm update <Package name>
  1. 检查哪些依赖包是否过时
npm outdated

执行上面的命令,会出现如下情况:

一篇文章让你搞懂主流包管理工具npm、cnpm、yarn

另外有个检查依赖包更强大的一个第三方工具 npm-check,具体使用方法,请查看它的文档。

  1. 查看和管理npm的基础配置
npm config list -l  #查看所有的配置
  1. 清除本地npm cache缓存
npm cache clean
  1. 初始化项目
npm init #初始化项目,并在项目文件夹中引导创建一个package.json文件

其他npm命令可以看NPM中文文档

cnpm是什么?

简单的讲就是中国版的NPM,因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,所以我们乐于分享的淘宝团队干了这事。

这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。—来自淘宝 NPM 镜像

如何使用cnpm?

首先就是需要安装cnpm模块,命令如下:

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm支持可以使用支持npm除publish之外的所有命令。

因为cnpm的仓库只是 npm 仓库的一个拷贝,它不承担 publish 工作,所以执行cnpm publish 命令会失败的。

yarn是什么?

Yarn发布于2016年10月,截至当前2021年1月,在Github上拥有了39.4k个Star。而npm只有17.2k个Start。这个项目由一些高级开发人员维护,包括了Sebastian McKenzie(Babel.js)和Yehuda Katz(Ember.js、Rust、Bundler等)。

Yarn一开始的主要目标是解决上一节中描述的由于语义版本控制而导致的npm安装的不确定性问题。虽然可以使用npm shrinkwrap来实现可预测的依赖关系树,但它并不是默认选项,而是取决于所有的开发人员知道并且启用这个选项

Yarn采取了不同的做法。每个yarn安装都会生成一个类似于npm-shrinkwrap.json的yarn.lock文件,而且它是默认创建的。除了常规信息之外,yarn.lock文件还包含要安装的内容的校验和,以确保使用的库的版本相同

yarn是经过重新设计的崭新的npm客户端,它能让开发人员并行处理所有必须的操作,并添加了一些其他改进。运行速度得到了显著的提升,整个安装时间也变得更少像npm一样,yarn使用本地缓存。与npm不同的是,yarn无需互联网连接就能安装本地缓存的依赖项,它提供了离线模式。这个功能在2012年的npm项目中就被提出来过,但一直没有实现。允许合并项目中使用到的所有的包的许可证

安装通过命令安装

npm install -g yarn

查看版本:yarn --version通过安装包程序安装

地址:https://classic.yarnpkg.com/zh-Hans/docs/install#windows-stable

常用命令:yarn init:初始化项目,会在根目录下生成一个package.json,与npm类似具体不做解释yarn add <Package name>:安装依赖包,会自动安装最新版本,会覆盖指定版本号yarn add <Package name1> <Package name1>:一次性添加多个包yarn add <Package name>@version:添加指定版本的包yarn upgrade <Package name>@version:将包更新到指定版本yarn upgrade --latest <Package name>:将包更新到最新版本yarn remove <Package name>:删除包yarn remove <Package name1> <Package name2>:一次性删除多个包yarn info <Packagename> :可以用来查看某个模块的最新版本信息yarn install:安装package.json里所有包,并将包及它的所有依赖项保存进yarn.lockyarn install --force :强制重新下载所有包yarn install --flat:安装一个包的单一版本yarn install --production:只安装dependencies里的包yarn install --no-lockfile:不读取或生成yarn.lockyarn install --pure-lockfile:不生成yarn.lock

具体详细的命令可以查看官方文档:https://classic.yarnpkg.com/zh-Hans/docs

总结

说了这么多,一句话总结就是:npm是国外版、cnpm是国内版、yarn是npm的加强版。

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):