包管理工具(npm/cnpm/yarn/pnpm/npx/nvm)

npm

中文文档:https://www.npmjs.cn/

  • npm install的时候巨慢。特别是新的项目拉下来要等半天,删除node_modules,重新install的时候依旧如此。
  • 同一个项目,安装的时候无法保持一致性。由于package.json文件中版本号的特点,

下面三个版本号在安装的时候代表不同的含义。

"5.0.3", // 表示安装指定的5.0.3版本
"~5.0.3", // 表示安装5.0.X中最新的版本
"^5.0.3" // 表示安装5.X.X中最新的版本

常常会出现同一个项目,有的同事是OK的,有的同事会由于安装的版本不一致出现bug。

  • 安装的时候,包会在同一时间下载和安装,中途某个时候,一个包抛出了一个错误,但是npm会继续下载和安装包。因为npm会把所有的日志输出到终端,有关错误包的错误信息就会在一大堆npm打印的警告中丢失掉,并且你甚至永远不会注意到实际发生的错误。

cnpm

  • cnpmnpm用法完全一致,只是在执行命令时将npm改为cnpm
  • npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,于是淘宝团队干了这事。来自官网:“这是一个完整 npmjs.org镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

安装

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

yarn

中文文档:https://www.yarnpkg.cn/getting-started

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

  • 安装速度快 (服务器速度快 , 并且是并行下载)
  • 版本锁定,安装版本统一
  • 缓存机制,如果之前已经安装过一个软件包,用Yarn再次安装时之间从缓存中获取,就不用像npm那样再从网络下载了

安装

npm install -g yarn

Yarn和npm命令对比:

npm yarn
npm install yarn
npm install react --save yarn add react
npm uninstall react --save yarn remove react
npm install react --save-dev yarn add react --dev
npm update --save yarn upgrade
查询当前配置的镜像 设置成淘宝镜像
npm get registry yarn config get registry
npm config set registry https://registry.npm.taobao.org yarn config set registry https://registry.npm.taobao.org

pnpm

中文文档:https://www.pnpm.cn/

  • pnpm运行起来非常的快,超过了npmyarn
  • pnpm采用了一种巧妙的方法,利用硬链接和符号链接来避免复制所有本地缓存源文件,这是yarn的最大的性能弱点之一
  • 使用链接并不容易,会带来一堆问题需要考虑。
  • pnpm继承了yarn的所有优点,包括离线模式和确定性安装

安装

npm install -g pnpm  // 通过 npm 安装 pnpm
npx pnpm add -g pnpm  // 通过 npx 安装 pnpm

一旦安装完 pnpm之后,就无需使用其它软件包管理器来更新pnpm了。 你可以让pnpm 自己来更新自己,如下所示:

pnpm add -g pnpm

npx

npm使用教程:http://www.ruanyifeng.com/blog/2019/02/npx.html

  • npm 从5.2版开始,增加了 npx 命令。它有很多用处,本文介绍该命令的主要使用场景。
  • Node 自带 npm 模块,所以可以直接使用 npx 命令。万一不能用,就要手动安装一下。
npm install -g npx

(1)npx 会帮你执行依赖包里的二进制文件。引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。在以往中,我们在 node 项目中要执行一个脚本,需要将它在 scripts 中声明:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "init:runtime-only": "vue init webpack vue-cms"
}

然后执行命令

npm run init:runtime-only

它其实本质还是运行

vue init webpack vue-cms

用了 npx 以后呢,你不需要在 scripts 中声明了,就可以直接敲键盘了(npx 开头,然后接你要执行的内容):

npx vue init webpack vue-cms

(2)原理

  • npx 的原理很简单,就是运行的时候,会到 node_modules/.bin 路径和环境变量$PATH里面,检查命令是否存在。
    由于 npx 会检查环境变量$PATH,所以系统命令也可以调用。

(3)等同于 ls npx ls

  • 注意,Bash 内置的命令不在$PATH里面,所以不能用。比如,cd是 Bash 命令,因此就不能用npx cd。

(4)避免全局安装模块

  • npx 还能避免全局安装的模块。比如,create-react-app 这个模块是全局安装,npx 可以运行它,而且不进行全局安装。
npx create-react-app my-react-app

上面代码运行时,npx 将create-react-app下载到一个临时目录,使用以后再删除。所以,以后再次执行上面的命令,会重新下载create-react-app。

  • 下载全局模块时,npx 允许指定版本。
npx uglify-js@3.1.0

上面代码指定使用 3.1.0 版本的uglify-js压缩脚本。

  • 注意,只要 npx 后面的模块无法在本地发现,就会下载同名模块。比如,本地没有安装http-server模块,下面的命令会自动下载该模块,在当前目录启动一个 Web 服务。
npx http-server

(5)--no-install 参数和--ignore-existing 参数

  • 如果想让 npx 强制使用本地模块,不下载远程模块,可以使用--no-install参数。如果本地不存在该模块,就会报错。
npx --no-install http-server
  • 反过来,如果忽略本地的同名模块,强制安装使用远程模块,可以使用--ignore-existing参数。比如,本地已经全局安装了create-react-app,但还是想使用远程模块,就用这个参数。
npx --ignore-existing create-react-app my-react-app

(6)使用不同版本的 node

  • 利用 npx 可以下载模块这个特点,可以指定某个版本的 Node 运行脚本。它的窍门就是使用 npm 的 node 模块。
$ npx node@0.12.8 -v

上面命令会使用 0.12.8 版本的 Node 执行脚本。原理是从 npm 下载这个版本的 node,使用后再删掉。
某些场景下,这个方法用来切换 Node 版本,要比 nvm 那样的版本管理器方便一些。

(7)-p 参数

  • -p参数用于指定 npx 所要安装的模块,所以上一节的命令可以写成下面这样。
$ npx -p node@0.12.8 node -v 

上面命令先指定安装node@0.12.8,然后再执行node -v命令。

  • -p参数对于需要安装多个模块的场景很有用。
npx -p lolcatjs -p cowsay [command]

(8)-c 参数

  • 如果 npx 安装多个模块,默认情况下,所执行的命令之中,只有第一个可执行项会使用 npx 安装的模块,后面的可执行项还是会交给 Shell 解释。
$ npx -p lolcatjs -p cowsay 'cowsay hello | lolcatjs'

报错

  • 上面代码中,cowsay hello | lolcatjs执行时会报错,原因是第一项cowsay由 npx 解释,而第二项命令localcatjs由 Shell 解释,但是lolcatjs并没有全局安装,所以报错。
  • -c参数可以将所有命令都用 npx 解释。有了它,下面代码就可以正常执行了。
$ npx -p lolcatjs -p cowsay -c 'cowsay hello | lolcatjs'
  • -c参数的另一个作用,是将环境变量带入所要执行的命令。举例来说,npm 提供当前项目的一些环境变量,可以用下面的命令查看。
$ npm run env | grep npm_
  • -c参数可以把这些 npm 的环境变量带入 npx 命令。
$ npx -c 'echo "$npm_package_name"'

上面代码会输出当前项目的项目名。

nvm

管理node版本的工具,例如在一台电脑上已经安装了node10以上,但有的项目需要node版本在8,由于要维护多个项目,卸载再安装又有很多麻烦和错误,使用nvm给前端同学带来了福利。

安装

github上下载最新版本 https://github.com/coreybutler/nvm-windows/releases

  • nvm-setup.zip 一个安装包,下载之后点击安装,连续点击下一步,无需任何配置,推荐
  • nvm-noinstall.zip 绿色免安装,使用之前需要配置,不推荐
  • Source code(zip):压缩的源码

使用

nvm install  8.10.0  // 例如:安装ndoe  8.10.0为node版本
nvm list  // 查看nvm管理的node版本列表,正在使用的版本在列表前有星号标记
nvm use 8.10.0  // 使用node指定版本 
nvm uninstall 8.10.0 // 卸载指定node版本
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 221,198评论 6 514
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,334评论 3 398
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,643评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,495评论 1 296
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,502评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,156评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,743评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,659评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,200评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,282评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,424评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,107评论 5 349
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,789评论 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,264评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,390评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,798评论 3 376
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,435评论 2 359

推荐阅读更多精彩内容