前端工程化

前端工程化主要应该从模块化、组件化、规范化、自动化四个方面来思考

模块化

JS的模块化

模块加载方案：CommonJS、AMD和CMD

现在ES6已经在语言层面上规定了模块系统，完全可以取代现有的CommonJS和AMD规范，而且使用起来相当简洁，并且有静态加载的特性。

CSS的模块化

1. SASS、LESS、Stylus等预处理器实现了CSS的文件拆分，但没有解决CSS模块化的一个重要问题：选择器的全局污染问题。

2. CSS命名风格来避免全局选择器的冲突：

(1) BEM风格

(2) Bootstrap风格；

(3) Semantic UI风格；

(4) NEC风格

3. 工具CSS模块化

(1) Shadow DOM是WebComponents的标准。它能解决全局污染问题，但目前很多浏览器不兼容，对我们来说还很久远；

(2) CSS in JS是彻底抛弃CSS，使用JS或JSON来写样式。这种方法很激进，不能利用现有的CSS技术，而且处理伪类等问题比较困难；

(3) CSS Modules仍然使用CSS，只是让JS来管理依赖。它能够最大化地结合CSS生态和JS模块化能力，目前来看是最好的解决方案。Vue的scoped style也算是一种。

资源的模块化（Webpack）

资源模块化后，有三个好处：

1. 依赖关系单一化。所有CSS和图片等资源的依赖关系统一走JS路线，无需额外处理CSS预处理器的依赖关系，也不需处理代码迁移时的图片合并、字体图片等路径问题；

2. 资源处理集成化。现在可以用loader对各种资源做各种事情，比如复杂的vue-loader等等。

3. 项目结构清晰化。使用Webpack后，你的项目结构总可以表示成这样的函数：dest = webpack(src, config)

组件化

组件化≠模块化

模块化只是在文件层面上，对代码或资源的拆分；

组件化是在设计层面上，对UI（用户界面）的拆分。

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

其实，组件化更重要的是一种分治思想。

页面上所有的东西都是组件。页面是个大型组件，可以拆成若干个中型组件，然后中型组件还可以再拆，拆成若干个小型组件，小型组件也可以再拆，直到拆成DOM元素为止。DOM元素可以看成是浏览器自身的组件，作为组件的基本单元。

传统前端框架/类库的思想是先组织DOM，然后把某些可复用的逻辑封装成组件来操作DOM，是DOM优先；而组件化框架/类库的思想是先来构思组件，然后用DOM这种基本单元结合相应逻辑来实现组件，是组件优先。这是两者本质的区别。

其次，组件化实际上是一种按照模板(HTML)+样式(CSS)+逻辑(JS)三位一体的形式对面向对象的进一步抽象。所以我们除了封装组件本身，还要合理处理组件之间的关系，比如（逻辑）继承、（样式）扩展、（模板）嵌套和包含等，这些关系都可以归为依赖。

其实组件化不是什么新鲜的东西，以前的客户端框架，像WinForm、WPF、Android等，它们从诞生的那天起就是组件化的。而前端领域发展曲折，是从展示页面为主的WebPage模式走过来的，近两年才从客户端框架经验中引入了组件化思想。其实我们很多前端工程化的问题都可以从客户端那里寻求解决方案。

组件化框架：Vue React Angular2

规范化

模块化和组件化确定了开发模型，而这些东西的实现就需要规范去落实。

规范化其实是工程化中很重要的一个部分，项目初期规范制定的好坏会直接影响到后期的开发质量。

1. 目录结构的制定

2. 编码规范（ESLint和StyleLint）

3. 前后端接口规范

4. 文档规范

5. 组件管理

6. Git分支管理及Commit描述规范

7. 定期CodeReview

8. 视觉图标规范

自动化

任何简单机械的重复劳动都应该让机器去完成。

前端工程化的很多脏活累活都应该交给自动化工具来完成

1. webpack自动图标合并

2. 持续集成

3. 自动化构建

4. 自动化部署

5. 自动化测试

前端自动化测试能够提高代码质量、减少人肉测试，（前端测试框架）

工程化总结

• js、jsx、babel 编译转化成 ES5 功能
• Vue 模板编译功能
• style、less、css、sass 编译功能
• font 编译功能
• 文件、图片的 base64 编译功能
• svg 编译功能
• 开发热更新功能
• 打包混编功能
• html 编译功能
• CDN 映射功能
• 引用统一路径功能
• ejs 模板编译功能
• CommonJS 的模块切割、懒加载功能
• 颗粒度提取第三方公共库 dll 功能
• 接口反向代理功能
• 打包完成后分析每个文件大小及组成结构功能
• GZIP 压缩功能
• 图片压缩功能
• 多骨架屏功能
• Http 服务类
• 核心扩展库
• 懒加载编写及规范标准
• API 工程化
• TypeScript
• PWA
• ESLint
• 兼容性处理方案
• 扩展服务类
• 核心库
• 组件库

参考：https://www.zhihu.com/question/24558375 (opens new window)