前端发展的主要话题：一开始是「特效」，后来是「用户体验」，然后是「前后端分离」，再后来是「页面性能」，然后到最近的「模块化、工程化」，到现在的「以数据为中心」。

一、给大家缕一下前端的发展史：

我只说大概，有兴趣详细了解的大家可以去查资料。

前端在最初就是为了完成网页开发，后来要同时完成5-10张甚至更多页面开发。

• 前端的工作内容就从简单的网页开发，拆分成模块开发，再拆分到前后端分离。过渡到可视化搭建系统等等。
• 职能范围从网页开发逐渐过渡到后端、全栈。
• 领域范围也从网页开发细分到PC端开发到移动端、游戏开发、Node.js开发以及架构师。
• 工程内容从最开始的时候jQuery代码就能搞定的阶段到现在需要构建、打包、集成、测试，灰度等高度工程体系化的复杂程度。

前后端分离到工程完善。Node.js和NPM生态初步建立的阶段，阿里借助node.js做前后端分离的尝试，在很多质疑当中，PHP最后怎么样你们也知道，基本废弃了Java的web容器。前端在node.js生态之下，也开始有了express、koa、egg、begg这样的web应用框架开源，也开始有了借助node.js完成的工程脚手架套件。

前后端的分离对前端开发的效率上没有什么太多改进，反而是前端工程体系上更加完善和健全。以前叫切图在，从前后端分离之后就不是了！因为前端的工程体系，比如IDE、研发、构建、打包、集成、测试、灰度、生产服务等等。不比后端差多少。

前端后分离阶段结束后移动端就兴起了，移动端浏览器的发展若是，赶不上APP用户体验，所以前端的工作也从PC端转向了移动端。

二、说回什么是前端工程化

前端工程化的主要目标就是解放生产力，提高生产效率，通过一系列的规范，借助工具和框架解决前端开发以及前后端协作的一些问题。

工程化表现：

一切以提高效率、降低成本、质量保障为目的的手段都是工程化。

• 创建：手脚架
• 编码：代码的规范/格式化、代码效率
• 预览：热更新、Mock、Source Map
• 代码提交：项目整体检查
• 代码提交：项目整体检查
• 部署：自动发布

工程化并不是某一个工具，工具只是实现工程化的方式，比如vue-cli；

前端工程化是把软件工程相关的方法和思想应用到前端开发中。

狭义上：将开发阶段的代码发布到生产环境，包含：构建、分支管理、自动化测试，部署

广义上：前端工程化应该包含从编码开始到发布，运行和维护阶段。

三、前端工程化的特点

前端工程化可以分成四个方面来说，分别为模块化、组件化、规范化和自动化。

模块化

模块化是指将一个文件拆分成多个相互依赖的文件，最后进行统一的打包和加载，这样能够很好的保证高效的多人协作。其中包含

JS 模块化：CommonJS、AMD、CMD 以及 ES6 Module。

CSS 模块化：Sass、Less、Stylus、BEM、CSS Modules 等。其中预处理器和 BEM 都会有的一个问题就是样式覆盖。而 CSS Modules 则是通过 JS 来管理依赖，最大化的结合了 JS 模块化和 CSS 生态，比如 Vue 中的 style scoped。

资源模块化：任何资源都能以模块的形式进行加载，目前大部分项目中的文件、CSS、图片等都能直接通过 JS 做统一的依赖关系处理。

组件化

不同于模块化，模块化是对文件、对代码和资源拆分，而组件化则是对 UI 层面的拆分。

通常，我们会需要对页面进行拆分，将其拆分成一个一个的零件，然后分别去实现这一个个零件，最后再进行组装。 在我们的实际业务开发中，对于组件的拆分我们需要做不同程度的考量，其中主要包括细粒度和通用性这两块的考虑。 对于业务组件，你更多需要考量的是针对你负责业务线的一个适用度，即你设计的业务组件是否成为你当前业务的 “通用” 组件。

规范化

正所谓无规矩不成方圆，一些好的规范则能很好的帮助我们对项目进行良好的开发管理。规范化指的是我们在工程开发初期以及开发期间制定的系列规范，其中又包含了

项目目录结构

编码规范：对于编码这块的约束，一般我们都会采用一些强制措施，比如 ESLint、StyleLint 等。

• 联调规范
• 文件命名规范
• 样式管理规范：目前流行的样式管理有 BEM、Sass、Less、Stylus、CSS Modules 等方式。
• git flow 工作流：其中包含分支命名规范、代码合并规范等。
• 定期 code review … 等等

自动化

从最早先的 grunt、gulp 等，再到目前的 webpack、parcel。这些自动化工具在自动化合并、构建、打包都能为我们节省很多工作。而这些只是前端自动化其中的一部分，前端自动化还包含了持续集成、自动化测试等方方面面。

早期的前端工程化解决方案：

grunt（ https://www.gruntjs.net/ ）

gulp（ https://www.gulpjs.com.cn/ ）

目前主流的前端工程化解决方案：

webpack（ https://www.webpackjs.com/ ）

parcel（ https://zh.parceljs.org/ ）

欢迎看现在的解决方案进行学习：