npx 使用指南
NPX (Node Package eXecute) 是一个用于执行 npm 包的工具，让你无需全局安装即可运行包中的可执行文件。
# 📋 目录
# 什么是 npx
NPX 允许你：
- 🚀 无需全局安装即可运行 npm 包
- 🔄 使用不同版本的包
- 🎯 执行一次性命令
- 📦 运行本地安装的包
- 🔧 创建和执行临时脚本
# 安装 npx
# 自动安装
NPX 通常随 npm 一起安装（npm 5.2+ 版本）：
# 检查 npm 版本
npm --version
# 如果版本低于 5.2，需要手动安装
npm install -g npx
1
2
3
4
5
2
3
4
5
# 验证安装
# 检查 npx 版本
npx --version
# 查看帮助信息
npx --help
1
2
3
4
5
2
3
4
5
# 基础命令
# 运行远程包
# 运行远程包（不安装到本地）
npx create-react-app my-app
npx create-vue my-project
npx cowsay "Hello World"
# 运行指定版本的包
npx create-react-app@latest my-app
npx [email protected] --version
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 运行本地包
# 运行本地安装的包
npx eslint src/
npx jest --watch
npx webpack --mode development
# 运行本地 node_modules 中的包
npx ./node_modules/.bin/eslint src/
1
2
3
4
5
6
7
2
3
4
5
6
7
# 运行脚本
# 运行 package.json 中的脚本
npx npm-run-all build test
# 运行特定脚本
npx cross-env NODE_ENV=production npm run build
1
2
3
4
5
2
3
4
5
# 常用参数
# --yes / -y
# 自动确认，跳过交互式提示
npx --yes create-react-app my-app
npx -y degit user/repo my-project
1
2
3
2
3
# --no-install
# 不安装包，只使用缓存或本地版本
npx --no-install create-react-app my-app
1
2
2
# --ignore-existing
# 忽略本地已存在的版本，强制使用远程版本
npx --ignore-existing typescript --version
1
2
2
# --package / -p
# 指定要运行的包
npx --package=typescript tsc --version
npx -p typescript -p jest tsc --version
1
2
3
2
3
# --node-options
# 传递 Node.js 选项
npx --node-options="--max-old-space-size=4096" webpack
1
2
2
# --prefer-offline
# 优先使用离线缓存
npx --prefer-offline create-react-app my-app
1
2
2
# 使用场景
# 1. 脚手架工具
# React 项目
npx create-react-app my-react-app
npx create-react-app my-app --template typescript
# Vue 项目
npx @vue/cli create my-vue-app
npx create-vue my-vue-project
# Next.js 项目
npx create-next-app@latest my-next-app
npx create-next-app@latest my-app --typescript --tailwind --eslint
# Nuxt.js 项目
npx nuxi@latest init my-nuxt-app
# Svelte 项目
npx degit sveltejs/template my-svelte-app
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 2. 代码质量工具
# ESLint
npx eslint src/ --fix
npx eslint --init
# Prettier
npx prettier --write src/
npx prettier --check src/
# TypeScript
npx tsc --init
npx tsc --noEmit
# Stylelint
npx stylelint "src/**/*.css"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 3. 构建和打包工具
# Webpack
npx webpack --mode production
npx webpack-cli init
# Vite
npx vite build
npx create-vite my-project
# Parcel
npx parcel build src/index.html
# Rollup
npx rollup --config rollup.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 4. 测试工具
# Jest
npx jest --watch
npx jest --coverage
# Cypress
npx cypress open
npx cypress run
# Playwright
npx playwright test
npx playwright install
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 5. 开发工具
# HTTP 服务器
npx http-server dist/
npx serve dist/
# 代码生成器
npx plop
npx hygen component new MyComponent
# 数据库工具
npx prisma generate
npx prisma migrate dev
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 6. 一次性命令
# 查看包信息
npx npm-check-updates
npx bundlephobia react
# 性能分析
npx lighthouse http://localhost:3000
npx webpack-bundle-analyzer dist/static/js/*.js
# 工具类命令
npx degit user/repo my-project
npx rimraf node_modules
npx cross-env NODE_ENV=production
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 最佳实践
# 1. 项目初始化
# 使用最新的脚手架工具
npx create-react-app@latest my-app
npx @vue/cli@latest create my-vue-app
# 指定模板和配置
npx create-next-app@latest my-app --typescript --tailwind --eslint --app
1
2
3
4
5
6
2
3
4
5
6
# 2. 开发环境
# 使用本地安装的包
npx eslint src/
npx jest --watch
npx webpack serve --mode development
# 避免全局污染
npx typescript --version # 而不是 npm install -g typescript
1
2
3
4
5
6
7
2
3
4
5
6
7
# 3. CI/CD 环境
# 在 CI 中使用 npx
npx --yes create-react-app my-app
npx --prefer-offline eslint src/
npx --no-install jest --ci
1
2
3
4
2
3
4
# 4. 脚本优化
# package.json 中的脚本
{
"scripts": {
"build": "npx webpack --mode production",
"test": "npx jest",
"lint": "npx eslint src/",
"format": "npx prettier --write src/"
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 5. 版本管理
# 使用特定版本
npx [email protected] --version
npx [email protected] my-app
# 使用最新版本
npx create-react-app@latest my-app
npx typescript@latest --version
1
2
3
4
5
6
7
2
3
4
5
6
7
# 故障排除
# 常见问题
# 1. 网络连接问题
# 使用离线模式
npx --prefer-offline create-react-app my-app
# 设置 npm 镜像
npm config set registry https://registry.npmmirror.com
npx create-react-app my-app
1
2
3
4
5
6
2
3
4
5
6
# 2. 权限问题
# macOS/Linux 权限问题
sudo npx create-react-app my-app
# 或者使用 npx 的 --userconfig 选项
npx --userconfig ~/.npmrc create-react-app my-app
1
2
3
4
5
2
3
4
5
# 3. 缓存问题
# 清理 npm 缓存
npm cache clean --force
# 重新运行
npx create-react-app my-app
1
2
3
4
5
2
3
4
5
# 4. 版本冲突
# 忽略本地版本
npx --ignore-existing create-react-app my-app
# 指定特定版本
npx [email protected] my-app
1
2
3
4
5
2
3
4
5
# 5. 内存不足
# 增加 Node.js 内存限制
npx --node-options="--max-old-space-size=4096" webpack
1
2
2
# 调试命令
# 查看详细信息
npx --verbose create-react-app my-app
# 查看包信息
npm info create-react-app
# 查看缓存位置
npm config get cache
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 完整命令参考
# 基础命令
| 命令 | 说明 |
|---|---|
npx <package> | 运行指定包 |
npx <package>@<version> | 运行指定版本的包 |
npx <package>@latest | 运行最新版本的包 |
npx --version | 显示 npx 版本 |
npx --help | 显示帮助信息 |
# 参数选项
| 参数 | 简写 | 说明 |
|---|---|---|
--yes | -y | 自动确认，跳过交互式提示 |
--no-install | 不安装包，只使用缓存或本地版本 | |
--ignore-existing | 忽略本地已存在的版本 | |
--package | -p | 指定要运行的包 |
--node-options | 传递 Node.js 选项 | |
--prefer-offline | 优先使用离线缓存 | |
--verbose | 显示详细信息 |
# 实用示例
# 项目脚手架
npx create-react-app my-app --template typescript
npx @vue/cli create my-vue-app --router --vuex
npx create-next-app@latest my-app --typescript --tailwind
# 开发工具
npx eslint src/ --fix
npx prettier --write src/
npx jest --watch
npx webpack serve --mode development
# 构建部署
npx webpack --mode production
npx serve dist/
npx lighthouse http://localhost:3000
# 一次性命令
npx cowsay "Hello World"
npx rimraf node_modules
npx cross-env NODE_ENV=production npm run build
# 版本管理
npx [email protected] --version
npx create-react-app@latest my-app
npx --ignore-existing eslint src/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 与其他工具对比
| 工具 | 用途 | 优势 |
|---|---|---|
npm install -g | 全局安装包 | 持久化安装 |
npx | 临时运行包 | 不污染全局环境 |
yarn dlx | Yarn 的 npx 等价物 | 与 Yarn 生态集成 |
pnpm dlx | PNPM 的 npx 等价物 | 与 PNPM 生态集成 |
通过这个完整的 npx 使用指南，你可以高效地使用各种 npm 包，提升开发效率！ 🚀
上次更新: 2025/10/12, 10:31:39