浅说前端工程化

4

前言

之前看到一个问关于什么是前端工程化的帖子,这个问题之前面试的时候也被问过,现在就系统的整理一下,分享给大家。

什么是前端工程化

大体的来说,前端工程化有两层含义:

  1. 广义的前端工程化

前端工程是软件工程的一个子类,指的是将软件工程的方法和原理运用在前端开发中, 目的是实现 高效开发有效协同质量可控

2.狭义的前端工程化

前端工程是指将 开发阶段 的代码转变成 生产环境 的代码的 一系列步骤
主要包括 构建 , 分支管理 , 自动化测试, 部署 等。

简单总结一下就是:

广义的前端工程是一个系统工程,需要从软件生命周期的各个方面入手,本质上属于管理科学的方法论。

狭义的前端工程是前端开发流程中的一部分,本质上属于软件技术的范畴和开发的最佳实践。我们平时提到的前端,如果特别说明,一般指的就是狭义上的前端工程。

为什么要提前端工程化

看了之前枯燥的概念,有的小伙伴可能要说了,'前端不就是将后端的数据以网页的形式呈现给用户么,只是一层视图,为什么需要工程化管理呢?'

写到这,不禁想到去年的一个帖子《在 2016 年学 JavaScript 是一种什么样的体验?》

简单来说,前端越来越复杂,设计的问题和环节也越来越多,不采用工程化管理,就无法很好的实现团队协同和降低复杂性。 具体的原因大概有以下几点:

 1. 前端范畴不断扩大。

早期的前端只需要适配桌面浏览器,而现在的前端,需要适配不同类型和尺寸的设备,包括移动端网页,app应用等。
    
    
 2. 前后端分离

早期的前端只是后端 MVC 框架的一层模块, 而现在的前端普遍是从后端接口获取数据,编写处理逻辑,各种前端mvc前端框架也层出不穷。
    
 

 3. 模块化开发的出现
    
现在的前端开发不再是从零写起,重复造轮子,而是会引用大量内部和外部的组件和模块,这也导致前端必须进行模块管理。
      
  

 4. 转码器的盛行
   
为了提高效率,前端工程往往不会直接写html,css,和js代码,而是改用其他格式书写,再用工具编译为目标格式。
比如用Jade 写HTML,用less/sass/stylus 编写CSS,用ES6/Typescript/.. 编写JavaScript.
        
 5. 开发流程和团队
早期的前端团队往往只有几个人,而现在的前端团队可以扩展到几十人,甚至上百人。每个人只负责自己的一块内容。
所以,如何协调多人多团队的工作,保证沟通顺畅,保证权限管理,越来越成为一大问题。   

前端工程化的具体内容

基于以上几点,总结一下前端工程化的具体内容:

1.代码规范: 保证团队所有成员以同样的规范开发代码。
2.分支管理: 不同的开发人员开发不同的功能或组件,按照统一的流程合并到主干。
3.模块管理: 一方面,团队引用的模块应该是规范的;另一方面,必须保证这些模块可以正确的加入到最终编译好的包文件中。
4.自动化测试:为了保证和并进主干的代码达到质量标准,必须有测试,而且测试应该是自动化的,可以回归的。
5.构建:主干更新以后,自动将代码编译为最终的目标格式,并且准备好各种静态资源,
6.部署。 将构建好的代码部署到生产环境。

以上。:)

推荐阅读:

http://www.cnblogs.com/ihardc...

你可能感兴趣的

载入中...