作为一个后端，学习前端，CSS 肯定是第一个劝退你的，那么前端众多包管理工具和构建工具肯定是第二个了。例如，npm、pnpm、npx、yarn，只看名字就傻傻分不清，因此借助 GTP 的能力，根据官方文档整理一下说明和用法。

1. npm (Node Package Manager)

简介

npm 是 Node.js 官方自带的包管理工具，用于安装、管理和发布 JavaScript 库。几乎所有现代前端项目都离不开它。

安装方法

npm 自带于 Node.js 安装包中。如果你已经安装了 Node.js，就已经有 npm。

bash
# 检查 npm 是否安装成功
npm -v

核心功能

• 安装依赖：自动下载、安装和管理第三方库。
• 版本管理：记录依赖版本，确保项目运行一致。
• 脚本管理：在 package.json 中编写 scripts，通过 npm run 快速执行任务。

常用命令

bash
# 初始化项目（生成 package.json 文件）
npm init       # 逐步填写项目信息
npm init -y    # 使用默认值快速初始化

# 安装依赖
npm install <包名> --save        # 安装到 dependencies
npm install <包名> --save-dev    # 安装到 devDependencies
npm install                      # 根据 package.json 安装所有依赖

# 卸载依赖
npm uninstall <包名>

# 更新依赖
npm update

# 查看全局安装的包
npm list -g --depth=0

# 清理缓存
npm cache clean --force

使用场景

• 在项目中引入第三方库（如 React、Vue）。
• 管理项目开发和生产环境中的依赖包。
• 编写并运行脚本任务。

注意事项

• 版本锁定：通过 package-lock.json 锁定依赖版本，避免在不同机器上安装不同版本的库。
• 全局 vs 本地安装：全局安装适用于工具类包（如 eslint），项目依赖应本地安装。

2. npx (Node Package Executor)

简介

npx 是 npm 附带的工具（npm v5.2+），它允许直接运行包中的可执行文件，而不需要全局安装。

安装方法

npx 自带于 npm，确认版本在 5.2.0 以上即可使用：

bash
npm -v   # 确认 npm 版本

核心功能

• 运行一次性工具：如 create-react-app，无需全局安装。
• 调用本地依赖的命令：如本地安装的 Webpack。

常用命令

bash
# 创建 React 项目
npx create-react-app my-app

# 初始化 TailwindCSS 配置
npx tailwindcss init

# 调用本地安装的 eslint
npx eslint . --fix

使用场景

• 快速运行工具（如 create-react-app、vite）。
• 避免全局安装占用空间。

注意事项

• npx 会临时下载工具到缓存中，执行完成后不会保留（除非使用 --no-install）。

3. Yarn

简介

Yarn 是一个更快速、更稳定的包管理工具，是 npm 的替代品。它解决了 npm 的一些缺点，如安装速度慢、依赖版本不一致等问题。

安装方法

通过 npm 安装：

bash
npm install --global yarn
yarn -v    # 检查版本

核心功能

• 并行下载：大幅提高依赖安装速度。
• 离线安装：可以从缓存中安装依赖。
• 版本一致性：通过 yarn.lock 文件确保团队成员安装一致的依赖版本。

常用命令

bash
# 初始化项目
yarn init -y

# 添加依赖
yarn add <包名>             # 添加到 dependencies
yarn add <包名> --dev       # 添加到 devDependencies

# 移除依赖
yarn remove <包名>

# 安装所有依赖
yarn install

# 升级依赖
yarn upgrade <包名>

# 清理缓存
yarn cache clean

使用场景

• 需要更快、更稳定的包管理体验。
• 团队合作时确保依赖安装结果一致。

注意事项

• 使用 yarn.lock 文件管理版本一致性。
• 如果和 npm 混用，可能导致依赖冲突。

4. pnpm (Performant npm)

简介

pnpm 是一种高效的包管理工具，它通过硬链接技术避免重复下载依赖，从而节省磁盘空间，提升安装速度。

安装方法

bash
npm install -g pnpm
pnpm -v   # 检查版本

核心功能

• 节省磁盘空间：共享依赖包文件。
• 快速安装：使用缓存避免重复下载。
• 内置 monorepo 支持：适合管理多个项目。

常用命令

bash
# 初始化项目
pnpm init -y

# 添加依赖
pnpm add <包名>
pnpm add <包名> --save-dev

# 移除依赖
pnpm remove <包名>

# 安装所有依赖
pnpm install

# 更新依赖
pnpm update <包名>

使用场景

• 磁盘空间有限的环境。
• 大型项目或 monorepo 管理。

注意事项

• 确保团队成员都使用 pnpm，以避免工具冲突。

5. Webpack

简介

Webpack 是一个静态模块打包工具，专为前端项目而设计。它可以将 HTML、CSS、JS 和图片等资源打包到一起。

安装方法

bash
npm install --save-dev webpack webpack-cli

核心功能

• 模块化：支持 ES6 import/export 和 CommonJS 模块。
• 资源打包：将 CSS、图片等静态资源纳入依赖。
• 插件和 Loader：通过扩展功能适配各种需求。

常用命令

bash
# 创建 webpack 配置文件
touch webpack.config.js

# 开发环境打包
npx webpack --mode development

# 生产环境打包
npx webpack --mode production

使用场景

• 大型前端项目（如 React、Vue）。
• 将开发代码优化为生产环境代码。

注意事项

• 配置较为复杂，可以结合插件（如 Babel）简化开发。

6. Vite

简介

Vite 是一种现代化的开发工具，专注于高性能和快速启动。它适合现代前端框架（如 Vue、React）。

安装方法

bash
npm create vite@latest my-app
cd my-app
npm install

核心功能

• 快速启动：冷启动速度快，支持模块热更新（HMR）。
• 按需加载：只加载需要的模块。
• 生产环境优化：内置 Rollup 打包。

常用命令

bash
# 启动开发服务器
npm run dev

# 构建生产环境
npm run build

# 本地预览构建结果
npm run preview

使用场景

• 快速开发小型到中型前端项目。
• 替代 Webpack 的现代开发环境。

注意事项

• Vite 的插件生态较新，可能不如 Webpack 丰富。

7. ESLint 和 Prettier

简介

• ESLint：用于检查 JavaScript/TypeScript 代码中的潜在错误。
• Prettier：用于格式化代码，保持团队代码风格一致。

安装方法

bash
npm install --save-dev eslint prettier

核心功能

• ESLint：发现代码中的问题，支持自定义规则。
• Prettier：自动格式化代码。

常用命令

bash
# 初始化 ESLint 配置
npx eslint --init

# 检查代码
npx eslint . --fix

# 格式化代码
npx prettier --write .

使用场景

• 团队协作时规范代码风格。
• 自动发现并修复代码中的潜在问题。

注意事项

• 配置文件需明确区分 ESLint 和 Prettier 的功能，避免冲突。