My doc

主题

前端工程化简介 ​

前端工程化是将软件工程的方法和原理应用到前端开发中，旨在提高开发效率、保证代码质量、降低维护成本的一系列规范化和自动化过程。

什么是前端工程化 ​

前端工程化是一种系统性的解决方案，它涵盖前端开发的各个方面，包括但不限于：

  • 代码规范制定与实施
  • 开发流程标准化
  • 自动化构建与部署
  • 性能优化策略
  • 模块化与组件化
  • 测试体系建立
  • 团队协作规范

核心组成部分 ​

1. 代码规范 ​

  • JavaScript/TypeScript 编码规范
  • CSS/Less/Sass 编码规范
  • HTML 模板规范
  • 文件命名规范
  • Git 提交信息规范

2. 开发流程 ​

  • 分支管理策略（如 Git Flow）
  • 代码审查机制
  • 持续集成/持续部署（CI/CD）
  • 自动化测试流程

3. 构建工具 ​

  • 打包工具（Webpack、Rollup、Vite 等）
  • 任务运行器（Gulp、Grunt 等）
  • 代码压缩与优化
  • 资源处理（图片压缩、字体处理等）

4. 模块化与组件化 ​

  • JavaScript 模块化（CommonJS、AMD、ES Module）
  • CSS 模块化方案
  • UI 组件库开发与维护
  • 微前端架构

5. Monorepo 管理 ​

  • 单体仓库架构设计
  • 多包依赖管理
  • 构建与发布流程
  • 代码共享与复用

常用工具链 ​

包管理工具 ​

构建工具 ​

代码质量工具 ​

  • ESLint (代码检查)
  • Prettier (代码格式化)
  • Stylelint (CSS 检查)
  • Commitlint (提交信息检查)

测试工具 ​

  • Jest (单元测试)
  • Vitest (集成测试)
  • Cypress (端到端测试)
  • Puppeteer (浏览器自动化)
  • Mocha/Chai (测试框架)

Monorepo 工具 ​

相关资源 ​