nodeJS相关的nvm、npm、nrm、yarn、npx等

小咪咪 2024-04-06 13:12 51阅读 0赞

![8b3d872f6299c35454df09d2e5e0ff5b.jpeg][]

#### node、npm等相关概念 ####

`node` 和 `npm` 相关的名词很多，比较容易混淆。

下面对这些名词做个统一梳理

*  `node`：一个基于 Chrome V8 引擎的 JavaScript 运行时；提供了 JavaScript 的运行环境。可以直接到 node 官网下载安装
 *  `nvm`：node.js 版本管理工具；不同项目可能需要不同版本的 node；可以使用 nvm 来管理 node.js 版本
 *  `npm`：node.js 包管理工具；用来管理 node.js 中的第三方插件；新版本的 node 在安装的时候，会自动安装对应版本的 npm
 *  `nrm`：npm 源的管理工具，可以用来方便的切换 npm 源
 *  `cnpm`：使用的是淘宝的源。用法跟 npm 完全一致。cnpm 经常会有问题，所以在很多地方不推荐使用
 *  `yarn`：经过重新设计的崭新的 npm 客户端；运行速度显著提升，整个安装时间比 npm 少。**一般推荐使用 yarn 代替 npm**
 *  `npx`：一个 npm 包执行器。我们可以使用 npx 来执行各种命令。

#### 使用 nvm 管理 node.js 版本 ####

参考：[使用 nvm 管理 node.js 版本][nvm _ node.js]

#### npm ####

参考：[npm常用命令操作][npm]

#### 使用 nrm 管理 npm 源 ####

当使用官方 npm 源安装各种包比较慢的时候，建议修改 npm 源地址

**推荐使用 nrm 管理 npm 源**

nrm 是专门用来管理和快速切换私人配置的 registry

推荐全局安装

npm install nrm -g

#### 常用命令 ####

*      nrm ls ：查看默认配置，带 * 号即为当前使用的配置
        
        nrm current ：查看当前使用的是哪个源
        
        nrm use [源的别名] ：切换到某个源
        
        nrm add [源的别名] [源的地址] ：添加私有源。eg： nrm add qihoo http://registry.npm.360.org
        
        nrm test [源的别名] ：测试某个源
        
        nrm del [源的别名] ：删除某个源

#### cnpm ####

npm 安装插件是从国外服务器下载，受网络影响大，可能出现异常。

淘宝团队复制了一个完成的 npmjs.org 镜像，用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。即： cnpm

cnpm 跟 npm 用法完全一致，只是在执行命令时将 npm 改为 cnpm

推荐全局安装cnpm

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

安装完成后，可以使用命令 `cnpm -v` 检查是否安装成功。

如果能正常显示版本号，表示已安装成功。如果显示 不是内部或者外部命令 ，则需要手动将安装目录添加到系统变量中

#### yarn ####

yarn 是经过重新设计的崭新的 npm 客户端；运行速度显著提升，整个安装时间比 npm 少

像 npm 一样， yarn 使用本地缓存。与 npm 不同的是， yarn 无需互联网连接就能安装本地缓存的依赖项，它提供了离线模式。这个功能在2012年的 npm 项目中就被提出来过，但一直没有实现。

一般**推荐使用 yarn 代替 npm**

运行以下命令即可安装 yarn

npm install yarn -g

yarn 和 npm 命令对比如下

![623a3deec15a0ff41a4bc1dfd67fd9dd.jpeg][]

#### npx ####

npx是一个工具，npm v5.2.0引入的一条命令（npx），一个npm包执行器，旨在提高从npm注册表使用软件包的体验 ，npm使得它非常容易地安装和管理托管在注册表上的依赖项，npx使得使用CLI工具和其他托管在注册表。它大大简化了一些事情。

就像npm极大地提升了我们安装和管理包依赖的体验，在npm的基础之上，npx让npm包中的命令行工具和其他可执行文件在使用上变得更加简单。它极大地简化了我们之前使用纯粹的npm时所需要的大量步骤。

那么下面更详细的举例让你更加理解

举例

使用create-react-app创建一个react项目。

老方法：

npm install -g create-react-app
    create-react-app my-app

npx方式：

npx create-react-app my-app

这条命令会临时安装 create-react-app 包，命令完成后create-react-app 会删掉，不会出现在 global 中。下次再执行，还是会重新临时安装。

npx 会帮你执行依赖包里的二进制文件。

举例来说，之前我们可能会写这样的命令：

npm i -D webpack
    ./node_modules/.bin/webpack -v

如果你对 bash 比较熟，可能会写成这样：

npm i -D webpacknpm bin/webpack -v

有了 npx，你只需要这样：

npm i -D webpack
    npx webpack -v

也就是说 npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装！

npx 甚至支持运行远程仓库的可执行文件：

npx github:piuccio/cowsay hello

再比如 npx http-server 可以一句话帮你开启一个静态服务器！（第一次运行会稍微慢一些）

npx http-server

指定node版本来运行npm scripts：

npx -p node@8 npm run build

主要有以下特点：

*  临时安装可执行依赖包，不用全局安装，不用担心长期的污染。
 *  可以执行依赖包中的命令，安装完成自动运行。
 *  自动加载 `node_modules` 中依赖包，不用指定 `$PATH``。`
 *  可以指定 node 版本、命令的版本，解决了不同项目使用不同

npx 执行流程如下：

1.  到 `node_modules/.bin` 路径检查对应的命令是否存在，找到之后执行；
2.  没有找到，就去环境变量 `$PATH` 里面，检查对应命令是否存在，找到之后执行;
3.  还是没有找到，自动下载一个临时的依赖包最新版本在一个临时目录，然后再运行命令，运行完之后删除，不污染全局环境。

安装过程很简单，直接运行以下命令即可

npm install npx -g

#### npx 使用场景 ####

*  执行本地命令

比如项目下安装了 mocha ，可以直接用 npx 执行

npx mocha --version

*  一次性执行命令

比如以下命令，npx 将 create-react-app 下载到一个临时目录，使用以后再删除

不用全局安装 create-react-app ，运行后不会污染全局环境

npx create-react-app myApp

*  切换 node 版本

要运行的命令不兼容当前的 node 版本时，可使用 npx 切换版

npx 的 -p 选项指定要安装的包，并将其添加到正在运行的 $PATH 中

npx node@12 -v

*  开启静态服务器

使用 http-server 或者 serve 开启静态服务器。方便本地预览打包后的项目

npx http-server       
     # 默认返回根目录下index.htmlnpx http-server -p 3000   # 也可以直接指定端口

[8b3d872f6299c35454df09d2e5e0ff5b.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/7b4373c83fe248239b752eab7bf2a28a.jpeg
[nvm _ node.js]: http://baijiahao.baidu.com/s?id=1726200636333230641
[npm]: http://baijiahao.baidu.com/s?id=1726289783347888551
[623a3deec15a0ff41a4bc1dfd67fd9dd.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0adb19cd0cd040f9800a47b43b6bb4bf.jpeg