我对前端工程化的理解

5,054 阅读6分钟

什么是前端工程化?

目前来说,web业务日益复杂化和多元化,前端开发从WebPage模式为主转变为WebApp模式为主了。前端的开发工作在一些场景被认为只是日常的一项简单工作,或者只是某个项目的附属品,并没有被当作一个“软件”而认真对待。

在模式的转变下,前端都已经不是过去的拼几个页面和搞几个jq插件就能完成。当工程复杂就会产生很多问题,比如:

  • 如何进行高效的多人协作?
  • 如何保证项目的可维护性?
  • 如何提高项目的开发质量?
  • 如何降低项目生产的风险?

前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化,其主要目的是为了提高效率和降低成本,即提高开发过程中的开发效率,减少不必要的重复工作时间,而前端工程本质上是软件工程的一种,因此我们应该从软件工程的角度来研究前端工程。

“前端工程化”里面的工程指软件工程。

#如何做“前端工程化”? 前端工程化就是为了让前端开发能够自成体系,个人认为应该从模块化、组件化、规范化、自动化四个方面思考。

模块化

简单来说,模块化就是将一个大文件拆分成相互依赖的小文件,再进行统一的拼装和加载。
  • JS的模块化

在ES6之前,javascript一直没有模块系统,这对开发大型复杂的前端工程造成了巨大的障碍。对此社区制定了一些模块加载方案,如CommonJS、AMD和CMD等。

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

  1. 用webpack+babel将所有模块打包成一个文件同步加载,也可以搭乘多个chunk异步加载;
  2. 用system+babel主要是分模块异步加载;
  3. 用浏览器<script type="module">加载。
  • css的模块化

虽然sass、less、stylus等预处理器实现了css的文件拆分,但没有解决css模块化的一个重要问题:选择器的全局污染问题。

按道理,一个模块化的文件应该要隐藏内部作用域,只暴露少量接口给使用者。而按照目前预处理器的方式,导入一个css模块后,已存在的样式有被覆盖的风险。虽然重写样式是css的一个优势,但这并不利于多人协作。

为了避免全局选择器的冲突,需要制定css命名风格:

  1. ben风格
  2. bootstrap风格

但是这毕竟是弱约束。所以很赞同一句话:

与其费尽心思地告诉别人要遵守某种规则,以规避某种痛苦,倒不如从工具层面就消灭这种痛苦。

从工具层面,社区又创造出Shadow DOM、CSS in JS和CSS Modules三种解决方案。

  1. Shadow DOM是webComponents的标准。它能解决全局污染问题,但目前很多浏览器不兼容,对我们来说还很久远。
  2. css in js是彻底抛弃css,使用js或者json来写样式。这种方法很激进,不能利用现有的css技术,而且处理伪类等问题比较困难;
  3. css modules仍然使用css,只是让js来管理依赖。它能够最大化地结合css生态和js模块化能力,目前来看是最好的解决方案。vue的scoped style也算是一种。
  • 资源的模块化

webpack的强大之处不仅仅在于它统一了js的各种模块系统,取代了browserify、requireJS、SeaJS的工作。更重要的是它的万能模块加载理念,即所有的资源都可以且也应该模块化。

资源模块化后,优点是:

  1. **依赖关系单一化。**所有css和图片等资源的依赖关系统一走js路线,无需额外处理css预处理器的依赖关系,也不需处理代码迁移时的图片合并、字体图片等路径问题;
  2. **资源处理集成化。**现在可以用loader对各种资源做各种事情,比如复杂的vue-loader等等;
  3. **项目结构清晰化。**使用webpack后,你的项目结构总可以表示成这样的函数:dest=webpack(src, config)

组件化

从ui拆分下来的每个包含模板(html)+样式(css)+逻辑(js)功能完备的结构单元,我们称之为组件。

组件化≠模块化。模块化只是在文件层面上,对代码或资源的拆分;而组件化是在设计层面上,对ui(用户界面)的拆分。

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

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

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

其次,组件化实际是一种按照模板(html)+样式(css)+逻辑(js)三位一体的形式对面向对象的进一步抽象。

所以我们除了封装组件本身,还要合理处理组件之间的关系,比如(逻辑)继承、(样式)扩展、(模板)嵌套和包含等,这些关系都可以归为依赖。

目前市面上的组件化框架很多,主要有vue、react、angular。

规范化

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

比如:

  1. 目录结构的制定
  2. 编码规范
  3. 前后端接口规范
  4. 文档规范
  5. 组件管理
  6. git分支管理
  7. commit描述规范
  8. 视觉图表规范
  9. ……

自动化

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

  1. 图标合并
  2. 持续继承
  3. 自动化构建
  4. 自动化部署
  5. 自动化测试

原文地址:www.jianshu.com/p/88ed70476…