前言：软件工程

背景

早些年，当软件系统变得越来越复杂时，软件开发如果没有一定方法、一定规范对项目进行管理，这样很容易会出现工期延期，甚至造成整个项目无法上线。于是先辈们才会提出软件工程，用来规避软件项目的风险，并能更快、更好的完成软件项目的交付和维护。

定义

软件工程，是研究和应用如何以系统性的、规范化的、可定量的过程化方法去开发和维护软件，以及如何把经过时间考验而证明正确的管理技术和当前能够得到的最好的技术方法结合起来。

演进过程

版本	模式	特点
1.0	瀑布模型	研发流程（需求分析 -> 设计 -> 编码 -> 测试 -> 上线）固定，交付周期长
2.0	敏捷开发	强调小步快跑（反复迭代、交付），交付周期短
3.0	Devops（敏捷开发升级版）	与敏捷类似，更强调开发和运维部署亲密无间（追求极致的效率和自动化）

前端工程化

1、前端工程化是什么？

软件工程 + 前端 = 前端工程化

前端工程化是一种通过规范化、模块化、自动化等手段，提高前端项目 在研发、运维阶段的效率、质量。

规范化

规范化过程：沉淀研发流程的各个环节标准规范，统一研发流程和规范，为模块和自动化提供可能性。

模块化

复用模块：将各项功能基于独立的模块去拆分开发，尽可能的做到模块级别的复用，从而大大提高整体效率和降低研发成本。

自动化

自动化处理：基于定义的研发流程，建立一套自动化流水线，当特定动作发生(定期触发、Git Push)时，自动触发流水线执行CI/CD任务。

CI/CD

CI/CD，Continuous Integration/Continuous Delivery(Deployment) 持续集成/持续交付(部署) 它是一种工程化方法论，即通过自动化的手段、实现能持续的对项目进行构建、交付、部署，从而达成高效率、高质量的交付目标。

1）持续集成
当有新的变更代码提交 (上传到代码仓库 git push)之后，通 过自动化的方式自动完成项目工程的构 建、集成、测试等工作，并生成最终的发布产物。

2）持续交付
能够将每次持续集成的构建记录、集成记录、测试记录、发布产物记录并保存下来，方便后续的追踪、 监控、部署。比如前端项目打包构建后会生成 zip 包，CI/CD 会保存每次构建的产物，遇到上线失败的情况，方便回滚到上个版本。

3）持续部署
将指定(某一个持续集成 的产物)的最终产物自动部署到生产环境中。

Devops

DevOps，是一组过程、方法与系统的统称，用于促进开发、技术运营和 质量保障(QA)部⻔之间的沟通、协作与整合。

2、为什么要做前端工程？

降本提效，保障质量

1. 提高效率(通过模块/组件化复用各项能力，以及自动化工具提高效 率)

2. 保障质量(规范化避免犯错，通过引入准入检测、监控、自动化测试 等手段保障研发和运维期间的质量)

3. 降低成本(提高质量、保障质量，以及自动化带来的开发难度的降低 变相的就降低的整个软件开发的成本)

3、实战：如何做一个前端工程化方案？

围绕规范化、模块化、自动化这个三个纬度，以提高效率，保证质量为目标展开。

规范化

• 建立符合实际需求的规范
• 确保规范被落地执行

模块化

通过可复用模块提升效率和质量(工具、 平台、组件、函数库等)沉淀使用模块。

自动化

将研发流程中涉及到的工作自动化完成。

整体架构

4、实战：打造一个前端工程化方案具体需要做什么？

• 定义研发流程和规范
• 打造工程脚手架
• 打造自动化CI/CD

制定和落地规范

1）参考业界规范，形成自己的规范
2）利用 prettier、lint、git hook 在代码提交和CI过程中强制落地规范

npm install -D prettier
npm install -D eslint
npm install -D husky
npm install -D lint-staged
复制代码

脚手架：创建项目

React脚手架：创建项目 & 运行

1）全局安装 react 脚手架 create-react-app

npm install -g create-react-app
复制代码

2）创建模板项目

create-react-app qingxunying-example
复制代码

初始化的项目目录如图所示：

3）启动运行项目

cd qingxunying-example
npm start
复制代码

脚手架：代码提交 & 前置检测

配置Lint + 利用GitHook(在commit之前执行指定函数)实现

配置Lint

利用 GitHook 在 commit 之前执行相关检测逻辑

1）husky：操作 Git hook 钩子
2）lint-staged：针对 git 提交的文件进行一些操作

CI/CD：项目集成构建和交付

5、深入

构建方案：NoBundle

简介

基于浏览器支持的Native Module(

优缺点

1）优点：

• 构建速度快
• 加载性能好

2）缺点：

• 有兼容性问题

业界方案：Vite

部署方案：如何部署多台设备的集群？

蓝绿发布策略

发布好新的，新的老的版本并行，然后将浏览一刀切到新版本。

滚动升级策略

现在用的最多的策略。滚动逐个启用新的，暂停老的，直到升级完成。

灰度策略(金丝雀)

按照流量的百分比，将指定百分比的流量导入到新版本中。这种局部放量部署，我们会先观察放量的机器有没有问题，没有问题再继续放量，这种方案是相对完美的，可以保证最后跑在线上的新版本都是没有问题的。

总结

上述主要介绍了前端工程的概念、为什么需要前端工程化，以及具体怎么做来做前端工程化。近几年为了实现前端项目稳定开发减少出错并且敏捷构建部署，前端工程化在不断演进更新，如下是演进路线：