一、概念
- npm（全程Node Package Manager，即包管理器）。
- 是Node.js默认的，以JavaScript编写的软件包管理系统。
- npm来分享和使用代码已经成了前端的标配。
- 官网：https://www.npmjs.com
- npm被全球超过1100万开发人员所依赖，拥有超过100万个软件包，是世界上最大的软件注册表。
二、安装NPM工具
npm是Node.js默认的软件包管理系统
安装完毕node后，会默认安装好npm
npm本身也是基于Node.js开发的软件。
下载Node:http://nodejs.cn
可在终端输入以下命令：
1、npm -v ：查看版本
2、npm install 包名 -g：全局模式安装包（全局安装的包一般都是一些工具）
3、npm install 包名 --save：安装包并添加到依赖中
通过NPM下载的包都放到node_modules文件夹中。
通过NPM下载的包，直接通过包名引入即可。
Node在使用模块名字来引入模块时，首先在当前目录的node_modules中寻找是否含有该模块：① 如果有则直接使用，如果没有则去上一级目录的node_modules中寻找
② 如果有则直接使用，如果没有则再去上一级目录寻找，直到找到为止
③ 直到找到磁盘的根目录，如果依然没有，则报错
三、NPM的使用
1、npm -v ：通过查看版本，看npm是否安装成功。
2、npm intall <Module Name> ：使用npm命令安装模块。
3、npm intall <Module Name> -g ：可以直接在命令行里使用。
4、npm list -g：查看所有全局安装的模块。
5、npm list vue：查看某个模块的版本号。
6、npm -g install npm@5.9.1 （@后跟版本号）：这样可以更新npm版本。
7、npm install -save moduleName ：-save 在package文件的dependencies节点写入依赖。
8、npm install -save-dev moduleName ：-save-dev在package文件的devDependencies节点写入依赖。
9、devDependencies：开发时的依赖。里面的模块是开发时用的，发布时用不到它，比如项目中使用的gulp，压缩CSS、js的模块。
四、Package.json属性说明
1、name:包名
2、version：包的版本包
3、description：包的描述
4、homepage：包的官网url
5、author：包的作者姓名
6、contributors：包的其他贡献者姓名
7、dependencies：依赖包列表。如果依赖包没有安装，npm会自动将依赖包安装在node_module目录下。
8、repository：包代码存放的地方的类型，可以是git或svn。git可在Github上。
9、main：main字段指定了程序的主入口文件，require（“moduleName”）就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。
10、keyword：关键字
五、npm镜像的设置与查看
1、搭建环境时通过如下代码将npm设置成淘宝镜像
npm config set registry https://registry.npm.taobao.org -- global
npm config set disturl https://npm.taobao.org/dist --global
2、设置当前地址（设置为默认地址）
npm config set registry https://registry.npmjs.org/
3、查看镜像的配置结果
npm config get registry
npm config get disturl
4、使用nrm工具切换淘宝源
npm nrm use taobao
5、如果之后需要切换回官方源可使用
npm nrm use npm
可以使用淘宝定制的cnpm（gzip压缩支持）命令行工具代替默认的npm：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
六、NPM常用命令
npm提供了很多命令，例如install和publish，使用npm help可查看所有命令。
使用npm help <command> 可查看某条命令的详细帮助，例如npm help install。
在package.json所在目录下使用npm.install -g可现在本地安装当前命令程序，可用于发布前的本地测试。
使用npm unpdate <package>可以把当前目录下node_modules子目录里边的对应模块更新至最新版本。
使用npm update <package> -g 可以把全局安装的对应命令行程序更新至最新版。
使用npm cache clear 可以清空NPM本地缓存，用于对付使用相同版本号发布新版本代码的人。
使用npm unpublish <package> @<version> 可以撤销发布自己发布过的某个版本代码。
七、NPM包的使用
通过命令行使用npm下载和更新包。
没有webpack之前搜寻整个node_modules目录来定位每个包的路径再手动添加到我们HTML文件中（太不方便）。
大多数编程语言都会提供一个文件导入另一个文件代码的机制。然而JavaScript最初设计时并没有这个特性，因为JavaScript原本是为了在浏览器端运行而设计的，并没有权限获取计算机客户端的文件系统（安全考虑）。所以很长一段时间以来，组织多个文件的JavaScript代码就是把每个文件下载下来，变量是全局共享的。
CommonJS中很大一部分便是对模块系统的规范。
使用require语句导入包
新的ES6可以使用import导入包。
八、ES6兼容性解决
兼容表：http://kangax.github.io/compat-table/es6
IE10+、Chrome、FireFox、移动端、NodeJS现在都支持。
兼容低版本浏览器
- 在线转换（这种编译会加大页面渲染的时间）
- 提前编译（强烈建议这种方式，不影响浏览器渲染时间）
（比较通用的工具方案有babel，jsx，traceur，es6-shim等。）
使用NPM全局安装babel-cli包（babel-V）
1、找一个目录，用npm初始化一个项目，用来搭建我们的babel环境。（npm init）或者（npm init -y）
2、babel提供一个编译工具babel-node，也可以执行我们的js代码（babel-node index.js）
3、在项目目录下新建.babelrc文件（这是babel的配置文件）
{
"presets":["es2015”，“stage-2”]，//设置转码规则
“plugins”：["transform-runtime"] //设置插件
}
这里需要转换成es2015，安装我们所需要的库：
npm install babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-w -save-dev
4、再打开babel项目下的package.json文件，做如下修改：
“scripts”：{"buile"："bable src -w -d lib"},
5、编译整个src目录并将其输出到lib目录。这里的src指的是需要转换的目录，lib指的是输出的内容存放目录，-w其实是-watch的意思，就是监听文件，实时编译输出。
6、新建src目录和lib目录，记得一定要建，不然会报错，然后就启动babel工程。
7、命令行输入npm run build。
九、Yarn
Yarn是由Facebook、Google、Exponent和Tilde联合推出了一个新的JS包管理工具，正如官方文档中写的，Yarn是为了弥补npm的一些缺陷而出现的。因为NPM5以下会出现下面的问题：
- npm install的时候巨慢。特别是新的项目拉下来要等半天，删除node_modules，重新install的时候依旧如此。
- 同一个项目，多人开发时，由于安装的版本不一致出现bug。
官网：www.yarnpkg.com
1、yarn的安装
① 下载node.js，使用npm安装
npm install -g yarn
查看版本： yarn --version
② 安装node.js，下载yarn的安装程序
提供一个.msi文件，在运行时将引导在windows上安装Yarn
③ Yarn淘宝源安装，分别复制粘贴以下代码行到黑窗口运行即可
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site https://cdn.npm.taobao.org/dist/node-sass-g
2、yarn的基本使用
yarn init ：初始化项目，同npm init，执行输入信息后，会生成package.json文件。
yarn install：安装package.json里所有包，并将包及它的所有依赖项保存进yarn.lock
yarn install --flat：安装一个包的单一版本
yarn install --force：强制重新下载所有包
yarn install --production：只安装dependencies里的包
yarn install --no-lockfile：不读取或生成yarn.lock
yarn insall --pure-lockfile：不生成yarn.lock
yarn add[package]：在当前的项目中添加一个依赖包，会自动更新到package.json和yarn.lock文件中。
yarn add[package]@[version] ：安装指定版本，这里指的是主要版本，如果需要精确到小版本，使用-E参数。
yarn add[package]@[tag]：安装某个tag（比如beta，next或者latest）
yarn add --dev/-D：加到devDependencies
yarn add --peer/-P：加到peerDependencies
yarn add --optional/-O：加到optionalDependencies
3、yarn的优点
速度快
安装版本统一
更简洁的输出
多注册来源处理
更好的语义化