Summary

tip

工程能力学习，包括 Coding, Git, Builder, etc....

什么是工程能力

个人的一知半解，欢迎各位来辩。

tip

前端工程化最主要的目的还是提升业务效率。

规范化

制定各项规范，让工作有章可循

• 统一编码规范，并与团队协作和代码维护
  • 目录结构
  • 文件命名
  • 代码规范
    • ESLint, TypeScript, Prettier
• 开发流程规范
  • 分支规范
  • CR规范
  • 工作流规范
• 文档规范
  • 前后端接口规范
• 版本管理
  • Git
  • commit message (husky + commitlint)

组件化

• 抽象能力的提升
• 框架的选择
  • CSS方案：CSS Modules, CSS in JS
  • 视图方案：react、Vue
  • 数据管理方案：redux、mobx, vuex
  • 路由：react-router、vue-router
  • 请求库：fetch、axios、SWR、umi-request

模块化

• 分离，解耦
  • ESM, CommonJS, AMD

自动化

• 打包构建
  • webpack
    tip

    增量更新, 构建速度快 思路: git diff tag + 拓扑排序 + 构建, 参考 lerna changed 待实践并对文档进行输出

  • rollup
• 优化构建流程，研发自动化工程工具，提升开发，部署效率
• 测试自动化
  • Jest
  • Mocha

参考资料

从淘宝前端工程化演进，看工程化之路如何“私人订制” 前端工程化概述 谁能介绍下web前端工程化？