工程化与构建 —— 现代开发的基建

1.1 Node 是什么

• Node = V8 引擎（Google 的 JS 引擎）+ 操作系统能力（文件、网络、进程）。
• 它让 JS 能在服务器、命令行运行 → 前端工具（打包、测试、脚手架）全部用它。
• Node 是单线程 + 事件驱动 + 非阻塞 I/O：擅长高并发 I/O（读写文件、网络请求），不擅长 CPU 密集计算。

// 最简单的 Node 脚本：node hello.js 运行
const fs = require("fs");           // 文件系统模块
const path = require("path");       // 路径模块
console.log("你好，Node！");
console.log(__dirname);             // 当前文件所在目录

1.2 常用内置模块

// 读取文件（现代写法：Promise）
const fs = require("fs/promises");
async function readConfig() {
  const data = await fs.readFile("./config.json", "utf-8");
  return JSON.parse(data);
}

2.1 语义化版本（SemVer）

// 版本号格式：主版本.次版本.补丁版本（如 4.17.21）
// 主版本：不兼容的破坏性变更（升级要谨慎）
// 次版本：向后兼容的新功能
// 补丁版本：向后兼容的 bug 修复

// package.json 里的版本范围写法：
"react": "^18.2.0"     // ^：允许 18.x.x（次版本内的更新），不允许 19.x
"react": "~18.2.0"     // ~：只允许 18.2.x（补丁更新）
"react": "18.2.0"      // 精确锁定
"react": "*"           // 任意版本（千万别用）

2.2 npm 常用命令

npm init -y              // 初始化项目（生成 package.json）
npm install // npm i          // 安装 package.json 里的所有依赖
npm i react              // 安装并写入 dependencies（生产依赖）
npm i -D typescript      // -D：写入 devDependencies（开发依赖，构建产物不包含）
npm run dev              // 运行 scripts 里的 dev 脚本
npm outdated             // 查看依赖是否有新版本
npm audit                // 检查依赖安全漏洞

3.1 日常工作流（每天重复）

// 拉取最新 → 建分支 → 改代码 → 提交 → 推送 → 提 PR
git pull                        // 拉取远程更新
git checkout -b feature/login   // 新建并切换分支（命名：feature/ 前缀）
git add .                       // 暂存改动
git commit -m "feat: 新增登录功能"  // 提交（遵循提交规范）
git push -u origin feature/login // 推送并建立关联
// 然后在远程（GitHub/GitLab）创建 Pull Request，走代码评审

3.2 分支模型与合并策略

// 冲突解决：合并时双方改了同一处 → 打开文件找 <<<<<<< 标记，手工保留需要的部分
<<<<<<< HEAD
当前分支的内容
=======
被合并分支的内容
>>>>>>> feature/login
// 解决后：git add . && git commit（不要慌，冲突是常态）

4.1 模块化的四代演进

4.2 打包的核心流程（面试必答）

5.1 开发时：原生 ESM，按需编译

Webpack 开发时要把所有模块打包成一个 bundle 才能启动——项目越大越慢（「启动 30 秒」梗的来源）。Vite 的思路完全不同：

• 开发服务器不打包：直接利用浏览器原生 ESM，你 import 谁，就只编译谁。
• 按需编译：只有浏览器请求到某个模块时才编译它，所以启动几乎是瞬时的。
• 依赖预构建：第三方库（几百个文件的大库）用 esbuild 预打包成 ESM，减少浏览器请求数。

5.2 热更新（HMR）的原理

• 传统：修改一个文件 → 整个页面刷新（状态丢失，体验差）。
• Vite：模块变化时，WebSocket 通知浏览器，只替换变化的模块，页面状态保留。
• 实现基础：ESM 的 import 是模块级依赖，可以精确找到「谁依赖了它」，只更新相关部分。

6.1 四大核心概念

// webpack.config.js 最小示例
module.exports = {
  mode: "development",                    // development / production
  entry: "./src/index.js",
  output: { path: __dirname + "/dist", filename: "bundle.js" },
  module: {
    rules: [
      { test: /\.js$/, use: "babel-loader", exclude: /node_modules/ },
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: "./index.html" })],
  devServer: { port: 3000, proxy: { "/api": "http://localhost:8080" } },
};

7.1 四大工具的分工

// package.json 里的钩子配置（husky + lint-staged）
{
  "lint-staged": {
    "*.{js,ts,jsx,tsx}": ["eslint --fix", "prettier --write"],
    "*.{css,html,md}": ["prettier --write"]
  }
}
// 效果：每次 git commit 前自动修复格式，坏代码进不了仓库

8.1 为什么需要 TS

• JS 是弱类型：参数传错类型不报错，运行时才炸，排查成本高。
• TS = JS + 类型系统：编译期就能发现错误，代码即文档，重构更安全。
• TS 是「编译到 JS」的超集，浏览器不认识 TS，最终会编译成 JS。

// 基础类型标注
let age: number = 25;
let name: string = "张三";
let isDone: boolean = true;
let list: number[] = [1, 2, 3];

// 接口：定义对象结构
interface User {
  id: number;
  name: string;
  email?: string;        // ?: 可选属性
  readonly createdAt: Date;  // readonly：只读
}
function greet(user: User): string {   // 参数类型 + 返回值类型
  return `你好，${user.name}`;
}

8.2 泛型（进架构必备）

// 泛型：类型像参数一样传进去，让函数复用且保持类型安全
function identity<T>(value: T): T {
  return value;
}
const num = identity<number>(42);   // T = number
const str = identity("hello");      // 自动推断 T = string

// 经典应用：API 响应包装
interface ApiResponse<T> {
  code: number;
  data: T;
  message: string;
}
// 用一次，处处类型安全：
const res = await get<User[]>("/api/users");  // res.data 是 User[]

9.1 概念：CI 与 CD

• CI（持续集成）：每次代码合并自动跑检查——类型、Lint、单测、构建。问题在合并前就被拦住。
• CD（持续交付/部署）：通过检查后自动构建产物、部署到测试/生产环境。

// GitHub Actions 示例：.github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci                 // 按锁文件精确安装
      - run: npm run lint
      - run: npm run typecheck
      - run: npm test
      - run: npm run build
      // 全部通过 → 绿色 ✅；任一失败 → 红色 ❌ 拦住合并

项目一：从零搭建一个规范化的 Vite 工程

要求：① npm create vite@latest 创建项目并理解每个文件；② 接入 ESLint + Prettier + husky + lint-staged，提交不规范代码会被拦；③ 配置路径别名（@/ 指向 src）；④ 配置代理解决开发期跨域；⑤ 加 TypeScript 严格模式；⑥ 配好提交规范（commitlint）。验收：随便写点代码，观察「提交时自动修复、commit 信息被校验」的效果。

项目二：手写一个迷你打包器

用 Node 写一个 100 行左右的打包器：① 读取入口文件；② 用正则或简单的解析找到 import；③ 递归生成依赖图；④ 把模块包装成函数，生成一个可运行的 bundle.js。做完你会彻底理解「打包」到底在做什么。