缘起：两个月没动的项目，从git上拉下来，突然间就跑不起来了？一顿操作之后，发现是依赖更新导致的不兼容，吃了一个修饰符的亏......
一、环境介绍
1. nvm
场景介绍：我们在开发项目的时候，最开始有一个老项目，安装的是node 4x的版本，后来有了新的项目，需要安装node 8x的版本，因此需要在两个版本之间进行切换，那么我们如何管理node的版本呢？此时nvm应运而生...
1). nvm是什么
- nvm(Node.js version manager) 是一个命令行应用，可以协助您快速地 更新、安装、使用、卸载 本机的全局 node.js 版本 2). 安装
- 访问 github点击最新版本的 nvm-setup.zip 下载到本地并安装，安装目录自定
- 打开 cmd , 输入 nvm -v，查看nvm版本号，确定安装成功
- 设置 node 和 npm 镜像地址，在nvm安装目录（nvm root可查看nvm安装目录），找到 setting.txt加上如下两行
node_mirror: https://npm.taobao.org/mirrors/node/
node_mirror: https://npm.taobao.org/mirrors/node/
- 安装你要的nodejs版本，必须是npm和nodejs都成功
- nvm list available命令查看可下载的nodejs版本信息
- nvm install 版本号 安装node指定版本的node
- nvm ls 查看安装的node版本 3). 常用命令
| 命令 | 含义 |
|---|---|
| nvm -v | 查看nvm版本号 |
| nvm list available | 查看网络可以安装的版本 |
| nvm list/ls | 查看已经安装的版本 |
| nvm install（uninstall）版本号 | 安装（卸载）指定的版本 |
| nvm use | 切换使用指定的版本node |
| nvm use | 切换使用指定的版本node |
| nvm alias | 给不同的版本号添加别名 |
| nvm unalias | 删除已定义的别名 |
| nvm root [path] | 设置和查看root路径 |
2. nrm
1). nrm是什么
- nrm全名 npm registry manager 是npm的镜像源管理工具，有时候国外资源太慢，使用这个就可以快速地在 npm 源间切换。
- 以前我们可能通过 npm config set registry registry.npm.taobao.org 去切换源，这种繁琐的方式，今天我们就来清爽一番... 2). 安装
- 我们可以直接通过npm安装：npm install -g nrm
- 通过nrm -V 查看版本，确定安装是否成功 3). 常用命令
| 命令 | 含义 |
|---|---|
| nrm -V | 查看nrm版本 |
| nrm ls | 查看本机所有的源（其中带*的是当前使用的源） |
| nrm use [name] | 切换源 |
| nrm add [registry] [url] | 增加源（其中reigstry为源名，url为源的路径） |
| nrm del [name] | 删除源（name为源名） |
| nrm current | 查看当前使用的源 |
| nrm test [npm] | 测试速度（测试相应源的响应时间）,源名可选 |
nrm切换源不仅可以用于npm，也可以用于yarn，当然我们还可以使用cnpm（有时候会出现一些诡异的问题）。
二、npm基础
1.npm
1). npm是什么
- npm全称为Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器
- npm的初衷是使得开发人员更容易分享和重用代码
- 须知的基本概念
- 包：是描述一个文件或一个目录，可以依赖其他包也可以不依赖
- 包管理器：对包进行管理的工具，可以查看包的版本、依赖、作者等相关信息
2). npx是什么
npm在5.2版本内置了npx工具，也可以使用npm install -g npx手动安装，主要用来在终端调用项目本地安装的模块，从而可以避免一些全局包的安装。 - 调用项目中安装的包：如果我们在项目中安装了webpack，要执行webpack相关的命令，如果在项目目录下直接执行的话，它会去全局的包查找，如果要避免这种情况，就只能将命令定义在package.json的scripts中，然后通过npm run的方式来执行。如果使用npx，就会避免这种情况，因为它会优先去项目本地中寻找。
npx webpack --v
- 避免全局安装模块：一般在使用一些脚手架的时候，我们需要在全局安装后才可使用，如果使用npx就不需要。
npx vue create demo参考文章：【前端工程化】篇二 白璧微瑕-包管理器
3）. npm常用命令
| 命令 | 含义 | 扩展 |
|---|---|---|
| npm init | 初始化生成一个新的 package.json 文件 | npm init -y(yes) 默认配置，跳过提问环节 |
| npm search <搜索词> | 搜索 npm 仓库，它后面可以跟字符串，也可以跟正则表达式 | 如果更改了npm的镜像源，搜索包时需要切换到npm官方源 |
| npm install <包名> [配置] | 安装包（install 可以简写为 i ） | -g（全局安装）、-S（生产依赖）、-D（开发依赖） |
| npm uninstall <包名> [配置] | 卸载包 | |
| npm update <包名> [配置] | 更新包 | |
| npm list | 列出当前项目安装的所有模块，以及它们依赖的模块 | npm list -global 列出全局安装的模块 |
| npm info <包名> | 查看每个模块的具体信息 | |
| npm set xxx | 设置环境变量（基本信息） | npm set init-author-name 'Your name'、npm set init-author-email 'Your email'等 |
| npm publish [配置] | 发布包 | -tag beta: 指定标签，默认为版本号，如npm publish --tag beta等 |
| npm cache clean --force | 清除缓存 | 为了加快安装包的速度，NPM会在安装包的时候把他们缓存到本地，再次安装这些包的时候，直接从缓存拷贝，使用该命令可以清除缓存。 |
2.yarn
1). 是什么
Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ，正如官方文档中写的，Yarn 是为了弥补 npm 的一些缺陷而出现的
- 安装太慢
- 存在安全隐患，因为 npm 允许包在安装的时候运行代码 yarn的优势：
- 速度快，并行安装：无论 npm 还是 Yarn 在执行包的安装时，都会执行一系列任务。npm 是按照队列执行每个 package，也就是说必须要等到当前 package 安装完成之后，才能继续后面的安装。而 Yarn 是同步执行所有任务，提高了性能
- 更简洁的输出：npm 的输出信息比较冗长。在执行 npm install 的时候，命令行里会不断地打印出所有被安装上的依赖。相比之下，Yarn 简洁太多：默认情况下，结合了 emoji直观且直接地打印出必要的信息，也提供了一些命令供开发者查询额外的安装信息。
- 更好的语义化： yarn改变了一些npm命令的名称，比如 yarn add/remove，感觉上比 npm 原本的 install/uninstall 要更清晰。
参考文章npm和yarn的区别，我们该如何选择?
2). yarn和npm命令一览表
| npm | yarn | 含义 |
|---|---|---|
| npm install(npm i) | yarn install(yarn) | 根据 package.json 安装所有依赖 |
| npm i [package] --save | yarn add [package] | 添加依赖包至 dependencies |
| npm i [package] –-save-dev | yarn add [package] –-dev | 添加依赖包至 devDependencies |
| npm i -g [package] | yarn global add [package] | 安装全局依赖包 |
| npm update --save | yarn upgrade [package] | 升级依赖包 |
| npm uninstall [package] | yarn remove [package] | 移除依赖包 |
相同的操作命令
| npm | yarn | 含义 |
|---|---|---|
| npm run | yarn run | 运行 package.json 中预定义的脚本 |
| npm config list | yarn config list | 查看配置信息 |
| npm config set registry url | yarn config set registry url | 设置源 |
| npm init | yarn init | 初始化，创建package.json 文件 |
| npm list | yarn list | 查看当前目录下已安装的node包 |
| npm login | yarn login | 登录（保存你的用户名、邮箱） |
| npm logout | yarn logout | 登出（删除你的用户名、邮箱） |
| npm outdated | yarn outdated | 检查过时的依赖包 |
| npm link | yarn link | 开发时链接依赖包，以便在其他项目中使用 |
| npm unlink | yarn unlink | 取消链接依赖包 |
| npm publish | yarn publish | 发布包到npm |
| npm test | yarn test | 测试响应速度 |
| yarn info | yarn info | 显示包的信息 |
参考文章：参考文章：【前端工程化】篇二 白璧微瑕-包管理器
三、npm进阶
1.npm版本固化（依赖锁版本）
缘起之处，归于此，框架组更新了一个依赖，不兼容主项目，导致我的项目突然死去...那么，先抛出一个问题，是否有必要锁定版本？
1). npm版本管理
- 版本格式：
- 主版本号.此版本号.修订号
- 版本控制符：
"test"："1.0.0 - 2.9.7", //介于两者之间的版本 "test"：">= 1.0.0 < 2.9.7", // 运算符版本控制（介于之间） "test": "1.0.1", // 固定版本 "test": "1.0.3 || 1.0.8", // 或运算 "test": "http://www.baid.com", // 指定下载地址代替版本 "test": "^1.2.0", // 同一主版本号 "test": "~1.2.3", // 同一主版本号和次版本号 "test": "2.x", // 2.0.0 以上均可 "test": "2.2.x", // 2.2.0以上均可 "test": "latest", // 最新的版本 "file": "../app" // 从本地下载 - npm默认
- npm默认使用^，即锁定主版本号 2). 版本固化的方式：
- npm-shrinkwrap.json：
- 该方式是比较早的锁定版本的方式， 与package-lock.json功能类似，区别在于npm包发布的时候可以发布上去。
- 如果package-lock.json和npm-shrinkwrap.json同时存在于项目根目录，package-lock.json将会被忽略。
- 使用方式：
npm shrinkwrap // 生成依赖 默认不包括dev dependencies
npm shrinkwrap--dev // 将dev-dependencies计算在内
- package-lock.json:
- 相对于npm-shrinkwrap ，其不会被发布到npm
- npm5.4.2版本后如果改了package.json，且package.json和lock文件不同，那么执行npm i时npm会根据 package中的版本号以及语义含义去下载最新的包，并更新至lock。如果两者是同一状态，那么执行npm i都会根据lock下载，不会理会package实际包的版本是否有新。
- 注意在npm5.4.2版本之前，执行npm i 时的不同处理...
- yarn.lcok:
- yarn毕竟是针对npm的缺点而生，所以其自带版本控制，默认依赖都会生成yarn.lock文件，该文件会通过包名+版本来确定具体信息。
- 对于固化还是建议使用yran.lock实现，npm的lock在不同版本下存在的差异让人头疼。 3). 是否应该锁定版本：
- 个人认为，自行维护的，向下兼容的依赖可以不锁版本，如果是依赖于第三方的，可以锁定版本，保证程序的可执行性，至于锁定到什么层级，视情况而定，这个没有啥标准。大佬们有什么看法意见，还望指出... 参考文章： yarn or npm 版本固化如何选择
