前端工程化实践：从开发到构建测试部署——由此及彼_前端 构建和部署的区别

前端工程化实践

什么叫前端工程化

从实践方面来说

一般涵盖了从开发阶段到代码发布生产环境，包含了以下几个内容：

• 开发：脚手架Vue/React
• 构建：webpack、Rollup、Vite构建工具
• 测试：单元测试、e2e测试、组件测试、黑盒测试
• 部署：CI/CD 性能：性能优化
• 规范：开发流程规范、编码规范、版本管理规范

从理论角度来讲

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

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

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

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

前端工程化的意义：

那做前端工程化的意义在哪里呢？

降本提效，保障质量

1. 提高效率（通过模块/组件化复用各项能力，以及自动化工具提高效率）
2. 保障质量（规范化避免犯错，通过引入准入检测、监控、自动化测试 等手段保障研发和运维期间的质量）
3. 降低成本（提高质量、保障质量，以及自动化带来的开发难度的降低 变相的就降低的整个软件开发的成本）

下面分别从这三个方面规范化、模块化、自动化三个方面来进行分开介绍。

1.规范化（从源头处约束到优雅-聚沙成塔）

规范化从开发规范和版本规范两个方面来讲，那针对于开发规范来讲，要做什么呢？

1. 制定各项开发规范，让工作有章可循

 1）统一团队成员的编码规范，便于团队协作和代码维护
	 - 目录结构，文件命名规范 
	 - 编码规范：eslint, stylelint 
 2） 开发流程的规范
	 - 使用敏捷，增强开发进度管理和控制 应对各项风险，需求变更等 
	 - code review 机制 UAT 提升发布的需求的质量
 3）前后端接口规范，其他文档规范
1
2
3
4
5
6
7

2. 针对于版本规范来讲要做什么

	 - 使用版本控制工具，高效安全的管理源代码
	 - 使用 git 版本控制工具 Git分支管理 Commit描述规范，例如：task-number + task 描述 
	 - 创建 merge request，code review 完毕之后方可合并代码
1
2
3

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任务。比如下面的：

1. 使用前端构建工具：gulp、grunt、Broccoli
2. javascript 编译工具：Babel、Browserify、Webpack
3. 开发辅助工具：数据 mock、livereload
4. 使用CI集成工具：jenkins、Travis CI
5. 使用脚手架工具：yeoman、create-app

介绍下CI/CD

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

1）持续集成

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

2）持续交付

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

3）持续部署

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

最后：实践验证真理

那如果你是前端开发工程师，该如何推动团队的前端工程化建设呢？

换句话说，作为开发者的我们，如何打造一个前端工程化方案，都需要做些什么？

大概分为三步：

1. 规范化：需要定义研发流程和规范
2. 模块化：打造打造工程脚手架
3. 自动化：打造自动化CI/CD