第 2 章：制定 SOP
工程化的前提是标准化
在我看来，在进行工程化改造之前，需要对团队的工作流程进行梳理，制定一套标准化的操作流程（SOP），这是工程化的前提。因为工程化的目标是提高开发效率，降低维护成本，在前端项目中的具体体现则是架构的搭建、自动化脚本工具的引入、CI/CD 的实现等。这些工作都需要在团队内部形成一套标准化的操作流程，才能保证工程化改造的顺利进行。
比如，我们需要在项目中引入 eslint、prettier、husky 等工具，那么我们就需要制定一套标准的编码规范，包括代码格式、命名规范、注释规范等，确保团队成员在编写代码时能够遵循这些规范，从而提高代码质量。
认识 SOP
SOP 是 Standard Operating Procedure 的缩写，中文可以翻译为标准作业流程。其目的是将某一事件的标准操作步骤和要求以统一的格式描述出来，用来指导和规范日常的工作。在 IT 行业中，SOP 可以帮助企业实现软件开发、系统维护、数据管理等各项工作的标准化和规范化。团队人员可以清晰地了解每个阶段的流程、任务分配和完成标准，确保工作的有序进行。
此外，SOP 的制定可以帮忙我们自上而下的梳理工作流程，查漏补缺，明确各个角色之间的职责，从而提高工作效率。
SOP 的制定
TIP
- 这里不去详细说明 SOP 的制定过程，而是分享一些制定 SOP 的思路和注意事项；
- 下面提及的 SOP 事项，先后顺序不代表优先级；
SOP 的制定需要根据团队的具体情况进行，包括项目类型、技术栈、团队规模等。完整的 SOP 应该涵盖团队工作的方方面面。由于本文是专注于前端领域的工程化，所以这里分享一些和前端相关性较强的 SOP：
技术栈选择
在制定 SOP 时，需要明确团队的技术栈，包括前端、后端、数据库等。技术栈的选择需要根据项目需求、团队技术水平和行业趋势等因素并结合技术特点进行综合考虑。例如，如果项目需要高性能、高并发，那么可以选择 Node.js、Koa 等技术栈；如果项目需要快速迭代，那么可以选择 React、Vue 等前端框架。
保证稳定性
技术栈一旦确定后应尽量稳定，切忌朝令夕改。例如，团队明确使用 Vue 技术栈，那么在项目开发过程中，应避免使用 React、Angular 等其他前端框架。原则上，团队所有的项目开发都应使用同一技术栈，以保证团队内部的技术一致性。有时候，产品在需求评审阶段会提出使用其他技术栈实现的需求，这时开发人员应该基于现有的团队技术栈给出相应的替代方案，而不是盲目的引入新技术。沿用现有技术栈，一来，可以避免团队内部技术栈混乱；二来，有助于项目的维护，减少项目交接成本。 此外，技术栈的稳定是团队技术积累的重要保障。如果技术栈频繁变动，那么团队的技术积累将无从谈起。
技术更迭
当然，我们也不是完全拒绝新技术的的引入。技术的更迭是必然的，只有不断引入新技术，才能保证团队的技术领先性。
技术更迭分为两种情况：一种是新旧技术的替换，另一种是引入新技术。
新旧技术的替换
有些新技术仅仅是对现有技术的替代。对于这类技术，原则上是不建议引入的。因为新技术的引入会带来一定的学习成本，而且新技术的稳定性无法得到保障。除非，新技术的引入能够带来显著的技术优势，例如，新技术的性能优于现有技术，或者新技术的功能更加强大。
大致操作流程如下：
首先，在进行技术替换前，首先需要进行充分的调研评估，明确新老技术的优缺点。举办吹风会，分享调研成果，采集集体意见。
在明确进行技术替换的必要性后，制定技术替换计划，包括技术替换的时间节点、技术替换的过渡方案等。制定技术替换计划时，应充分考虑团队成员的技术水平，确保团队成员能够顺利过渡。举办内部宣讲会，统一团队成员思想，明确成员的职责与注意事项。举办技术培训，帮助团队成员快速掌握新技术。
新技术应在试点项目中先行引入，待试点项目成功后，再逐步推广到其他项目中。
引入新技术
新技术的引入是对现有技术的补充，不会对现有的技术栈产生影响。对于这类技术，原则上是可以引入的。但是，在引入新技术时，需要做好技术调研和评估，确保新技术的稳定性和可行性，以及是否具有推广的价值。如果适合推广，那么可以在团队内部进行试点，待试点成功后纳入团队技术栈。
Vue、React、Angular 三大框架的选择
如今各大前端框架的生态圈已经非常成熟，理论上基本不存在 React 能做的事 Vue 做不了的情况。至于选择哪个框架，建议着重考虑团队成员的技术亲和度。
编码规范
编码规范是保证代码质量的重要手段，可以减少代码冲突、提高代码可读性和可维护性。所以，制定编码规范是制定 SOP 的不可或缺的一环。
前端项目中，涉及的代码主要包括 HTML、CSS、JavaScript、TypeScript、Vue、React 等，所以制定编码规范时，需要考虑这些语言的特点和最佳实践。当然，并不是所有的语言都需要制定编码规范。应结合团队的技术栈和实际情况，选择需要制定编码规范的编程语言。例如，团队只使用 Vue 开发，且不采用 TypeScript，那么只需要制定 Vue、HTML、CSS、Javascript 编码规范即可。
在制定编码规范时，可以参考业界成熟的规范，如 Airbnb 的 JavaScript 规范、Google 的 JavaScript 规范、JavaScript Standard Style等，并结合团队实际情况进行定制。
这里分享一下我个人整理的编码规范：
Git 规范
Git 是目前最流行的版本控制系统，良好的 Git 使用习惯可以提高团队协作效率。在制定 Git 规范时，可以参考以下内容：
- 分支管理：建议使用 Git Flow 或 GitHub Flow 等分支管理策略，明确不同分支的用途和命名规范。
- 提交信息：建议使用 Angular 提交信息规范，确保提交信息清晰、简洁、有意义。
开发流程
开发流程是项目从需求分析到上线发布的整个过程中的一系列操作步骤。在制定开发流程时，可以参考以下内容：
- 需求分析：明确项目需求，制定项目计划。
- 设计阶段：完成项目设计，包括 UI 设计、技术选型等。
- 开发阶段：按照项目计划进行开发，确保代码质量。
- 测试阶段：进行功能测试、性能测试等，确保项目质量。
- 上线阶段：完成项目上线，进行项目监控和维护。
代码审查
代码审查是保证代码质量的重要手段，可以及时发现代码中的问题，提高代码可读性和可维护性。在制定代码审查流程时，可以参考以下内容：
- 审查方式：可以采用 Pull Request 或 Merge Request 等方式，进行代码审查和合并。
- 审查内容：包括编码规范、代码质量、代码风格等。
项目部署
项目部署是将项目代码部署到生产环境的过程，可以参考以下内容：
- 部署方式：可以采用 Docker、Kubernetes 等容器化技术，实现自动化部署。
- 部署流程：明确部署流程，包括代码打包、镜像构建、容器部署等。
- 监控与报警：部署完成后，需要监控项目运行状态，及时发现并解决问题。
UI 规范
UI 规范是保证 UI 设计一致性、提高用户体验的重要手段。在制定 UI 规范时，可以参考以下内容：
- 组件库：制定一套统一的组件库，包括按钮、输入框、表格等常用组件。
- 样式规范：制定一套统一的样式规范，包括颜色、字体、间距等。
代码版本管理
代码版本管理是保证代码质量和团队协作的重要手段。在制定代码版本管理流程时，可以参考以下内容：
- 版本号管理：采用语义化版本号，明确版本更新规则。
- 分支管理：采用 Git Flow 或 GitHub Flow 等分支管理策略，明确不同分支的用途和命名规范。
总结
SOP 是团队协作的重要手段，可以保证团队工作的高效和有序。在制定 SOP 时，需要根据团队实际情况进行定制，并确保团队成员的积极参与和执行。通过 SOP 的实施，可以提高团队协作效率、保证代码质量、降低维护成本和提高项目成功率。 此外，工程化的前提是工作流程的标准化，标准化的体现是 SOP 的制定。工程化是对 SOP 中可以脚本化自动化的工作项的提炼，是 SOP 的补充扩展以及完善。两者密不可分，相辅相成。