npm与npx的区别和用法

luobo · 2025 年7 月 29 日 05:21

一句话总结

npm (Node Package Manager)：是 包管理器，像一个大型工具箱，主要负责下载、安装和管理项目所需的各种工具（包）。
npx (Node Package Execute)：是 包执行器，像一个“一次性”的魔法棒，主要负责直接执行某个工具（包），用完就扔，不留在你的项目中。

想象一下你要在家修一个东西：

npm 的方式：
- 你觉得将来可能还会用到电钻，所以你决定去商店（npm 仓库）买一个电钻（npm install some-tool）。
- 电钻买回来后，就放在你家的工具箱（node_modules 文件夹）里了。
- 每次要用，你都得去工具箱里把它拿出来（在 package.json 的 scripts里配置或输入完整路径）。
- 优点：随时可用。
- 缺点：占地方（磁盘空间），而且你买的电钻版本可能过时了，除非你记得去更新。
npx 的方式：
- 你只是想在墙上打一个洞，以后可能再也不用了。
- 你打电话给一个“工具租赁服务”（npx），说：“给我租一个最新款的电钻用一下”（npx some-tool）。
- 服务员（npx）立刻给你送来一个最新的电钻，你用它打了洞，然后服务员马上就把它收走了。
- 优点：不占地方，保证用的是最新款，非常方便。
- 缺点：每次用都要重新“租”（下载），如果频繁使用同一个工具，效率不如直接买下来。

npx 是 npm v5.2.0 版本之后自带的一个命令，所以你安装了较新版本的 Node.js 和 npm，就自动拥有了 npx。

依赖管理 (Dependency Management)
- npm install <package-name>: 将包下载并安装到项目的 node_modules 文件夹中，并将其记录在 package.json 和 package-lock.json 文件里。这是项目开发的核心，确保每个开发者都使用相同版本的依赖。
- 这些包可以是库（如 React, Lodash）或开发工具（如 Webpack, ESLint, Prettier）。
运行脚本 (Script Running)
- npm run <script-name>: 执行在 package.json 文件 scripts 部分定义的命令。
- 例如，在 package.json 中配置：
```
"scripts": {
  "test": "mocha"
}
```
- 当你运行 npm run test 时，npm 会自动在 ./node_modules/.bin 目录中寻找并执行 mocha 命令。这是执行本地安装的包的主要方式。

npm 的主要问题（npx 旨在解决的痛点）：

全局污染：为了方便地在命令行直接使用某个工具（如 create-react-app），你可能会选择全局安装 (npm install -g create-react-app)。但这会污染你的全局环境，不同项目可能需要不同版本的工具，容易造成版本冲突。
不便的本地执行：如果不全局安装，那么执行本地包的命令就很麻烦，需要输入完整路径 (./node_modules/.bin/eslint .) 或者必须在 package.json 中配置 scripts。

npx 的出现就是为了解决上述问题，它的工作流程非常智能：

当你运行 npx <command> 时，它会：

首先，检查本地项目中 (./node_modules/.bin) 是否存在该命令。
- 如果存在，就直接执行它。这使得 npx 可以作为一种便捷的方式来运行本地安装的工具，而无需配置 scripts。
- 例如，你的项目安装了 eslint，你可以直接运行 npx eslint . 来检查代码，比输入完整路径方便多了。
如果本地项目中不存在，npx 会去 npm 仓库查找。
- 它会找到对应的包，下载到一个临时的目录中。
- 执行该包的命令。
- 执行完毕后，将临时的包删除。

npx 的主要优点：

避免全局安装：对于那些只用一次的脚手架工具（如 create-react-app, vite, vue-cli），npx 是完美的选择。你无需 npm install -g create-react-app，直接运行 npx create-react-app my-app 即可。这既不会污染你的全局环境，又能保证你每次使用的都是最新版本的脚手架。
方便执行本地包：如上所述，npx eslint . 比 ./node_modules/.bin/eslint . 简洁得多。
测试不同的包/版本：你可以用 npx 快速测试一个包的不同版本，而无需在你的项目中真实地安装或切换它们。例如：npx [email protected] 就会临时使用 5.2.0 版本的 Mocha 来运行测试。

特性	`npm`	`npx`
主要功能	包管理器 (Package Manager)	包执行器 (Package Executer)
核心命令	`npm install`, `npm update`, `npm uninstall`	`npx <command>`
安装方式	持久化安装，安装到 `node_modules` 或全局	临时执行，除非本地已安装，否则用完即删
主要用途	管理项目的依赖库（如 React, Lodash）	运行 CLI 工具、脚手架、执行一次性命令
对全局环境	`npm -g` 会污染全局环境	不污染全局环境，是更好的替代方案
版本	执行已安装的特定版本	默认执行最新版本（如果未在本地安装）

使用 npm 的场景：
- 为你的项目添加一个新的依赖库：npm install react
- 安装所有项目依赖：npm install
- 运行在 package.json 中定义好的脚本：npm run build
- 更新项目依赖：npm update
使用 npx 的场景：
- 初始化一个新项目：npx create-react-app my-app 或 npx create-vite
- 在不污染全局的情况下，运行一个有趣的命令：npx cowsay "Hello World"
- 直接运行本地安装的开发工具：npx prettier --write .
- 快速试用一个 CLI 工具，看看它好不好用。

总而言之，npm 和 npx 是相辅相成的工具，它们共同构成了现代前端开发工作流的重要部分。npm 负责管理你项目的“固定资产”，而 npx 则负责处理那些“临时性”或“一次性”的任务。