为什么 npx @vue/cli 可以正常执行？npx 执行的过程是怎样的

Question

看了 create-react-app 的文档，看他们是提供了三种创建程序的方式： yarn create react-app my-app、npm init react-app my-app 、npx create-react-app my-app。搞不清楚这三种形式的底层执行原理。

其中 npx 的命令最为困惑：猜测是先下载 npx 后面的包，再执行对应的 bin 命令。

但是当我执行 npx @vue/cli的时候就非常困惑， package.json中的 name 和 bin 的 key 不一致。为啥可以执行呢？

Answer 1

NPX 的文档在这里，也可以通过 npx --help 查看 npx 的用法。

npx 会在 node_modules 中去找到正确的命令来运行（我理解是 node_modules/.bin 下的脚本）。如果没有 node_modules 或者没有在 node_modules 中找到，npx 会去 npm 库中下载推断的包，然后运行其中提供的命令。当然有时候 npx 可能会推断出一个错误的包，这时候可以通过 -p 指定包及其版本（具体看文档）。

如果 npx 自动下载了包，这些包据说是在 ~/.npm/_npx (Linux) 或者 $env:LocalAppData/npm-cache/_npx (Windows Powershell) 或者 %LocalAppData%/npm-cache/_npx (Wiondows Cmd / Windows 资源管理器地址栏)。

以 TypeScript Comile 命令 tsc 为例：

TypeScript 包提供了 tsc 命令。但是有一个叫 tsc 的包，也提供了 tsc 命令，所以直接运行 npx tsc 会找到 tsc 这个包并提示是否安装；但是如果指定了包（通过 -p 或 --package 参数），npx 就知道该去哪个包来找了。

> npx tsc --version
Need to install the following packages:
  tsc
Ok to proceed? (y)

> npx --package typescript tsc --version
Need to install the following packages:
  typescript
Ok to proceed? (y)