前端工具链入门：npm、pnpm、npx 是什么

刚开始学前端，最容易被各种工具命令搞懵。这篇文章把最常用的几个工具讲清楚。

Node.js 是基础

一切的起点是 Node.js，它让 JavaScript 可以在浏览器之外运行（比如在终端、服务器上）。

安装 Node.js 后，会自动附带两个工具：

• npm：包管理器
• npx：临时运行工具

package.json 是什么

package.json 是项目的说明书，不是手写的，由工具自动生成。

类比成一份食谱：

• 菜名是什么（name）
• 需要哪些食材（dependencies）
• 怎么做这道菜（scripts）

{
  "name": "mary_blog",
  "scripts": {
    "dev": "next dev",      // pnpm dev  → 启动开发服务器
    "build": "next build",  // pnpm build → 打包生产版本
    "start": "next start"   // pnpm start → 运行生产版本
  },
  "dependencies": {
    "next": "16.2.2",       // 项目运行时必须有的库
    "react": "19.2.4"
  },
  "devDependencies": {
    "typescript": "^5"      // 只在开发时用，打包后不需要
  }
}

package.json 和 Makefile 的思路类似——给复杂命令起一个简短的别名。不同的是，scripts 运行时会自动把 node_modules/.bin/ 加入 PATH，所以可以直接写 next dev 而不用写完整路径。

npm、pnpm、yarn 的区别

三个都是包管理器，功能相同，选一个用就行：

	npm	pnpm	yarn
速度	慢	最快	中等
磁盘占用	大	小（项目间共享依赖）	中等
适用场景	默认自带	公司项目常用	逐渐减少

为什么 pnpm 省空间？

npm 会在每个项目的 node_modules/ 里各自复制一份依赖，10 个项目用同一个包就会有 10 份。pnpm 把所有版本的包存在一个全局目录，项目里用硬链接指向它，磁盘只存一份。

npx 是什么

npx 用来临时运行一个工具，不需要提前安装：

# 不用先装 create-next-app，直接用它创建项目
npx create-next-app@latest my-blog
# 用完自动清理，不占用全局空间

类比：

• npm install = 买一台榨汁机放家里
• npx = 去便利店用一次就走，不用买

为什么不能直接运行 next？

next 是安装在项目里的，不在全局 PATH 中：

next dev       # ❌ 系统找不到 next 命令
pnpm dev       # ✅ pnpm 会去 node_modules/.bin/ 里找
npx next dev   # ✅ npx 也会去 node_modules/.bin/ 里找
./node_modules/.bin/next dev  # ✅ 直接写完整路径

常用命令速查

# 安装所有依赖（根据 package.json）
pnpm install

# 安装单个包（加入 dependencies）
pnpm add react

# 安装开发依赖（加入 devDependencies）
pnpm add -D typescript

# 删除包
pnpm remove react

# 运行 scripts 里的命令
pnpm dev
pnpm build
pnpm start

create-next-app 做了什么

我们用这条命令初始化博客项目：

npx create-next-app@latest . --typescript --tailwind --app --src-dir
# .           → 在当前目录创建
# --typescript → 启用 TypeScript
# --tailwind  → 集成 Tailwind CSS
# --app       → 使用新版 App Router
# --src-dir   → 代码放在 src/ 目录

它自动生成了：

• package.json（项目配置）
• tsconfig.json（TypeScript 配置）
• src/app/（页面目录）
• public/（静态资源目录）
• node_modules/（下载好的依赖）

初始化完成后，博客的业务代码（文章列表、文章详情页、组件等）都是自己写的。