今天在看到 create-react-app 仓库时,在其安装方式上看到这样一条指令,一脸懵逼,这是什么?

1
2
3
npx create-react-app my-app
cd my-app
npm start

nvmnrmnpmnpx, 类似的名词屡见不鲜,npx 到底是什么?

照例来到 github, 如其官方仓库的解释:

npm package executor

这是 npm 的包执行器,那么问题来了,这是什么时候出现的一个这样的工具,之前一直没用这个工具岂不也是好好的?

npx 包执行器

查阅资料得知,npx 是 npm v5.2.0 版本之后一起打包的安装的一个包执行器,在没有这个包执行器之前,我们如何执行一个 npm 包的指令,首先我们要搞懂执行一个已安装的npm包的指令的过程。

  1. 执行一条 npm intall *** 指令后,在当前执行路径下的 node_module 文件夹下会默认添加该 npm 包对应的文件夹,并在 .bin 文件夹下生成对应的二进制执行指令

  2. 当我们在执行一条指令时,其实是在执行 .bin 文件夹下的对应的二进制指令

执行一个 npm 包就有两种方式:

  1. 直接定位到该二进制文件的路径,执行。比如: node_modules/.bin/webpack

  2. package.json 中 scripts 字段中定义快捷命令,通过 npm run *** 的方式去执行

有了 npx 以后,我们就可以直接使用 npx 命令去执行了,去寻找二进制命令文件的重任就交给了它,比如 npx webpack, 再也不用去写 node_modules/.bin/***

npx 执行过程

如上介绍了 npx 执行指令对于我们来说一个显而易见的用处,那么除此之外,npx 还有一个用途就是不必全局安装一些 npm 包,直接使用 npx 命令去执行一些 npm 指令,如果本地没有安装的话会直接拉取最新的版本安装并执行。 那么 npx 的执行是一个什么样的过程:

  1. 检查预执行的 package 是否在本工程中已经安装,如果有的话直接执行
  2. 如果没有安装,则拉取远端最新版本安装并执行

注意:第一步中检查本地是否安装,npx 会去 node_modules/.bin 以及 $PATH 下需寻找该 package 对应的指令是否被安装。

npx 的一些高级用法

下面是 npx 的一些高级用法,日常开发场景下不知道会不会用到这样的定制方式。

  1. 只使用本地模块,不拉取远端,--no-install, 本地未安装时报错
  2. 忽略本地模块,只拉取远端最新的模块,--ignore-existing
  3. 指定package, -p, 指定多个模块的时候使用
  4. 多模块指令执行,-c, 指定多个模块执行时使用
  5. 执行一个远程仓库中的指令, 比如 github,(需包含 package.json 和入口脚本)

参考链接

  1. Yes, it’s npx, not npm — the difference explained

  2. npx 使用教程