前端工程化

前端工程化是根据具体的业务特点，将前端的开发流程、技术、工具、经验等规范化、标准化。
它的目的是最大程度地提高前端工程师的开发效率。

模块化

js模块化

在ES6之前，JavaScript一直没有模块系统，这对开发大型复杂的前端工程造成了巨大的障碍。对此社区制定了一些模块加载方案，如CommonJS、AMD和CMD等。
现在ES6已经在语言层面上规定了模块系统，完全可以取代现有的CommonJS和AMD规范，而且使用起来相当简洁，并且有静态加载的特性。

js模块一般根据逻辑进行划分，如：ajax、配置config、DOM操作、工具函数utils等。

规范确定了，然后就是模块的打包和加载问题

• 用Webpack+Babel将所有模块打包成一个文件同步加载

CSS模块化

通常是通过Sass、less等css预处理器的mixin来实现的。

资源模块化

Webpack的强大之处不仅仅在于它统一了JS的各种模块系统，更重要的是它的万能模块加载理念，即所有的资源都可以且也应该模块化。

组件化

组件化≠模块化

• 模块化只是在文件层面上或者逻辑层面上，对代码或资源的拆分；
• 而组件化是在设计层面上，对UI的拆分。

从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。

组件化理念：

• 页面上每个独立的可视/可交互区域为一个组件。
• 每个组件对应一个工程目录，组件所需的各种资源如HTML、CSS、js、图片等都在这个目录下维护
• 组件与组件间可以自由组合。

现在也有很多支持组件化的框架如React。

规范化

• 目录结构
• 编码规范：ESLint
• 前后端接口规范
• ……

自动化

能够使用工具来完成的事情就不要人工来做，使用gulp这种工具来完成工作流中的大部分任务

自动化构建

自动化部署