为什么需要npx？

在过去的几年中，npm生态系统越来越倾向于本地安装项目的开发依赖，而不是全局安装。

以前像mocha，grunt和bower这样的工具都会进行全局安装，而现在可以通过本地安装来管理其版本。

这也意味着，启动并运行基于npm的项目所需要做的就是确保系统上具有node + npm，克隆git repo，然后执行npm来运行安装和测试。 由于 npm run-script 将本地二进制文件添加到路径，因此可以正常工作！

缺点是，这没有提供快速/方便的方法以交互方式调用本地二进制文件。

有几种方法可以做到这一点，它们都有一些麻烦：

• 可以将这些工具添加到脚本中，但是您需要记住使用--，传递参数，
• 可以使用alias npmx=PATH=$\text{（}npmbin\text{）：}$（npmbin）：PATH这样的shell技巧，
• 可以使用./node\u modules/.bin/mocha手动为它们指定路径。这些都管用，但都不太理想。

npx被认为是最好的解决方案： $npx mocha 是所有你需要做的使用您的本地安装。如果您执行额外的步骤并配置shell自动回退，那么项目目录中的$mocha将为您提供帮助！

另外，如果调用一个已经安装的二进制文件，npx基本上没有开销，可以将工具的代码直接加载到当前正在运行的node进程中。

介绍

npm@5.2.0版本，安装时自带了一个npm 包runner。

如果不能用，手动安装

npm install -g npx

npx是一种工具，旨在帮助完善使用npm注册表中的软件包的体验-npm使得超级容易安装和管理注册表中托管的依赖项，npx使得使用CLI工具和托管在该注册表中的其他可执行文件变得容易 注册表。 到目前为止，它大大简化了许多需要使用纯npm进行一些程序化的事情：

使用没有 npm run-script 的本地安装工具：

使用指南

调用项目安装的模块

（1）演示

• 项目内部安装了测试工具 Mocha。

  npm install -D mocha

• 一般来说，调用 Mocha ，只能在项目脚本和 package.json 的scripts字段里面， 如果想在命令行下调用，必须像下面这样。

  项目的根目录下执行

  $ node-modules/.bin/mocha --version

• npx 就是想解决这个问题，让项目内部安装的模块用起来更方便，只要像下面这样调用就行了。

  $ npx mocha --version

（2）npx 的原理

npx运行的时候，会到node_modules/.bin路径和环境变量$PATH里面，检查命令是否存在。

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

# 等同于 ls
$ npx ls

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

控制调用本地/远程模块

• 强制使用本地模块，不下载远程模块， --no-install

npx --no-install http-server

• 忽略本地的同名模块，强制安装使用远程模块， --ignore-existing

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

原理: npx 运行的时候, 会到 node_modules/.bin 路径和环境变量 $PATH 里,检测命令是否存在.

执行一次性命令，避免全局安装

场景

比如，尝试一些CLI工具，但只需安装一个global就可以运行一次，这很烦人？

步骤

• 当不在$PATH中时调用npx将自动从npm注册表安装一个具有该名称的包，并调用它。
• npx 将create-react-app下载到一个临时目录，使用以后再删除。
• 完成后，安装的软件包将会删除，而不会出现在globals中，不必担心全局污染。

优点

• 避免全局安装模块，占用本地资源；
• 不用担心模块版本更新滞后的问题；

适用

这个特性非常适合生成器CLI这类需求，比如· yeoman 或 create-react-app 等。

类似的软件包： happy-birthday ， benny-hill ， workin-hard，cowsay，yo ， create-react-app ， npm-check 。更多的可以查看完整的npx仓库

使用不同版本的Node

操作

（1）直接使用npx

npx node@0.12.8 -v

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

（2）使用 -p 参数，指定模块

$ npx -p node@0.12.8 node -v
v0.12.8

-p参数对于需要安装多个模块的场景很有用。

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

$ npx -p lolcatjs -p cowsay [command]

适用场景：测试项目在不同node版本下的运行情况

指定版本

npx uglify-js@3.1.0 main.js -o ./dist/main.js

只要 npx 后面的模块无法在本地发现，就会下载同名模块

交互式开发npm run-script

$ npx -p cowsay -p lolcatjs -c 'echo "$ npm_package_name@$npm_package_version" | Cowsay | lolcatjs' 会同时安装Cowsay和lolcatjs，并允许脚本从运行脚本访问一系列$ npm_`变量。

现在很多npm用户都在利用这个非常酷的run-script特性。它们不仅安排了您的$PATH\text{，使本地二进制文件可以访问，而且还添加了大量环境变量，您可以在这些脚本中访问这些环境变量}!\text{你可以通过}$PATH，使本地二进制文件可以访问，而且还添加了大量环境变量，您可以在这些脚本中访问这些环境变量!你可以通过 npm run env | grep npm来查看这些额外的变量。

这使得开发和测试运行脚本变得很棘手——这意味着即使使用$（npm bin）/some bin这样的技巧，在交互工作时仍然无法访问那些神奇的env变量。

npx还有另一个窍门：当您使用-c选项时，在string参数中编写的脚本将拥有与常规运行脚本相同的env变量的完全访问权限！您甚至可以通过一个npx调用使用管道和多个命令！

-c 参数的作用

（1）控制命令使用npx解释

如果 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'

（2）将环境变量带入所要执行的命令。举例来说，npm 提供当前项目的一些环境变量，可以用下面的命令查看。

$ npm run env | grep npm_

-c参数可以把这些 npm 的环境变量带入 npx 命令。

$ npx -c 'echo "$npm_package_name"'

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

执行Github源码

使用起来已经很普遍了gist.github.com网站共享各种实用程序脚本，而不是设置整个git repos、发布新工具等。

使用npx，您可以更进一步：由于npx接受npm本身所接受的任何说明符，您可以创建一个人们可以直接调用的要点，只需一个命令！

npx 还可以执行 GitHub 上面的模块源码。

# 执行 Gist 代码
$ npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32
# 执行仓库代码
$ npx github:piuccio/cowsay hello

注意，远程代码必须是一个模块，即必须包含package.json和入口脚本。

奖励回合：shell自动回退

将npx自动回退放入.zshrc意味着您可以执行`$ ember-cli@latest …`完全不引用npx！

这个很棒的特性，由Félix Saparelli添加，意味着对于许多这样的用例，您甚至不需要直接调用npx！常规npx使用和回退之间的主要区别在于，除非您使用包装@版本语法：防止潜在危险的蹲位的安全网。

设置自动回退非常简单：在npx文档中查找用于当前shell的命令，将其添加到.bashrc/.zshrc/.fishrc，然后重新启动shell（或者使用source或其他机制刷新shell）。

现在，你可以做一些像$\text{标准}\mathrm{@}8--\text{版本来尝试不同版本的东西，如果你在一个}npm\text{项目中，}$标准@8−−版本来尝试不同版本的东西，如果你在一个npm项目中，mocha会自动退回到本地安装的mocha版本，前提是它还没有在全局范围内安装。

参考资料

• npx包管理

• 官方仓库

• mp.weixin.qq.com/s/4Pc4EkRm2…

• www.npmjs.com/package/npx

• alligator.io/workflow/np…

• medium.com/@maybekatz/…