关卡三： NPM

【学习前提】

        完成前端开发基础和JavaScript基础学习。

【阶段说明】

        NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

【学习技巧】

        NPM作为前端使用较多的包管理工具，具有很强的实用性，需要多尝试使用。

一、认识 npm

        npm（全称 Node Package Manger，即 node 包管理器），是 Node.js 默认的、以 JavaScript 编写的软件包管理系统。通过 npm 来分享和使用代码已经成为了前端的标配。npm 被全球超过1100万开发人员所依赖，拥有超过一百万个软件包，是世界上最大的软件注册表。

npm 官网地址：npm (npmjs.com)

二、安装 npm

        npm 是 Node.js 默认的软件包管理系统，安装完 node 后，会默认安装好 npm，npm 本身也是基于 Node.js 开发的软件。

Node 下载地址：Node.js 中文网 (nodejs.cn)

npm 镜像的设置与查看：

• 搭建环境时通过如下代码将 npm 设置成淘宝镜像：

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

• 设置当前地址（设置为默认地址）：

• npm config set registry https://registry.npmjs.org

• 查看镜像的配置结果：

• npm config get registry
  npm config get disturl

• 使用 nrm 工具切换淘宝源：

npm nrm use taobao

• 如果之后需要切换回官方源即可：

npm nrm use npm

注意：你可以使用淘宝定制的 cnpm （gzip 压缩支持）命令行工具代替默认的 npm（不常用）

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

三、npm 的使用

1、npm 的常用命令：

npm 命令	说明
npm -v	通过查看版本，看 npm 是否安装成功
npm help	查看所有命令
npm unpublish <package>@<version>	撤销自己发布过的某个版本代码
npm help <command>	可查看某条命令的详细帮助，例如 npm help install
npm install <Module Name>	使用 npm 命令安装模块
npm install <Module Name> -g	全局安装，可以直接在命令行里使用
npm list -g	查看所有全局安装的模块
npm list vue	查看某个模块的版本号
npm install npm@x.x.x	(@后跟版本号)即可将 npm 更新为指定的 x.x.x 版本
npm update moduleName	将模块更新为最新版本
npm uninstall moduleName	卸载模块
npm install moduleName -save	# -save 在 package 文件的 dependencies 节点写入依赖；dependencies：运行时的依赖，发布后，即生产环境下还需要用的模块
npm install moduleName -save-dev	# -save-dev 在 package 文件的 devDependencies 节点写入依赖；devDependencies：开发时的依赖。里面的模块是开发时使用的，发布时用不到它，比如项目中使用的 gulp，压缩 css、js 的模块。这些模块在我们的项目部署后是不需要的
npm cache clear	清空NPM本地缓存，用于对付使用相同版本号发布新版本代码的人

更多 npm 命令参考：NPM命令-Node.js和npm-CSDNVue入门技能树

2、Package.json 文件属性

属性	说明
name	包名
version	包的版本号
description	包的描述
homepage	包的官网 URL
author	包的作者姓名
contributors	包的其他贡献者姓名
dependencies	依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下
repository	包代码存放的地方的类型，可以是 git 或 svn ，git 可在 GitHub 上
main	main 字段指定了程序的主入口文件，require（'moduleName'）就回加载这个文件。这个字段的默认值是模块根目录下面的 index.js
keywords	关键字

package.json 文件中版本号的说明：

        5.0.3：表示安装指定的 5.0.3 版本

        ~5.0.3：表示安装 5.0.x 中最新的版本

        ^5.0.3：表示安装 5.x.x 中最新的版本

四、Yarn

1、Yarn是什么

        Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出的一个新的JS包管理工具，Yarn是为了弥补 npm 的一些缺陷而出现的。

NPM5以下会出现的问题：

        1、npm install 的时候非常慢，特别是新的项目拉下来要等很长时间，删除 node_modules 重新 install 时依旧如此。

        2、同一个项目，对人开发时会因为安装的版本不一致出现 bug。

Yarn 官网：Home | Yarn - Package Manager (yarnpkg.com)

Yarn的优点：

•     速度快
•     安装版本统一
•     更简洁的输出
•     多注册来源处理
•     更好的语义化

2、Yarn的安装

        方式1：下载 node.js，使用 npm 安装，命令如下：

            npm install yarn -g

            查看版本：yarn --version

        方式2：安装 node.js，下载 yarn 的安装程序：

             提供一个 .msi 文件，在运行时将引导您在 Windows 上安装 Yarn。

        方式3：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

3、Yarn 的基本使用

Yarn 命令	说明
yarn init	初始化项目，同 npm init，执行输入信息后会生成 package.json 文件
yarn publish	发布包
yarn remove <packageName>	移除一个包，会自动更新 package.json 和 yarn.lock
yarn upgrade	更新一个依赖，用于更新包到基于规范范围的最新版本
yarn run	运行脚本，用来执行在 package.json 中scripts 属性下定义的脚本
yarn info <packageName>	显示某个包的信息，可以用来查看某个模块的最新版本信息
yarn cache	缓存
yarn cache list	列出已缓存的每个包
yarn cache dir	返回全局缓存位置
yarn cache clean	清除缓存
yarn install	安装 package.json 里所有包，并将包及它的所有依赖项保存近 yarn.lock
yarn install --flat	安装一个包的单一版本
yarn install --force	强制重新下载所有包
yarn install --production	只安装 dependencies 里的包
yarn install --no-lockfile	不读取或生成 yarn.lock
yarn install --pure-lockfile	不生成 yarn.lock
yarn add [package]	在当前的项目中添加一个依赖包，会自动更新到 package.json 和 yarn.lock 文件中
yarn add [package]@[version]	安装指定版本，这里指的是主要版本，如果需要精准到小版本，使用 -E 参数
yarn add --exact/-E	安装包的精确版本。例如 yarn add foo@1.2.3会接受1.2.9版，但是 yarn add foo@1.2.3 --exact 只会接受1.2.3版
yarn add --tilde/-T	安装包的次要版本的最新版。例如 yarn add foo@1.2.3 --tilde 会接受1.2.9版，但不接受1.3.0版
yarn add [package]@[tag]	安装某个 tag（比如 beta、next 或 latest）
yarn add --dev/-D	加到 devDependencies
yarn add --peer/-P	加到 peerDependencies
yarn add --optional/-O	加到 optionalDependencies

参考地址：Usage | Yarn - Package Manager (yarnpkg.com)

4、npm 和 yarn 的迁移

        可以从 npm 迁移到 yarn，也可以从 yarn 迁移到 npm。

        有了 yarn 的压力后，npm 做了一些类似的改进，在 npm5.0之前，yarn 的优势特别明显，但在之后，通过一系列对比可以看到 npm5在速度和使用上确实有很大提升，值得尝试。

        如果你已经在个人项目上使用 yarn，并且没有遇到更多问题，目前完全可以继续使用；但如果有兼容 npm 的场景，以及还没有切到 yarn 的项目，那现在就可以试试 npm5 了。