npx 入门教程

如果你刚开始学习 JavaScript 或 Node.js，很可能已经接触过 npm 来安装各种工具和库，有时候我们可能只是想快速运行某个工具看一下效果，不想全局安装它？

另外还要一种情况，不同项目需要不同版本的命令行工具，全局安装总会导致冲突？

npx 就是为解决这些问题而生的强大工具。

npx 是 npm 5.2.0 版本引入的命令行工具，它让你可以执行 npm 包而无需全局安装。

简单来说，npx 是一个用于执行 Node.js 包的便捷工具，它的核心设计哲学是：无需永久安装，即可临时使用。

一个生动的比喻

想象一下你家的工具箱：

• npm 就像是你的 工具仓库管理员。当你 npm install -g some-tool 时，相当于告诉管理员：把这个工具买回来，永远放在我们家车库（全局环境）里。
• npx 则像一个 即时跑腿服务。当你 npx some-tool 时，相当于告诉跑腿小哥：去帮我找个 some-tool 来用一下，用完就还回去，别放我家。

使用 npx，你可以运行任何来自 npm 注册中心的包，而无需先将其安装到你的电脑上。

为什么要用 npx？

1. 解决全局包污染和版本冲突

在 npx 出现之前，如果你想在命令行中使用像 create-react-app、vue-cli 这样的脚手架工具，你必须先全局安装它：npm install -g create-react-app。

这带来了两个问题：

• 污染全局环境：安装的包会长期占用你的磁盘空间，即使你很久不用。
• 版本冲突：如果你正在开发两个项目，一个需要 create-react-app@3，另一个需要 create-react-app@5，全局安装只能保留一个版本，这会导致其中一个项目无法正常工作。

npx 允许你直接指定版本运行，用完即走，完美避开这些问题。

2. 轻松运行项目本地安装的包

在项目目录下，你通过 npm install some-cli-tool 安装的包（会出现在 node_modules/.bin/ 目录下），通常只能通过复杂的路径或 npm scripts 来调用。而 npx 可以智能地优先使用当前项目下的本地版本，使得调用变得非常简单。

3. 安全、便捷地尝试新工具

想测试一个新发布的命令行工具？直接用 npx new-cool-tool 试试看吧！如果不合适，它不会在你的电脑上留下任何痕迹。

npx 的工作原理

当你执行 npx <command> 时，它会按照以下逻辑寻找并执行命令：

这个过程对用户是完全透明的，你只需要享受它带来的便利。

如何使用 npx？

环境准备

确保你的 Node.js 版本 >= 5.2.0，可以通过以下命令检查：

node --version
npm --version
# 如果 npm 版本 >= 5.2.0，npx 就已经可用了
npx --version

基础语法

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

常用选项参数说明

实战应用示例

让我们通过几个具体的例子，看看 npx 如何大显身手。

示例 1：运行一次性命令（最常用场景）

你想使用 cowsay 这个有趣的小工具在终端里让奶牛说话，但你不想安装它。

步骤 1：直接使用 npx 运行

npx cowsay hello

代码解释：npx 会检查本地是否有 cowsay，没有则自动从 npm 下载，执行完命令后自动清理。

预期运行结果：

npx cowsay hello

Need to install the following packages:
cowsay@1.6.0
Ok to proceed? (y) y
 _______
< hello >
 -------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

步骤 2：指定版本运行 如果你想用某个特定版本：

npx cowsay@1.4.0 hello1.4.0

输出：

 ____________
< hello1.4.0 >
 ------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

示例 2：使用脚手架创建项目

以创建 React 项目为例：

传统方式（不推荐再使用）：

npm install -g create-react-app  # 全局安装
create-react-app my-app          # 使用

这种安装方式的问题：

• 全局装一堆工具
• 版本乱
• 电脑越来越臃肿

现代方式（使用 npx）：

npx create-react-app my-app

代码解释：npx 会临时获取最新版本的 create-react-app，用它来搭建项目骨架，完成后不会将 create-react-app 留在你的全局环境中。下次创建项目时，依然会获取最新版。

示例 3：运行项目本地工具

假设你在一个项目中安装了 webpack 作为开发依赖 (npm install webpack --save-dev)。

传统调用方式（很麻烦）：

# 需要输入冗长的路径
./node_modules/.bin/webpack --version

# 或者在 package.json 中配置 scripts
# "scripts": { "build": "webpack" }
# 然后运行
npm run build

使用 npx（非常简洁）：

npx webpack --version
# 或直接运行构建
npx webpack

代码解释：npx 会智能地优先找到项目 node_modules 下的 webpack 来执行。

示例 4：执行来自 GitHub 的脚本

npx 甚至可以运行 GitHub gist 或仓库中的代码。

npx https://gist.github.com/username/abcdefg

请注意，运行来自互联网的未知代码存在安全风险，务必确保来源可信。

npx 最核心的三个能力

1、直接运行任何 npm 包

通用格式：

npx 包名

例子：

npx cowsay hello

会直接运行一个命令行小牛 🐮

2、运行项目本地依赖

很多工具只装在项目里：

npm install vite

以前你要：

./node_modules/.bin/vite

现在：

npx vite

自动帮你找到本地可执行文件

3、用最新版本执行（不污染系统）

npx create-next-app@latest my-app

永远用最新版脚手架

不用升级全局工具

最常用的 npx 场景

创建项目

npx create-react-app my-app
npx create-next-app
npx vue-cli create my-vue
npx degit user/repo

临时工具

npx eslint .
npx prettier --write .
npx serve .

运行开发服务器

npx vite
npx nodemon app.js

进阶技巧与注意事项

1. 组合使用多个包

有时一个命令需要依赖多个包。例如，你想在某个目录下启动一个简单的 HTTP 服务器，并同时用 browser-sync 实现实时重载。虽然不常见，但 npx 可以做到：

npx -p http-server -p browser-sync -c 'http-server & browser-sync start --proxy "localhost:8080" --files "**/*"'

代码解释：

• -p 指定需要准备的包。
• -c 指定要运行的完整命令字符串。

2. 注意事项

• 网络连接：第一次运行某个包时，需要从网络下载，速度取决于你的网络。
• 安全性：npx 会自动下载并执行代码。只运行你信任的源和包。
• 临时目录：下载的包存放在操作系统的临时目录，可能会被系统定期清理。