# 前端工程化
前端工程化是一种思想，并不是具体指某一门技术，它是软件工程学应用于前端技术的一种体现。我理解的前端工程化是：项目从初期立项到项目发版甚至后期的持续维护中运用到的一系列前端技术的集合。
# 前端工程化带来的好处：
- 极大提升开发效率
- 降低维护成本
- 方便多人协作开发
- 低风险、高容错
- 更好的用户体验和运行性能
# 前端工程包括哪些：
# 一、模块化
模块化就是利用分治思想，将原本的大文件拆分成多个低耦合且相互依赖的小文件，最后再统一组装和加载。模块化是实现多人协作开发的基础，是实现代码复用的重要手段，它使代码的结构更加清晰，使项目更好维护。
# 1. JS模块化
在ES6之前，JsvaScript一只没有模块系统，对此社区制定了一些模块化加载方案，如：AMD（RequireJs）、CMD（SeaJs）、CommonJS。
ES6在语言层面上规定了模块系统，且其静态加载的特性在配合 Webpack + Babel编译后可将所有模块按照配置规则打包成若干个bundle（同步加载）或 chunk（异步加载）
# 2. CSS模块化
虽然 SASS、LESS、PostCss 等预处理器实现了对CSS的文件拆分，但并未解决一个重要问题：选择器全局污染。
为了解决这个问题，圈内比较流行的方案是 CSS Module 和 Vue scope。其原理都是通过生成带hash值的选择器来唯一确定某一DOM元素。
# 二、组件化
在我的理解中，组件化也是分治思想的一种实现形式，其主要目的和模块化基本一样，两者的区别在于处理对象的不同。
模块化只是在文件层面上，对代码或资源进行拆分；组件化更多的是在设计层面上，对可视化逻辑（UI界面）的拆分。前者针对单一资源，后者针对一个结构单元，它由实现同一功能逻辑的各种资源组成。
关于前端组件化开发理念，借用云龙大神的原话：
- 页面上的每个
独立的可视/可交互区域视为一个组件； 每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护；- 由于组件具有独立性，因此组件与组件之间可以
自由组合； - 页面只不过是组件的容器，负责组合组件形成功能完整的界面；
- 当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换。
# 规范化
规范化其实是工程化中很重要的一个部分，项目初期规范制定的好坏会直接影响到后期的开发质量。
规范化包括以下内容：
- 目录结构的制定（结合业务模型，分治思想）
- 编码规范（ESLint、StyleLint）
- 命名规范（文件夹命名、文件命名、变量命名等）
- 前后端接口规范（接口返回格式、特殊请求头、错误码含义等）
- 文档规范（前端架构文档、组件和API的使用文档，注释等）
- Git分支管理（feature、fixbug、release、hotfix、master）
- 定期 CodeReview
# 自动化
# 一、自动化构建
Webpack是目前主流的自动化构建工具，万物皆可模块化，Webpack通过使用不同文件类型的Loader加载器解析文件，将其封装成拥有统一调用规则的单一模块；通过分析模块间的依赖关系拼装代码；同时支持各种插件通过Webpack的生命周期钩子执行回调，从而高度定制化编译结果。
基于Webpack强大的功能，它能代替人们处理一些繁琐的工作，如：
- 根据配置规则，合并、压缩JS、CSS文件
- 抽离CSS代码
- 自动合成精灵图
# 二、自动化部署
类似 Github 的 workflow
# 三、自动化测试
单元测试、接口测试、UI测试