第3章开发环境搭建

第1章：开发环境搭建——Node.js与包管理器安装配置

说实话，每次带新人入行，我第一件事就是帮他们把开发环境搭好。这步要是没弄对，后面全是坑。我自己就见过太多人因为环境问题卡了一整天，最后发现只是Node版本不对。

好，咱们开始吧。

1.1 Node.js：前端开发的基石

Node.js是什么？简单说，它让JavaScript跑在了服务器上。但对我们前端来说，它更像一个工具箱——没有它，你就没法用npm装包，没法跑构建脚本，甚至连React项目都创建不了。

核心要点：Node.js是所有前端工具链的运行时基础。没有它，Vite、Webpack、Babel全都玩不转。

安装Node.js

我个人习惯用nvm（Node Version Manager）来管理Node版本。为什么？因为不同项目可能依赖不同版本的Node，你总不能每次都卸载重装吧？

安装步骤：

下载nvm：去github.com/nvm-sh/nvm 找最新版本
安装nvm：运行安装脚本，重启终端
安装Node：nvm install 18.17.0（我推荐LTS版本）
切换版本：nvm use 18.17.0

# 安装nvm（macOS/Linux）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

# 安装Node.js LTS版本
nvm install --lts

# 验证安装
node -v   # 输出：v18.17.0
npm -v    # 输出：9.6.7

小技巧：Windows用户可以用nvm-windows，用法基本一样。我曾经在Windows上折腾过，嗯，还是nvm-windows最省心。

1.2 包管理器：npm、yarn、pnpm怎么选？

包管理器说白了就是帮你下载和管理第三方代码库的工具。npm是Node自带的，yarn和pnpm是后来者。你可能会问：「到底用哪个？」

我直接给结论：

特性	npm	yarn	pnpm
安装速度	中等	较快	最快（硬链接）
磁盘占用	高（重复安装）	高（重复安装）	低（共享存储）
安全性	一般	较好	最好（严格隔离）
生态兼容性	最好	好	好

我个人推荐：新项目用pnpm，老项目保持原样。为什么？pnpm的硬链接机制能省大量磁盘空间，而且安装速度真的快。我在一个大型项目里试过，pnpm比npm快了将近3倍。

配置pnpm

# 全局安装pnpm
npm install -g pnpm

# 验证
pnpm -v   # 输出：8.6.0

# 设置镜像源（国内用户建议）
pnpm config set registry https://registry.npmmirror.com

注意：如果你在用yarn，别急着换。yarn的workspace功能在monorepo项目里依然很能打。工具没有绝对的好坏，适合场景才是关键。

1.3 搭建项目脚手架：Vite vs CRA

脚手架是什么？就是帮你一键生成项目骨架的工具。你不用从零开始写webpack配置，不用手动创建目录结构——这些脏活累活，脚手架全包了。

目前主流的选择有两个：Vite和Create React App（CRA）。

Vite：新一代构建工具

Vite是我现在最常用的。它开发时用ES Module做热更新，快到飞起。我记得第一次用Vite启动项目，1秒不到就看到了页面，当时我还以为出bug了。

# 使用Vite创建React项目
pnpm create vite my-app --template react

# 进入项目
cd my-app

# 安装依赖
pnpm install

# 启动开发服务器
pnpm run dev

CRA：老牌选择

CRA虽然现在更新慢了，但胜在稳定。如果你团队里都是新手，CRA的零配置体验确实友好。

# 使用CRA创建项目
npx create-react-app my-app

# 启动
cd my-app
npm start

我的建议：新项目首选Vite。CRA的Webpack配置太臃肿了，启动一次要等十几秒，你想想看，一天下来光等启动就浪费多少时间？

1.4 ESLint与Prettier：代码规范的双保险

代码规范这事，说白了就是「大家写代码的姿势要统一」。没有规范的项目，代码风格五花八门，review起来能把你逼疯。

ESLint管「逻辑正确性」，Prettier管「格式美观度」。两者配合，效果1+1>2。

安装配置ESLint

# 安装ESLint
pnpm add -D eslint

# 初始化配置
npx eslint --init

# 选择配置：
# - 使用流行的风格指南：Airbnb
# - 项目类型：React
# - 配置文件格式：JavaScript

生成的.eslintrc.cjs文件大概长这样：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb',
    'airbnb/hooks',
  ],
  rules: {
    'react/react-in-jsx-scope': 'off',
    'react/jsx-filename-extension': [1, { extensions: ['.jsx'] }],
  },
};

安装配置Prettier

# 安装Prettier
pnpm add -D prettier

# 创建配置文件
echo {} > .prettierrc

.prettierrc配置示例：

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100
}

避坑指南：我曾经遇到过ESLint和Prettier规则冲突的情况——ESLint要求双引号，Prettier强制单引号，结果保存文件时两个插件互相打架。解决方案是安装eslint-config-prettier，让ESLint关掉和Prettier冲突的规则。

# 解决冲突
pnpm add -D eslint-config-prettier

# 在.eslintrc.cjs中
extends: [
  'airbnb',
  'airbnb/hooks',
  'prettier',  // 必须放在最后
],

配置VS Code自动修复

在项目根目录创建.vscode/settings.json：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

重要：记得把.vscode文件夹加入版本控制。这样团队所有人都用同一套配置，不会出现「我本地没问题啊」的尴尬情况。

1.5 验证环境是否搭建成功

好，所有东西都装完了。怎么确认环境没问题？跑一遍这个流程：

打开终端，输入node -v，看到版本号
输入pnpm -v，看到版本号
用Vite创建一个新项目，pnpm run dev能正常启动
在项目中随便写个变量，故意加个分号，保存后Prettier自动去掉
写个未使用的变量，ESLint报红提示

如果以上5步都通过，恭喜你，环境搭建完成！

说实话，环境搭建这步虽然枯燥，但它是整个项目的根基。我见过太多人因为跳过这步，后面debug到怀疑人生。嗯，花半小时把环境配好，后面能省你三天时间。

📚 课程目录

第1章：开发环境搭建——Node.js与包管理器安装配置

1.1 Node.js：前端开发的基石

安装Node.js

1.2 包管理器：npm、yarn、pnpm怎么选？

配置pnpm

1.3 搭建项目脚手架：Vite vs CRA

Vite：新一代构建工具

CRA：老牌选择

1.4 ESLint与Prettier：代码规范的双保险

安装配置ESLint

安装配置Prettier

配置VS Code自动修复

1.5 验证环境是否搭建成功