npx 与 npm 区别

一、 一句话总结区别

|-----|----------------------------|
| 工具 | 作用 |
| npm | 安装包（比如下载 `@angular/cli`） |
| npx | 执行包里的命令（比如运行 `ng` 命令） |

👉 就像：

`npm` 是"下载软件"

`npx` 是"运行软件"

二、详细对比

|---------|----------------------|------------------------------------|
| 特性 | npm | npx |
| 全称 | Node Package Manager | Node Package execute |
| 主要用途 | 安装、管理依赖包 | 执行包中的命令 |
| 是否需要先安装 | 是（`npm install`） | 否（可直接运行） |
| 执行命令 | ❌不能直接运行 `ng` | 可以运行 `ng`、`create-react-app` 等 |
| 自动安装 | ❌ | 如果没安装，会临时下载并运行 |

三、 举个实际例子

场景：你想创建一个 Angular 项目

❌ 旧方式（依赖全局安装）

npm install -g @angular/cli     # 先全局安装
ng new my-app                   # 再运行命令

问题：

• 全局只能有一个版本

• 容易版本冲突（比如你项目是 v15，但全局是 v10）

✅ 现代方式（使用 `npx`）

npx @angular/cli@latest new my-app

npx 会自动：

1. 检查本地有没有 `@angular/cli`

2. 没有？→ 临时下载 `@angular/cli@latest`

3. 运行 `ng new my-app`

4. 完成后可清理缓存

无需全局安装，每个项目用自己需要的版本。

四、 npx 的强大功能

1. 无需全局安装，直接运行命令

npx create-react-app my-app
npx vue@3 create my-vue-app
npx http-server

这些命令都不需要你提前 `npm install -g`。

2. 自动使用本地包（优先）

如果你的项目已经安装了 `@angular/cli`，运行：

npx ng serve

npx 会：

• 先找 `node_modules/.bin/ng`

• 找到就用本地的 CLI

• 找不到才去下载

前提是：确保你用的是项目指定的版本~

3. 临时运行某个版本的命令

npx @angular/cli@10 ng new old-project --strict=false
npx @angular/cli@15 ng new new-project

可以同时测试不同版本的 CLI，互不干扰。

4. 运行一次性工具

npx serve                    # 启动一个静态服务器
npx cowsay "Hello!"          # 打印牛说话（趣味工具）
npx json-server --watch db.json  # 模拟 API

用完就走，不用安装。

五、 `npx` vs `npm run` 的区别

|---------------|-----------------------------------------------|
| 命令 | 说明 |
| npx ng serve | 直接执行 `ng` 命令（从本地或远程） |
| npm run serve | 执行 `package.json` 中定义的 `scripts.serve` 脚本 |

例如：

"scripts": {
  "serve": "ng serve"
}

那么：

npm run serve

等价于：

npx ng serve

推荐在 `package.json` 中定义脚本，然后用 `npm run` 调用。

六、 最佳实践（推荐）

|-------|-------------------------------------|
| 场景 | 做法 |
| 创建新项目 | npx @angular/cli@latest new my-app |
| 启动项目 | npm run start`（或 `npx ng serve`） |
| 构建项目 | npm run build |
| 查看版本 | npx ng version |
| 临时工具 | npx http-server |

七、 总结

|----------------|-------------------------|
| 问题 | 回答 |
| npx 是什么 | 用来执行npm 包中的命令 |
| npx和 npm区别 | `npm` 是安装，`npx` 是运行 |
| 为什么要用 `npx`？ | 避免全局安装、解决版本冲突、临时使用工具 |
| npx ng` 安全吗 | 安全，优先使用本地 CLI，不会受全局干扰 |