目前 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将临时安装该模块并执行,执行完毕后会删除该模块
优势
- 避免安装一些不常用的模块,浪费空间
- 不需要找到模块路径执行,或在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 包并发布
-
npm init -y
创建package.json文件(其中main
为入口js文件) - 注册npm账号
-
npm login
并输入账号、密码、邮箱登录 -
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有以下好处:
- 离线下载,就是之前下载过一次,这个包就会放到电脑上的一个地方,下次别的项目要使用同一个包的时候就不用下载了,而是做一个链接,这样速度超级快。
- 拥有 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