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，不会受全局干扰