我所了解的前端工程化

背景与冲突

回顾前端的发展历史，大约在 10 年前，前端工程师的日常工作是切图，把前端三剑客： HTML、 CSS 、JavaScript 学完后基本能快速的上手，且数据依赖于后端等，在当时甚至是现在部分人的印象里，前端开发是一个工作较简单、难度较低的职位，换种说法就是，前端开发职位关注度很低。而 2009 年Nodejs 的横空出世，前端的关注度越来越高，前端的价值已经可以与后端并肩甚至超越，可以说开始抢占后端市场了，对于前端而言，是一个崛起的时刻，同时与之而来也带来了一些问题，前端的规模越来越大，职责范畴越来越大，工程也逐渐复杂化，上升到了工程学的问题，那么如何高效的进行团队协作，如何提高团队的开发效率，如何降低项目的维护成本等等？因此，前端工程化的思想应运而生，前端开发开始需要工程化、组件化、模块化、规范化、自动化来更好帮助我们更好的协作完成一个工程，提高项目质量，提高可维护性。

什么是前端工程化

根据业务的特点，将前端标准化、组件化、模块化、规范化、自动化，包括了开发流程，技术选型，代发规范，测试、构建发布，监控、性能优化、重构等，用于提升前端工程师的开发效率和代码质量，降低项目维护成本等一系列问题。

换句话说，一切以提高开发效率、降低项目维护成本、保证质量为目的的手段都可称之为工程化，以及一切重复的工作都应该被自动化。

如何实现前端工程化

任何一个软件工程大致分为 ：开发-测试-部署。

在前端工程中，每一环节又涵盖了很多的细节，如：如何统一编码规范；如何使用模块化、组件化，如何解决重复的机械化工作；如何统一代码风格，保证质量；前后端如何更好的协作，前端不再依赖后端项目等等，即从前端工程的每一个环节中，我们都能针对具体的工作细节去做对应的工程化工作，那如何在各个环节去实现工程化，大致可以从4 个维度去思考：文件上的模块化、组件上的组件化，让组件得以复用，行为标准上的规范化，重复性的机械化工作的自动化。

前端模块化

高内聚，低耦合：判断代码好坏的重要指标。
高内聚：指一个函数尽量只做一件事
低耦合：指两个模块之间的关联程度低

模块化是定义在文件上。

对代码和资源的划分，将一个系统按照一定的规则规范分解封装为更小的文模块（文件）并组合一起，向外暴露一些方法与外部其他模块通信，模块之间作用域相互隔离互不干扰，一个模块即一个功能，可被多次复用,不仅能解决命名冲突从而减少命名空间污染，更好的分离，按需加载，实现更高的复用性和高可维护性。

模块化思想体现了分而治之的思想（把一个复杂的问题分成两个或更多的相同或相似的子问题，直到最后子问题可以简单的直接求解，原问题的解即子问题的解的合并）。
比如一个实现 x 功能的js代码，其他功能的实现也用到这个 JS 功能代码，可以把这个功能看做为一个模块使用了一定的规范进行模块化的实现。

JS 中模块化方案有很多，在不同时间的模块化方案的产物里，目前对于编码来说主流的方案只有两种：从 ES6 起官方规范自带的方案 ES module，以及Node.js 使用的方案CommonJS。而二者差别主要区别于，语法上前者使用 import 和 export.default 来加载和暴露，后者使用的是require 和modules.exports。

前端组件化

组件化是定义在设计上，对 UI 的拆分，可分为业务组件，和公共组件；顾名思义，业务组件即与业务有关的组件，如系统有多处修改用户信息的弹框（举例而已，一个系统修改用户信息的入口体验一般在用户管理），我们可将这个弹框封装为一个业务组件供使用时按需引入复用；公共组件即是与业务无关且可直接使用的组件，如一般按钮，确定按钮、取消按钮等。组件化即是将多处实现同样的功能的UI 进行封装为可按需加载的可复用的组件。

组件化也是体现了“分而治之”的思想，如一个页面可由导航、侧边栏，底部等多个组件组成，每个组件又可拆解为多个组件组成

目前主流组件化框架很多，有 Vue、React、Angular。

前端规范化

规范化是定义在一种行为标准上。
团队多人协作时需要明确统一的标准来约束大家的一些行为，因为不同的人都有不同的编码习惯、文档习惯、提交日志习惯等，统一的规范可以促进团队之间的协作、降低项目维护成本等。项目初期制定的规范的质量，影响后期团队里开发者之间的协作、项目质量、以及项目维护的成本等。
如
常见的规范有：
目录结构的规范、
组件规范、
编码规范，包括HTML规范、CSS 规范、JS 规范、图片规范、命名规范等
文档规范、
Git协作规范，包括分支、commit 描述等。
前后端接口规范等，包括规范原则，如响应数据格式、响应格式，、响应Code等等、

至今已经有很多工具可以帮助实现规范化，如一些主流的 Lint 工具 ， ESLint 工具来规范编码风格，具体可详细参考官方文档。

前端自动化

自动化定义在一些重复性的行为上。
一切重复的机械化工作都应该被自动化，让机器完成任何简单重复的工作

也有很多的自动化工具帮助我们实现自动化，如:
自动化构建、自动化部署、自动化测试等等。