知识准备

当使用 npm 将软件包安装到 node_modules 文件夹中或全局安装时，如何在前端代码中使用它？
假设使用以下命令安装了流行的 JavaScript 实用工具库 lodash：

npm install lodash

使用：

// web中
const _ = require('lodash');
_.reverse(1, 2, 3, 4)

// nodejs中
import _ from 'lodash';
_.reverse(1, 2, 3, 4)

如果软件包是可执行文件，该怎么办?

在这种情况下，它会把可执行文件放到 node_modules/.bin/ 文件夹下。
验证这一点的简单示例是 create-react-app，我们常用来搭建react脚手架项目。
create-react-app 软件包提供了一个命令行程序，可以执行该程序来生成一个react脚手架项目。
当使用 npm install create-react-app 安装软件包时，它会在 node_modules 文件夹中安装自身以及一些依赖包：

有一个隐藏的 .bin 文件夹，其中包含指向 create-react-app 二进制文件的符号链接：

如何执行这些二进制文件？

可以输入 ./node_modules/.bin/create-react-app 来运行它:

# 生成my-app
./node_modules/.bin/create-react-app my-app
# 进入脚手架项目
cd my-app

但是这么长的调用路径怎么看都不够方便，那怎么办呢？我们今天的主角npx出场了。

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

npx使用

有了npx后，执行上面的create-react-app命令只需要在当前路径下执行：

npx create-create-app my-app
cd my-app

是不是简单得多了？

npx执行过程

以npx create-create-app my-app为例。

首先，npx 将create-react-app临时下载到node_modules里；
然后，执行create-react-app my-app；最后，删除node_modules\.bin里的create-react-app二进制运行文件。所以，以后再次执行上面的命令，会重新下载create-react-app并且在本地不会遗留create-react-app安装包。

原理

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

# 等同于 ls
npx ls

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

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

参数

跟npm一样，npx也可以指定运行参数，可以执行npx --help查看完整的参数列表及说明：

从 npm 的可执行包执行命令

  npx [选项] <命令>[@版本] [命令的参数]...

  npx [选项] [-p|--package <包>]... <命令> [命令的参数]...

  npx [选项] -c '<命令的字符串>'

  npx --shell-auto-fallback [命令行解释器]


选项：
  --package, -p          包安装的路径                                   [字符串]
  --cache                npm 缓存路径                                   [字符串]
  --always-spawn         Always spawn a child process to execute the command.
                                                                          [布尔]
  --no-install           如果有包缺失，跳过安装                           [布尔]
  --userconfig           当前用户的 npmrc 路径                          [字符串]
  --call, -c             像执行 `npm run-script` 一样执行一个字符串     [字符串]
  --shell, -s            执行命令用到的解释器，可选     [字符串] [默认值: false]
  --shell-auto-fallback  产生“找不到命令”的错误码
                                    [字符串] [可选值: "", "bash", "fish", "zsh"]
  --ignore-existing      忽略 $PATH 或工程里已有的可执行文件，这会强制使 npx
                         临时安装一次，并且使用其最新的版本               [布尔]
  --quiet, -q            隐藏 npx 的输出，子命令不会受到影响              [布尔]
  --npm                  为了执行内部操作的 npm 可执行文件
  [字符串] [默认值: "/Users/guangming/.nvm/versions/node/v14.17.0/lib/node_modul
                                                         es/npm/bin/npm-cli.js"]
  --node-arg, -n         调用 node 二进制时使用额外的 node 参数。       [字符串]
  --version, -v          显示版本号                                       [布尔]
  --help, -h             显示帮助信息                                     [布尔]

所以，还等什么呢？npx赶紧用起来吧！

npx使用概览

知识准备

npx使用

npx执行过程

原理

参数