npm 和 yarn 前端包管理工具

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前言

前端开发逐渐工程化，npm作为我们的依赖管理工具起到十分重要的作用，本文就来总结一下 npm 和 yarn 相关知识点。

正文

1、什么是npm

（1）node的包管理器（node package manager），是node.js 默认的、以js编写的软件包管理器。

（2）npm相当于一个云代码仓库，相当于我们在开发中复制别人的代码，npm是收集了这么多代码，管理起来。

（3）各个包之间的相互依赖npm帮我们管理，不需要我们单独去管理。

（4）开发中我们想用jquery的包、bootstrap的包,没有npm之前我们需要单独去下载，引入，有了npm之后，我们只需要npm的一条指令，并且可以控制我们需要的对应的版本。

2、npm的安装

npm是node的默认的软件包管理系统，安装node完毕之后，会默认安装npm。

npm 本身也是基于node.js 开发的软件。

下载node：网站（https://nodejs.org/zh-cn/），检测是否安装成功，需要在cmd命令框中输入命令。

查看node是否安装成功 node -v
查看npm是否安装成功 npm -v
全局下载依赖包jquery npm install jquery -g
查看当前npm下载包来至于服务器 npm config get registry
由于国外服务访问慢，可以设置淘宝镜像提升下载依赖的速度，之后就可以使用cnpm(gzip压缩支持)：
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用nrm工具切换淘宝源 npx nrm use taobao
使用nrm工具切换官方源 npx nrm use npm

3、npm的基本使用

查看当前项目中所装的依赖 npm list
查看某一个依赖的版本 npm list vue // 查看vue的依赖版本
安装指定版本的依赖 npm install juery@3.0.0 // 安装3.0.0本版的依赖到当前项目
更行指定依赖到最新版本 npm update jquery // 更新jquery到最新版本，旧项目慎用
更行npm的版本 npm install npm@6.14.5 // 更新npm到指定版本
-g // 代表全局安装
-S // 或者--save 会在package.json文件的dependencies节点中写入依赖，表示运行时依赖
-S -D //或者--save --dev 会在package.json文件的devDependencies 节点中写入依赖，表示开发时依赖
// vue、vue-router 这些包在发布后生产环境还需要用，为运行时依赖，gulp,压缩css/js模块，babel的包在在项目部署后不使用，为开发时依赖。清空缓存 npm cache clear // 清空npm本地缓存，用于对付使用相同版本号发布新版本代码的人
撤销依赖版本 npm unpublish<package>@<version> // 可以撤销发布自己发布的某个依赖版本

其他命令请到npm官网（https://www.npmjs.com/）查看使用

4、package.json详解

进入文件夹，cmd命令输入" npm init "初始化生成package.json文件。

之后就会生成package.json文件，里面的内容就是上一步录入的信息。

执行npm install jquery -s 命令就会装入一个jquery的运行时依赖

同时package.json中dependencies节点就会写入改依赖名

上面的图片中，jquery对应的版本前面有 "^" 符号表示后两位会更新到最新版本，如果替换为 “~”破浪线表示最后一位更新到最新版本，若没有符号，表示依赖只能是指定的版本。

此时，如果删除掉node_modules文件夹下的jquery文件，将删除了依赖，此时package.json的dependencies节点不变，此时重新执行npm install 命令，将会重新下载安装jquery文件到node_modules文件夹下，这就是为什么我们在拿到一个半成品项目的时候，需要首先执行npm install 命令，别人的代码中不会有这些依赖，只是将依赖信息放在了package.json文件中，我们执行npm install 的时候，npm包管理工具会去查找该文件安装对应的依赖到本地环境。

5、npm安装包的使用

有了前面的了解，我们可以使用命令行使用npm下载和更新包，但是没有webpack 之前搜寻整个node_modules目录来定位每个包的路径再手动添加到我们的html代码中十分不便，相当于把依赖当成一个资源的目录了，类似于cdn脚本引入，这样十分不方便，因此产生了webpack。这里需要了解模块和包的概念（commonJS、require、import）。

6、yarn

“Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，正如官方文档中写的，Yarn 是为了弥补 npm 的一些缺陷而出现的。”这句话让我想起了使用npm时的坑了：

npm install的时候巨慢。特别是新的项目拉下来要等半天，删除node_modules，重新install的时候依旧如此。
同一个项目，安装的时候无法保持一致性。
队列执行每一个安装包。

安装yarn npm install -g yarn
yarn 淘宝源安装（两条命令） yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
初始化项目 yarn init
添加一个依赖包 yarn add [package]@[version]
更新一个依赖包 yarn upgrade [package]@[version]
删除一个依赖包 yarn remove [package]
安装所有的依赖包 yarn install
列出每个缓存的包 yarn cache ls
清除本地缓存 yarn cache clean

优点：速度快、安装版本统一、加入多个注册来源以及更多的语义化。