前端工程化

一、前端发展阶段概述

1、混沌期

整个江湖中只有一个传奇，就是”程序员”

• 这种模式下对人员的综合要求高，开发者既要会数据库开发（SQL）、又要会服务器端开发（Java、C#、Php），还要会基本的前端开发（HTML、CSS、JS）。
• 初期以客户端应用为主，后期随着web应用的发展，对界面交互和页面端开发的需求日益旺盛，对人员职责划分的需求日渐迫切。
  

2、过渡阶段(觉醒)

• 随着页面特效和用户体验的需求上升，专注CSS样式和JS脚本的前端开发脱颖而出
• 伴随着人员职责分离，架构也发生变化了，常见的就是后端开发+前端开发(偏静态)

3、前后端分离(发展)

分工协作是社会发展的必然选择。

• 前端人员重心为页面开发(Html+CSS+JavaScript),对js的要求上升，也称大前端，弱化复杂业务逻辑后端人员重心转到业务逻辑处理与数据性能处理，不再关心前端界面的呈现
• 服务的分离，代码管理，服务部署也都独立出来分别管理，系统的灵活性也获得了极大的提升。
• 前端选用 node 服务器，后端选用 Java、C#、Php 等结构化语言
  

4、前端工程化(规范期)

从传统的手写页面的认知阶段走到工程化的世界，是跨越性。

• 前端工程化是把软件工程相关的方法和思想应用到前端开发中，覆盖从代码编码到部署的整个周期，包含：编码、构建、打包、集成，测试和部署全流程。
  前端工程化的出现要感谢Node的发布。
• 此阶段的前端,不局限于代码开发，还要对服务器、容器、Nginx等有一定的了解，除了不直接操作数据库外，与后端开发并无实质性区别。
  

二、前端工程化

1、什么是前端工程化？

规范化、标准化、组件化、自动化

• 前端工程化是指使用软件工程的技术和方法，对前端开发流程、技术、工具、经验等进行规范化、标准化，以提高开发效率、降低开发成本，让前端开发能够“自成体系”。
• 前端工程化主要包括四个方面：模块化、组件化、规范化、自动化。其目的是为了让前端开发更加高效、有序、可重复，便于团队协作和管理，同时也能更好地与后端进行集成和交互。

2、前端工程化的四个方面

• 模块化：将前端代码拆分成多个独立的模块，每个模块负责一部分功能，这样可以降低代码的耦合性，提高代码的可维护性和可复用性。模块化的主要应用包括ES6的模块化语法、Webpack的模块化打包等。
• 组件化：将页面拆分成多个独立的组件，每个组件包含模板、样式和逻辑，这样可以提高代码的复用性和可维护性，降低项目的复杂度。组件化的主要应用包括React、Vue等前端框架。
• 规范化：制定一套统一的编码规范和标准，包括HTML、CSS、JavaScript等，这样可以保证代码风格的一致性，提高团队协作的效率。规范化的应用包括制定统一的代码规范、目录结构、命名规则等。
• 自动化：通过自动化工具和流程，减少重复的手动操作，提高开发效率。自动化的应用包括自动化构建、自动化测试、自动化部署等。

通过前端工程化，可以实现开发流程的优化和规范化，提高开发效率和代码质量，降低项目的维护成本。同时，前端工程化还可以提高团队协作的效率，减少沟通成本，让前端开发更加有序、高效。

3 、工程化的优势

• 引入了模块化和包的概念，作用域隔离，解决了代码冲突的问题
• 按需导出和导入机制，让编码过程更容易定位问题
• 自动化的代码检测流程，有问题的代码在开发过程中就可以被发现
• 编译打包机制可以让使用开发效率更高的编码方式，比如 Vue 组件、 CSS 的各种预处理器
• 引入了代码兼容处理的方案（ Babel），可以让自由使用更先进的 JavaScript 语句，而无需顾忌浏览器兼容性，因为最终会帮转换为浏览器兼容的实现版本

4、团队协作的优势

• 统一的目录结构
• 统一的代码风格
• 可复用的模块和组件
• 代码健壮性保障(TS类型约束及面向对象语法的支持)
• 代码质量保障(EsLint+Prettier)
  代码风格及语法检测，变量及函数规范检测，减少编码错误，提高代码质量
• 自动化(配置CI/CD完成自动化流水线)

5、开发、集成、部署的自动化

CI/CD 的核心概念是持续集成、持续交付和持续部署。它的底层逻辑是稳定的运行环境，高效的集成机制，快速的部署与响应。它需要开发与运营团队共同完成。