浅说前端工程化

前言

以前看到一个问关于什么是前端工程化的帖子，这个问题以前面试的时候也被问过，如今就系统的整理一下，分享给你们。

什么是前端工程化

大致的来讲，前端工程化有两层含义：

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...