前端工程化
前端工程化就好比修房子:
原来一个人修茅草屋转变为一群人修楼房
楼房不仅是外观好看而且质量更高,可拓展性也强
如果用修茅草屋的方式去修楼房,不仅效率地下,也会为日后埋下无穷的隐患
目前来说，web业务日益复杂化和多元化，前端开发从WebPage模式为主转变为WebApp模式为主了
在模式的转变下，当工程复杂就会产生许多问题，比如：
- 如何进行高效的多人协作？
- 如何保证项目的可维护性？
- 如何提高项目的开发质量？
- 如何降低项目生产的风险？
- ...
前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间
前端工程化就是为了让前端开发能够“自成体系”，可以从模块化、组件化、规范化、自动化四个方面思考。
可采用的方式
- 模块化
- js模块化
- css模块化
- 静态资源模块化
- 组件化
- 页面组件化
- 规范化
- 目录结构
- 编码规范
- API规范
- Git提交规范
- 技术文档规范
- ...
- 自动化
- 自动化测试
- 自动化部署
- 自动化构建
模块化
模块化只是在文件层面上，对代码或资源的拆分
将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载
js模块化
- CommonJS:最早是 Node 在使用，目前也仍然广泛使用(Webpack)Node 中的模块管理已经和 CommonJS 有一些区别
- ES Module:原生实现的模块化方案
- AMD/CMD:目前很少使用
- 使用过的系列中RequireJS 使用AMD规范
css模块化
- sass/less/stylus:文件拆分
- css module:使用js管理依赖(如:Vue scoped style)
SASS、LESS、Stylus等预处理器实现了CSS的文件拆分，但没有解决CSS模块化的一个重要问题：选择器的全局污染问题
静态资源模块化
- webpack
- css,图片,字体等等文件统一使用js控制依赖
- 使用loader对各种资源做各种事情
组件化
而组件化是在设计层面上，对UI（用户界面）的拆分。
从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元
页面是个大型组件，可以拆成若干个中型组件，然后中型组件还可以再拆，拆成若干个小型组件，小型组件也可以再拆，直到拆成DOM元素为止。DOM元素可以看成是浏览器自身的组件，作为组件的基本单元。
规范化
约定优于配置
- 项目目录结构
- 编码规范
- html
- css
- js
- 命名
- API接口规范
- 前后端分离
- git commit规范
- 文档规范
- ...
自动化
任何简单机械的重复劳动都应该让机器去完成。
- 图标合并
- 持续集成
- 自动化构建
- 自动化部署
- 自动化测试
参考