🧩 前端工程化·从零到一
体系搭建
📚 30 章 · 企业级实战路径
⚡ 效率
✓ 质量
♻️ 可维护
🧪 测试
🚀 部署
🎯 点击卡片跳转章节
01
工程化认知
什么是前端工程化、为什么需要、核心目标：效率·质量·可维护性
02
项目初始化
npm/yarn/pnpm 初始化、package.json、配置 .gitignore
03
版本控制入门
Git 基础 · init/add/commit/push/pull/branch/merge · 工作流
04
模块化开发
CommonJS & ES Module · 历史、规范、区别与互操作
05
包管理器深入
npm/yarn/pnpm 对比 · 依赖管理 · lock文件 · 发布npm包
06
构建工具 Webpack 基础
Entry, Output, Loader, Plugin · 第一个Webpack项目
07
Webpack 进阶
Loader (babel/css/style) · Plugin (HtmlWebpack, MiniCss) · DevServer
08
代码转译 Babel
Babel作用 · presets/plugins · Polyfill & core-js · 集成Webpack
09
CSS 工程化
Sass/SCSS · CSS Modules · PostCSS & Autoprefixer
10
代码规范 ESLint & Prettier
ESLint配置 · Prettier · 集成 · husky + lint-staged
11
TypeScript 入门
基础类型 · 接口 · 泛型 · 项目中使用TS
12
TypeScript 进阶
高级类型 · 类型守卫 · 声明文件 .d.ts · tsconfig.json
13
单元测试 Jest
Jest配置 · describe/it/expect · Mock · 覆盖率报告
14
组件测试 Testing Library
React/Vue Testing Library · 测试用户交互
15
端到端测试 Cypress
Cypress基础 · E2E测试 · CI集成
16
CI/CD 入门
什么是CI/CD · GitHub Actions · 自动化构建与测试
17
代码质量门禁
SonarQube集成 · 代码审查流程 · 自动化检查
18
项目脚手架
Yeoman / Plop · 自定义脚手架 · 模板代码生成
19
Monorepo 管理
Lerna / Nx / Turborepo · 概念对比与选择
20
环境变量与配置
多环境配置 · dotenv · 环境变量注入
21
打包优化 Code Splitting
splitChunks · 动态导入 · 预加载/预获取
22
性能优化 Lighthouse
Lighthouse指标 · 图片/字体优化 · 关键渲染路径
23
静态资源管理
图片压缩 imagemin · SVG优化 · 字体 · CDN部署
24
日志与监控
Sentry日志 · Web Vitals · 错误边界
25
微前端入门
微前端概念 · qiankun · 主应用与子应用通信
26
组件库搭建
目录结构 · Rollup打包 · Storybook · 发布npm
27
设计系统与Token
设计Token · Theme切换 · CSS变量 + Token
28
低代码平台基础
低代码概念 · 可视化编辑器 · Schema驱动渲染
29
工程化实战（一）
从零搭建 React/Vue 企业级模板（集成全部工具）
30
工程化实战（二）
持续迭代 · SemVer · Changelog · 总结与展望