npx的使用及原理分析

一、简介

npm从5.25.2版开始，增加了 npx 命令。

该命令的诞生主要是方便我在项目中使用全局包。

二、安装

Node安装后自带npm模块，可以直接使用npx命令。

如果不能使用，就要手动安装一下。

npm install -g npx

三、使用场景

npx想要解决的主要问题，就是调用项目内部安装的模块，我们以webpack为例。

首先我们先 npm init 创建一个node项目，在通过一下命令安装webpack

（从webpack4开始需要依赖webpack-cli）

npm install webpack webpack-cli -D

如果我们想查看 webpack 版本我们只能通过以下命令 或 在 package.json 中的 scripts 字段里面添加对应指令

<code class="language-plaintext hljs">// node_modules/.bin 中储存的是安装的package的可调用模块
node_modules/.bin/webpack -v</code>

npx 可以让项目内部安装的模块用起来更方便，只要像下面这样调用就行了。

npx webpack -v

四、npx的原理

npx 的原理很简单，就是运行的时候，会到先到 node_modules/.bin路径 中查找命令如果没有再去 全局环境变量$PATH 里面，检查命令是否存在。

由于 npx 会检查环境变量$PATH，所以系统命令也可以调用。

npx ls // 等同于ls命令

注意：

只要 npx 后面的模块无法在本地发现，npm就会询问我们是否下载该package。

比如，本地没有安装webpack，执行 npx webpack -v就会出现如图的提示。

如果想让 npx 强制使用本地模块，不下载远程模块，可以使用--no-install参数。

如果本地不存在该模块，就会报错。

npx --no-install webpack -v

反过来，如果忽略本地的同名模块，强制安装使用远程模块，可以使用--ignore-existing参数。

比如，本地已经全局安装了create-react-app，但还是想使用远程模块，就用这个参数。

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

利用 npx 指定某个版本的 Node 运行脚本。

npx node@14.10.0 -v

上面命令会使用 14.10.0 版本的 Node 执行脚本。

原理是从 npm 下载这个版本的 node，使用后再删掉。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。