前端工程化的思考

在移动时代到来之前，前端一直是作为项目的附属存在，并没有被当作一个真正的系统对待。但是在 Mobile First 和微服务化时代的到来，整个系统的开发越来越复杂，尤其是前后端分离理念的提出，使得前端变得越来越重要，前端的规模也急剧膨胀，前端已经不是简单的写几个页面或者开发几个 JQ 插件就能搞定的。当工程变得越来越复杂以后，一些问题就会随之出现，比如：如何进行高效的多人协作？如何保证项目的可维护性？如何提高项目投产部署的便捷性？如何提高项目的开发质量？如何降低项目生产的风险？这些问题都需要通过工程化的思维和方法去解决。

前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间，而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程。在 QCon 全球软件开发大会北京站上，与会嘉宾针对自己的前端工程化做了细致的介绍，结合建信金科的具体情况，个人认为前端工程化就是为了让前端开发能够“自成体系”，主要应该从模块化、组件化、规范化、自动化四个方面思考。

模块化

模块化就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。工程的模块化主要是根据工程的业务逻辑和组件特点，将工程拆分成不同的子工程，每个子工程可以单独编译打包发布，降低各自之间的耦合度。js 的模块化主要是利用打包工具比如 webpack+babel 的模式将所有模块系统进行打包，同步加载，也可以搭乘多个 chunk 异步加载。CSS 的模块化主要是利用 css modules 对 css 进行模块化拆分，即将所有的 css 交给文件由 js 来管理，这种技术最大程度利用了 css 的生态和模块化的原则，其中 vue 框架中的 scoped 就是这种技术的体现。资源的模块化也是利用 webpack 等对资源进行分类管理，避免重复资源的出现。

组件化

组件化是指将 UI 页面拆分成有“模板+样式+逻辑”组成的功能单元，称为组件。组件化不等于模块化，模块化是在资源和代码方面对文件的拆分，而组件化是在 UI 层面进行的拆分。传统前端框架的思想是以 dom 优先，先操作 dom，再写出可复用的逻辑单元来操作 dom，而组件化框架是组件优先，将 dom 和与之一起的逻辑组成一个组件，再进行引用。我们封装了组件后，还需要对组件间的关系进行判定，例如继承、扩展、嵌套、包含等，这些关系统称为依赖。

规范化

规范化是前端工程化很重要的一部分，项目前期规范制定的好坏，直接决定后期的开发质量，分为项目目录规范化，编码规范化，前后端接口规范化，git 分支管理，commit 描述规范，组件管理等编码规范化分为 htmlcss js img 命名规范这几类 接口规范，目的是规则先行，确保项目质量。

自动化

自动化是指利用各种持续集成手段，将简单重复的工作交给机器完成，例如自动化测试，自动化部署，自动化构建，持续继承等。

目前美团、头条、阿里等互联网公司在前端工程化方面已经有比较深入的研究，并提供了相关的解决方案，我们可以在前人的基础上，从上述四个角度对前端进行工程化改造，提升前端开发质量和效率。

原文链接：前端工程化的思考