一. 理论：软件工程
1.1 定义
想尽一切办法规避软件的风险，并能
更快、更快的完成软件项目的交付和维护。软件工程是研究和应用如何以系统性的，规范化的、可定量的过程化方法去开发和维护软件，以及如何把经过时间考验而证明正确的管理技术和当前能够得到的最好的技术方法结合起来。
1.2 演进过程
软件工程的演进的最终目的：多块好省-快速、高质量的完成软件工程（项目、系统）的交付。
交付周期越长，变化的可能性就越大，项目可能面临的风险概率就越高。
二. 理论：前端工程化
2.1 定义
软件工程 + 前端 = 前端工程化
前端工程化是一种通过规范化、模块化、自动化等手段，提高前端项目在研发、运维阶段的效率、质量。
2.2 CI/CD
定义:
持续集成/持续交付（部署）它是一种工程方法论，即通过自动化的手段、实现能持续的对项目进行构建、交付、部署，从而达成高效率、高质量的交付目标。
为什么CI/CD能实现高效率、高质量的交付目标呢？
因为CI/CD有自动化，持久化的特性。
2.3 DevOps
DevOps是一组
过程、方法与系统的统称，用户促进开发、技术运营和质量保障（QA）部门之间的沟通、协作与整合。
2.4 为什么要做前端工程化？
降本提效，保障质量
提高效率（通过模块/组件化复用各项能力，以及自动化工具提高效率）保障质量（规范化避免犯错，通过引入准入检测、监控、自动化测试等手段保障研发和运维期间的质量）降低成本（提高质量，保障质量，以及自动化带来的开发难度的降低变相的就降低的整个软件开发的成本）
三、实战
如何做一个前端工程化的方案？ 围绕
规范化、模块化、自动化这三个维度，以提高效率，保证质量为目标展开。
3.1 整体架构
项目的部署更多可能会基于一个
Docker容器，然后在Docker容器的基础之上部署一个Nginx，然后前端页面就可以做到正常访问。
打造一个前端工程化方案需要做什么？
- 定义研发流程和规范
- 打造工程脚手架
- 打造自动化CI/CD
3.2 准备工作
首先需要先装一个
Docker,装完Docker之后需要装一个镜像，镜像需要用到Gitlab，去存储我们代码的平台，Jenkins是用来完成我们CI/CD的一个平台，Ngnix是一个Web容器，它能通过HTTP的协议让用户访问到。
3.3 制定和落地规范
- 参考业界规范，形成自己的规范
- 利用prettier、lint、git hook 在代码提交中和CI过程中强制落地规范
npm install -D prettier
npm install -D eslint
npm install -D husky
npm install -D lint-staged
3.4 脚手架：项目构建
3.5 脚手架：项目创建&运行
npm install -g create-react-app
create-react-app my-project
cd my-project
npm start
3.6 脚手架：代码提交&前置检测
配置
Lint+利用GitHook（在commit之前执行指定函数）实现
配置各种Lint
利用GitHook在commit之前执行相关检测逻辑
- husky操作Git hook钩子
- lint-staged 针对git提交的文件进行一些操作
比如我们没有规范代码直接提交
git commit -m "test"，我们来看看它会报哪些错误。
CI/CD：项目集成构建和交付
SCM（源代码）——> 构建 ——> 打包 ——> 部署
四、深入
4.1 构建方案：No Bundle
简介
基于浏览器支持的
Native Module，即无需将module构建成bundle直接使用。
优点：
- 构建速度好
- 加载性能好
缺点：
- 有兼容性问题
业界方案：vite
4.2 部署方案
如何部署具备多台设备的集群？
蓝绿部署策略:
滚动升级策略：
滚动启用新的，暂停老的，直到升级完成
灰度策略（金丝雀）
按照流量的百分比，将指定百分比的流量导入到新版本中
五、总结
5.1 前端工程化方案的演进路径
最后
⚽这篇文章主要介绍了前端工程化是什么？为什么要有前端工程化？相信你一定收获很多~
⚾如果你对这篇文章感兴趣欢迎点赞关注+收藏，更多精彩知识正在等你！😘
🏀GitHub 博客地址: github.com/Awu1227 。
🏉笔者还有其他专栏，欢迎阅读~
🏐玩转CSS之美
🎱Vue从放弃到入门
🎳深入浅出JavaScript
