包管理工具 npm、yarn、bower

目前 npm 是最佳的包管理工具，集成了其他两者的优势。

npm

通过package.json管理模块。每次安装包时，读取package.json中的模块名，并检查package-lock.json中有无记录

• 如有，则直接安装package-lock.json中的版本和依赖项
• 如无，则按照package.json中指定的版本进行安装，并记录到package-lock.json

2015年后，npm 的包依赖关系，从嵌套结构（ node_modules 中存在大量重复依赖项）改为扁平化结构，并击败了 bower。
2017年后，引入了 package-lock.json，并优化了 cache 技术（加快重复安装的包的下载速度），击败了 yarn。

更新 npm 到最新版本

• npm install -g npm

四个 npm 自带的简写指令

• npm start => npm run start
• npm stop => npm run stop
• npm test => npm run test
• npm restart => npm run stop & npm run restart & npm run start

常用安装指令

• npm install
• npm install 包名@版本号
• npm install 包名@版本号 --save
• npm install 包名@版本号 --save-dev => 保存为安装依赖项
• npm install --production => 不安装安装依赖项

---

npx

npx是执行Node软件包的工具，它从 npm5.2 版本开始生效。
未配置参数时，npx指令会到node_modules/.bin路径和环境变量$PATH检查是否存在指令(同 package.json 中的 scripts 中指令内容)，如果存在，它将执行，否则npx将临时安装该模块并执行，执行完毕后会删除该模块

优势

1. 避免安装一些不常用的模块，浪费空间
2. 不需要找到模块路径执行，或在package.json中输入模块路径执行，如$ node-modules/.bin/mocha --version=>$ npx mocha --version

参数

• --no-install 如本地不存在该模块则报错而不下载

$ npx --no-install http-server

• --ignore-existing 强制使用远程模块而不用本地模块

$ npx --ignore-existing create-react-app my-react-app

---

package.json

调用指令

node_modues/.bin文件夹下，对于一个npm包，有两个可执行文件，没有后缀名的是unix系的shell脚本，.cmd文件对应的是windows bat脚本，内容都是用node执行一个js文件
例如此时指令中输入webpack即会执行node_modues/.bin下的webpack.cmd文件
而直接命令行中只能输入node_modues/.bin/webpack.cmd或调用系统环境变量

执行多条指令

通过&&，使package.json执行完前一条指令且不报错时,执行下一条指令

{
  "name": "V3",
  "main": "dist/index.min.js",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "cd angular && npm start",
    "product": "cd angular && npm run product"
  }
}

其中拥有main属性才能在外部项目中用本目录名some-module导入依赖包；
否则可能需要这样写引用："some-module/dist/index.min.js"

---

创建 npm 包并发布

1. npm init -y创建package.json文件(其中main为入口js文件)
2. 注册npm账号
3. npm login 并输入账号、密码、邮箱登录
4. npm publish发布

错误处理

• 若npm版本过低，会报错426 Upgrade Required，此时npm install -g npm@latest更新版本即可
• 若未使用https，也会报错426 Upgrade Required。如下指定https即可
• 使用淘宝镜像会导致步骤3、4失败，此时在指令后加上--registry https://registry.npmjs.org切换回npm自身地址即可

---

yarn

yarn有以下好处：

1. 离线下载，就是之前下载过一次，这个包就会放到电脑上的一个地方，下次别的项目要使用同一个包的时候就不用下载了，而是做一个链接，这样速度超级快。
2. 拥有 lockfile 文件，在 yarn 中叫 yarn.lock，类似 npm 的 package-lock.json。
   这个文件会记录每次安装的包的版本的精确信息，这样，每次运行 yarn install 就会得到一模一样的依赖环境，而不是会出现个别包的版本不同，从而引发环境问题导致项目运行情况不同的尴尬事件。

yarn的安装和使用

$ npm install -g yarn
$ yarn config set registry 'https://registry.npm.taobao.org'

npm和yarn的指令对比

npm init <==> yarn init
npm install <==> yarn install/yarn
npm install ** -g <==> yarn global add **
npm install ** --save <==> yarn add **
npm install ** --save-dev <==> yarn add ** --dev
npm uninstall ** <==> yarn remove **

---

Bower

Bower 是 twitter 推出的一款包管理工具，基于 nodejs ，通过 bower.json 来管理模块间的联系。

与 npm 的区别

• npm 支持嵌套的依赖，因此包比较大和深

• bower 仅支持扁平的依赖，依赖间的嵌套关系，由程序员自己解决。用在浏览器端时代码文件更小

• “包”是指一系列有意义的资源的集合，在bower这里，更多体现在json文件，它是这些资源的配置文件，一个完整的包都应该有一个文件。

• “管理”包含获取，下载，安装，更新，查找,注册等等一系列对资源的操作。

Bower 的基础功能有哪些？

• 注册模块：每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配
• 文件存储：把文件存储在一个有效的网络地址上,使用的时候可以直接下载到
• 上传下载：你可以把你的包注册后上传存储，使用的时候可以使用一条命令直接下载到当前项目
• 依赖分析：它帮我们解决了包与包直接的依赖关系，当我们下载一个包A的时候,由于它依赖包B,所以bower会自动帮我们下载好包B

Bower的使用

全局安装bower : npm install -g bower
手动创建bower的配置文件.bowerrc:

{
  "directory": "components",//指定安装所在文件夹
  "json": "bower.json"//指定描述各个库的json文件
}

创建bower.json : bower init