前端工程化工具链 · 完整搭建课程目录

Node.js & 包管理器 npm/yarn/pnpm

Node.js 环境安装与版本管理 (nvm)，npm/yarn/pnpm 对比与选型，package.json 核心字段，node_modules 依赖机制，npx 全局工具调用。

nvmnpmpnpmpackage.json

Git & 版本控制分支策略

Git 安装配置，常用命令 (init/clone/add/commit/push/pull/branch/merge/rebase)，.gitignore，Git Flow 与分支策略，Husky + lint-staged 提交前检查。

GitHuskylint-stagedGit Flow

Webpack 构建核心深入

Entry / Output / Loader / Plugin，常用 Loader (babel/css/style/file)，HtmlWebpackPlugin / CleanWebpackPlugin，开发服务器热更新，代码分割与懒加载。

WebpackLoaderPluginHMR

Vite 构建 ESM + esbuild

Vite 原理 (ESM + esbuild)，项目初始化，配置 (别名/代理/环境变量)，插件机制，Vite 与 Webpack 对比。

ViteesbuildESM插件

Babel & 代码转换 preset-env

Babel 核心原理 (解析/转换/生成)，preset-env 与 polyfill，@babel/plugin-transform-runtime，在 Webpack/Vite 中集成，browserslist 配置。

Babelpolyfillbrowserslist

TypeScript 基础类型系统

安装与 tsconfig.json，基础类型 (any/unknown/never/void)，接口与类型别名，泛型 (函数/接口/约束)，枚举与联合类型。

TS泛型枚举类型别名

TypeScript 进阶类型守卫/映射

类型守卫 (typeof/in/instanceof)，条件类型 (extends/infer)，映射类型 (Partial/Required/Readonly/Pick/Record)，工具类型实战，声明文件 .d.ts。

类型守卫infer映射类型.d.ts

ESLint & 代码规范质量门禁

ESLint 安装配置，规则 (off/warn/error)，常用配置 (airbnb/standard)，与 TypeScript 集成 (@typescript-eslint)，与 Prettier 配合解决冲突。

ESLintairbnbPrettier

Prettier & 格式化统一风格

Prettier 安装配置，常用选项 (printWidth/singleQuote/trailingComma/tabWidth)，编辑器集成 (VS Code/WebStorm)，与 ESLint 配合，pre-commit 自动格式化。

Prettier代码格式化husky

CSS 预处理器 & 模块化 Sass/Less/Tailwind

Sass/SCSS (变量/嵌套/混合/继承)，Less 基础，CSS Modules 原理与配置，PostCSS + Autoprefixer，Tailwind CSS 实用框架。

SassLessCSS ModulesTailwind

模块化 & 包管理 Monorepo / SemVer

CommonJS 与 ES Module 对比，模块解析策略，Monorepo (pnpm workspace/turborepo/nx)，npm 包发布流程，语义化版本 SemVer。

ESMMonorepoSemVerpnpm

单元测试 Jest / Vitest

测试框架选型 (Jest vs Vitest)，测试用例 (describe/it/expect)，Mock 与 Spy，覆盖率报告，组件测试 (Testing Library)。

JestVitestTesting Library

端到端测试 Cypress / Playwright

E2E 框架对比，Cypress 安装与编写测试，Playwright 安装与编写测试，CI 集成，测试最佳实践。

CypressPlaywrightE2E

CI/CD & 自动化部署 GitHub Actions

GitHub Actions (workflow/job/step)，常用 Actions (checkout/setup-node/cache)，自动化测试与构建，部署到 Vercel/Netlify，Docker 容器化部署。

CI/CDGitHub ActionsDocker

代码质量 & 安全 SonarQube / Snyk

SonarQube 代码质量扫描，Snyk/Dependabot 依赖安全扫描，Code Review 最佳实践，Conventional Commits，CHANGELOG 自动生成。

SonarQubeSnykConventional Commits

性能优化工具 Lighthouse / Bundle Analyzer

Lighthouse 性能审计，Webpack Bundle Analyzer，Chrome DevTools Performance，图片优化 (sharp/imagemin)，关键 CSS 与内联。

LighthouseBundle Analyzersharp

脚手架 & 模板工程 Yeoman / plop

Yeoman 脚手架开发，plop 自动化文件生成，create-react-app/vue-cli 源码分析，自定义 CLI (commander/inquirer/chalk)。

Yeomanplopcommander

微前端架构 qiankun / Module Federation

微前端概念与场景，qiankun 框架原理与使用，Module Federation (Webpack 5)，微前端通信机制，样式隔离方案。

qiankunModule Federation微前端

低代码平台基础表单/渲染引擎

低代码概念与架构，表单引擎设计，页面渲染引擎，组件库封装，代码生成器原理。

低代码表单引擎代码生成

WebAssembly 基础 WASM / Rust

WASM 概念与优势，Emscripten 编译 C/C++ 到 WASM，Rust + WASM (wasm-pack)，WASM 在 Web 中的应用场景。

WASMRustEmscripten

PWA & 离线应用 Service Worker

Service Worker 生命周期，Cache API 与离线缓存，Web App Manifest，推送通知，PWA 性能优化。

PWAService Worker离线缓存

Web 安全基础 XSS / CSRF / CSP

XSS 攻击与防御，CSRF 攻击与防御，CSP 内容安全策略，HTTPS 与 SSL/TLS，OAuth2.0 与 JWT 认证。

GraphQL & API 管理 Apollo

GraphQL 基础 (Schema/Query/Mutation)，Apollo Client/Server，REST 与 GraphQL 对比，GraphQL Code Generator，缓存策略。

GraphQLApolloCode Generator

状态管理进阶 Redux Toolkit / Zustand

Redux Toolkit 与 RTK Query，Zustand 轻量状态管理，Jotai 原子状态，Pinia (Vue3)，状态管理选型对比。

Redux ToolkitZustandPinia

SSR & SSG Next.js / Nuxt.js

Next.js (Pages/App Router)，Nuxt.js 基础，SSR 原理与性能，SSG 静态生成，ISR 增量静态生成。

Next.jsNuxt.jsSSRISR

WebSocket & 实时通信 Socket.IO / WebRTC

WebSocket 协议基础，Socket.IO 库使用，实时协作编辑 (OT/CRDT)，WebRTC 基础，信令服务器。

WebSocketSocket.IOWebRTC

Monorepo 工程实践 pnpm / turborepo

Monorepo 优势与挑战，pnpm workspace 配置，turborepo 缓存与并行构建，changeset 版本管理，Nx 生成器与执行器。

Monorepoturborepochangeset

设计系统 & 组件库 Storybook / Rollup

设计系统概念，Storybook 组件开发与文档，Rollup 组件库打包，CSS-in-JS 方案对比，主题定制方案。

StorybookRollupCSS-in-JS

工程化度量 & 监控 Sentry / Web Vitals

前端监控体系 (错误/性能/用户行为)，Sentry 集成，自定义埋点方案，Web Vitals 指标，日志收集与分析。

SentryWeb Vitals埋点

全链路工程化实战完整脚手架

从零搭建完整项目脚手架，集成所有工具链，CI/CD 流水线配置，自动化测试与部署，项目维护与迭代策略。

实战脚手架CI/CD全链路