前端工程化实践
前端工程化实践
什么叫前端工程化
从实践方面来说
一般涵盖了从开发阶段到代码发布生产环境，包含了以下几个内容：
- 开发：脚手架Vue/React
- 构建：webpack、Rollup、Vite构建工具
- 测试：单元测试、e2e测试、组件测试、黑盒测试
- 部署：CI/CD 性能：性能优化
- 规范：开发流程规范、编码规范、版本管理规范
从理论角度来讲
前端工程化又可以理解为一种通过规范化、模块化、自动化等手段，提高前端项目 在研发、运维阶段的效率、质量。
规范化
规范化过程：沉淀研发流程的各个环节标准规范，统一研发流程和规范，为模块和自动化提供可能性。模块化
复用模块：将各项功能基于独立的模块去拆分开发，尽可能的做到模块级别的复用，从而大大提高整体效率和降低研发成本。自动化
自动化处理：基于定义的研发流程，建立一套自动化流水线，当特定动作发生(定期触发、Git Push)时，自动触发流水线执行CI/CD任务。
前端工程化的意义：
那做前端工程化的意义在哪里呢？
降本提效，保障质量
- 提高效率（通过模块/组件化复用各项能力，以及自动化工具提高效率）
- 保障质量（规范化避免犯错，通过引入准入检测、监控、自动化测试 等手段保障研发和运维期间的质量）
- 降低成本（提高质量、保障质量，以及自动化带来的开发难度的降低 变相的就降低的整个软件开发的成本）
下面分别从这三个方面规范化、模块化、自动化三个方面来进行分开介绍。
1.规范化（从源头处约束到优雅-聚沙成塔）
规范化从开发规范和版本规范两个方面来讲，那针对于开发规范来讲，要做什么呢？
1. 制定各项开发规范，让工作有章可循
1）统一团队成员的编码规范，便于团队协作和代码维护
- 目录结构，文件命名规范
- 编码规范：eslint, stylelint
2） 开发流程的规范
- 使用敏捷，增强开发进度管理和控制 应对各项风险，需求变更等
- code review 机制 UAT 提升发布的需求的质量
3）前后端接口规范，其他文档规范
2. 针对于版本规范来讲要做什么
- 使用版本控制工具，高效安全的管理源代码
- 使用 git 版本控制工具 Git分支管理 Commit描述规范，例如：task-number + task 描述
- 创建 merge request，code review 完毕之后方可合并代码
2.模块化（从表达处处理井井有条——分而治之）
那我们做前端模块化的意义就在于要降低耦合，增强代码的可扩展性、可读性、维护性和测试性。
一般模块化处理包括四个方面：
1. 代码层面：采用模块化的方式组织代码
JS 模块化：AMD、CommonJS、UMD、ES6 Module
- CommonJS：服务器端 javascript 模块化解决方案，适用于同步模块加载
- AMD：浏览器端 javascript 模块化解决方案，适用于异步模块加载
- UMD ：允许在环境中同时使用 AMD 与 CommonJS 规范。
- ES2015 Modules：使用import和export ，ES2015 Modules 作为 JavaScript 官方标准，日渐成为了开发者的主流选择。
CSS 模块化：less、sass、stylus、postCSS、css module
2. 组件公共封装：采用组件化的编程思想，处理 UI 层
- react、vue、angular
3. 数据层做状态管理：将数据层分离管理
- redux、mbox
4. 类编程：使用面向对象或者函数编程的方式组织架构
3.自动化（通过使用各种自动化的工程工具，提升整个开发、部署效率）
自动化一般是基于定义的研发流程，建立一套自动化流水线，当特定动作发生(定期触发、Git Push)时，自动触发流水线执行CI/CD任务。比如下面的：
- 使用前端构建工具：gulp、grunt、Broccoli
- javascript 编译工具：Babel、Browserify、Webpack
- 开发辅助工具：数据 mock、livereload
- 使用CI集成工具：jenkins、Travis CI
- 使用脚手架工具：yeoman、create-app
介绍下CI/CD
CI/CD，Continuous Integration/Continuous Delivery(Deployment) 持续集成/持续交付/持续部署， 它是一种工程化方法论，即通过自动化的手段、实现能持续的对项目进行构建、交付、部署，从而达成高效率、高质量的交付目标。
1）持续集成
当有新的变更代码提交 (上传到代码仓库 git push)之后，通 过自动化的方式自动完成项目工程的构 建、集成、测试等工作，并生成最终的发布产物。
2）持续交付
能够将每次持续集成的构建记录、集成记录、测试记录、发布产物记录并保存下来，方便后续的追踪、 监控、部署。比如前端项目打包构建后会生成 zip 包，CI/CD 会保存每次构建的产物，遇到上线失败的情况，方便回滚到上个版本。
3）持续部署
将指定(某一个持续集成 的产物)的最终产物自动部署到生产环境中。
最后：实践验证真理
那如果你是前端开发工程师，该如何推动团队的前端工程化建设呢？
换句话说，作为开发者的我们，如何打造一个前端工程化方案，都需要做些什么？
大概分为三步：
- 规范化：需要定义研发流程和规范
- 模块化：打造打造工程脚手架
- 自动化：打造自动化CI/CD
