包管理工具 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

你可能感兴趣的:(包管理工具 npm、yarn、bower)