前端基础架构之工作流设计

关键词：工作流程、规范、文档、自动化、工具、效率、生产力、规范硬编码、强制执行

介绍

前端工作流设计是什么

前端工作流设计是指设计和优化前端开发的流程和工具，旨在提高团队的效率和质量，使得开发过程更加规范化和可靠化。

常见的工作流设计有哪些：

• 代码管理：使用版本控制工具（如Git）来管理代码，使得代码可以被跟踪和回溯，并且多人协作开发时能够更加顺畅。
• 构建工具：使用构建工具（如Webpack、Rollup等）来打包和压缩代码，使得前端项目可以在生产环境中更快地加载，同时还能够处理一些依赖关系、模块化、ES6转义等问题。
• 自动化测试：使用自动化测试工具（如Jest、Mocha等）来测试代码，确保代码的质量和稳定性，并且可以提前发现和修复潜在的问题。
• 部署工 具：使用部署工具（如Jenkins、Travis CI等）来自动化部署代码到服务器或云平台，避免手动操作带来的错误和不可靠性。
• 文档管理：使用文档管理工具（如JSDoc、Swagger等）来自动生成API文档和代码注释，使得代码更加易于理解和维护。

如何使前端开发流程更加规范

通过对前端工作流的设计和优化，可以使得前端开发人员能够更加专注于业务逻辑的开发和优化，同时也能够提高开发效率和代码质量，从而提高整个项目的价值和竞争力。

基础规范的制定

要保证代码的可读性，可从以下几个方面进行约束。

• 规范代码组织结构：代码组织决定了应用架构，我们应该按照与架构相似的方式来编写代码。
• 代码检查与统一代码风格： 可使用 prettier 代码风格工具结合 Lint 工具来统一代码风格。
• 组件、函数命名规范:
  常见命名方式有：驼峰式命名、下划线命名法；
  css可遵照bem命名法；
• 开发工具规范
  统一编辑器配置；
  统一lint插件等；
  统一格式化工具；

  创建 README 搭建指南

  包含的内容应该有：
  1.支持运行的环境
  2.必要的依赖准备，如何搭建
  3.项目的安装指南
  4.线上的示例
  5.相关的文档链接
  6.相关人员的联系方式，讨论群

其他文档

1.绘制架构图：架构图一般展示的是各个子系统之前如何通信，如果是简单系统，可以是项目的技术栈组成。
2.可编辑文档库-提升协作性
3.轻量级架构决策记录
4.可视化文档
5.看板工具-统一管理业务知识：可追溯历史需求与变更

提交信息：每次代码提交文档化

项目方式：结合项目特点定制提交信息规范，使得提交有意义，能真正作为变更记录的重要参考；建议小步提交，可防止修改维护困难
开源项目方式：开源库需要有对应的 CHANGELOG.md 文件，可通过git提交记录自动化生成CHANGELOG文件。

通过流程化提高代码质量

1.设置提交拦截/远程提交拦截：结合pre-commit 钩子 和 lint-staged 实现
2.代码review 团队review/pull Request

测试策略

• 引入单元测试：
  工作中常见的测试范围为：
  1.通用、公用的Utils函数
  2.复杂交互操作逻辑
  对于隐藏在模板中的逻辑，单元测试很难覆盖，因此在编写业务逻辑的时候，尽可能把代码写在js或ts中；
  可以在项目中采用驱动测试开发，以测试来驱动业务逻辑。

设计自己的工作流

实验项目：inktank-core
目标：

1. 代码要符合项目规范
2. CR 后的代码都是能准确执行的
   目标1： 通过Code Review
   目标2：需要测试功能