前端工程化探索与实践（前端工程化实战）

原创作者 ：龙波@招聘FE 58招聘技术团队

“Computers do not solve problems, they execute solutions” - Laurent Gasser

Github2016年开源报告又给前端开发者打了一针鸡血，Javascript依然是最流行的语言，流行就意味着推陈出新，不断的丢弃和不断的创造，ES6、TypeScript，Sass、Less，Vue、React，Gulp、Webpack层出不穷，这正是每一个FEer正在经历的最痛苦也是最美好的阶段。随着业务规模快速扩张和不断细化，我们需要随着新技术的潮流持续的升级我们的技术方案来应对业务的变化，“make solutions,solve problems”。本文将介绍一下我们在前端工程化的一些探索和实践。

话不多言，先列大纲

• 库/框架选型

• 模块化/组件库

• 构建优化

• 代码部署

• 工具集成

• 开发流程汇总

第一部分：库/框架选型

提到技术选型，每一种库或者框架都有它各自适合的场景，所以在技术选型之初，就要充分的去了解业务，分析每一种框架的优缺点和适用性，选定某个框架和某些库，就会直接影响或者决定了后续功能代码的实现方式。以移动端用户产品为例：

1.首先要轻量级，SEO友好

2.前后端分离，异步渲染，选择一款轻便的渲染引擎是必要的

3.Javascript模块化，AMD、CMD，ES6、TypeScript根据项目状况而定

4.CSS可以选用Sass+ Compass、Less

5.DOM操作通常用zepto.js，如果用框架，那React和Vue一定是首选

6.构建工具Gulp或Webpack

（网络图）

选用框架，虽然学习成本高一点，但是规范性强，一切有规可循。还是以我们的项目为例，并没有选用框架而使用的是zepto、esl、Sass，构建工具是Gulp，也满足了常规业务的发展，Javascript模块和Sass模块在一定程度上做到了业务分离和复用，模板引擎上选用了小而美的artTemplate，使异步加载的内容更加直接和易于维护。

在言必谈React的当下，我们也有自己的重构计划，在新业务场景下积极拥抱新的开发方式。

第二部分：模块化/组件库

随着业务和团队的不断发展，业务解耦和功能封装是十分必要的。模块独立就不用担心新功能对老业务产生污染；封装基础业务逻辑，就省得其他人重复去造轮子，在一定程度上提升团队的开发效率，也是个人和团队在业务和技术上的积累。

我们的组件都放在厂内Gitlab仓库上（虽然不多），Javascript模块遵循AMD规范，CSS使用Sass编写，可以通过工具方便的安装和卸载，在后面会介绍。

公共代码作为技术积累，方便团队成员复用，但是业务模块化一定要以业务抽象和行为分离作为标准

肯定有人会说“都组件化了，还谈什么模块化”，现在React大热，大家积极拥抱吧。

第三部分：构建优化

选型敲码还不够，诸如sass必须编译成css才能使用，代码还需要校验、合并压缩，前后端独立开发需要小而美的本地服务器，图片需要压缩，在移动端还需要进行px到rem的转换等等处理。这时候就要选择一个顺手的构建工具了，Gulp、Webpack任你选，FIS3也可以。

需要具备的基本自动化流程：

1.Sass/Less ->CSS编译

2.CSS Autoprefixer前缀补全

3.javascript的打包

4.artTemplate、Vue、Underscore Template等模板文件编译

5.Javascript、CSS、Image、Webfonts的压缩

6.静态服务器

7.监听文件变动，自动刷新浏览器

8.模拟数据，Ajax拦截

所以我们参考了tmt-workflow基于gulp4.0打造了自己的工作流，满足以上功能外，并按照工程特点进行了定制。

第四部分：代码部署

经过构建优化，就可以测试部署了，手动上传FTP，实在不符合懒癌程序员的气质，所以构建工具还要有以下功能

1.自动添加MD5版本号

2.自动上传FTP

添加MD5是为了防止CDN在服务端的缓存，同时会产生一个资源表manifest.json，记录资源路径和名称的变化，可以实现静态文件的非覆盖发布。上传FTP也实现了定制化，将不同类型的文件上传到各自对应的目录中。

对于线上，厂内现在使用的是服务端更新版本的方案TMS，暂时未开启版本更新，修改配置即可开启。

第五部分：工具集成

上面四个部分已经可以作为一个较完整的开发流程了，但是真正开发的时候就会发现，虽然理论都有了，但是就是不知道如何着手，项目结构是怎样的，根据项目结构的不同如何对构建配置进行调整，公共组件也有了，但是从哪里找，如何方便的管理安装等等都是待解的问题，这时候我们需要用工具去完成这些事情，那就有了我们的集成工具upack。

upack主要具备以下三项功能：

1.项目脚手架，分为组件项目和工程项目

a)通过upackinit[-C|-P]的参数，分别产生组件项目和工程项目的项目结构，按照既定的项目规范就可以进行开发了

2.公共组件管理：组件安装、卸载和版本控制，还有组件搜索等功能

a)首先通过第一步开发一个组件，创建tag并推送到远程仓库。如果组件进行了更新了，会要求创建新的tag，才能推送到远程仓库，对组件版本进行了控制。

b)在一个工程项目引用到了若干组件，通过upack install xxx@1.0.0就可以将这个组件的1.0.0版本安装到本地，支持卸载和组件依赖关系分析，同时还有一个类似于package.json的文件component.json来记录已安装组件的信息。

c)同时还有一些其他辅助功能，比如搜索组件：upack search xxx，就能将相关的组件列出来，等等。

3.工程项目的构建流程（基于gulp4.0）

a)初始化一个工程项目后，首先通过npm install将项目依赖的模块安装好，然后执行gulp dev即完成开发模式下的项目构建，通过browser-sync启动一个静态服务，进行前端的独立开发。

b)当开发完毕后，执行gulp dist-build即可完成文件合并、压缩，代码混淆等一系列优化处理，后面还会加上代码规范检查，提高代码验收质量。

c)最后部署测试环境，执行gulp dist-deploy后，会首先执行dist-build构建产出，然后根据文件类型（图片资源和文本资源）全量部署到FTP的不同目录中，以优化资源加载。

开发阶段至此结束。

第六部分：开发流程汇总

上面的描述可以说具备了一定的工程化要素，但是对于一个完备的项目流程，肯定还需要有更多的质量保障和流程工具，比如代码分支管理，测试回归，code review，持续集成等。下图是我们正在实施的工作流：

1.在Gitlab上完成代码管理，并组织code review。

2.通过upack+Gulp完成组件管理和工

程开发。

3.Jenkins负责持续集成，监听变化、调用构建任务和部署测试

然后呢，就没有了然后了。在前端技术发展如此迅猛，百花齐放的时代，我们希望能够面向业务场景提供一个规范的、可执行的、自动化的工作流程和解决方案，让团队的开发者能够更加专注在业务和技术提升上。

世上没有真正的坦途，但是每条路都有各自的风景，尽情享受在路上的感觉吧。路漫漫其修远兮，吾将上下而求索。

参考文章

1、http://nvie.com/posts/a-successful-git-branching-model/

2、https://github.com/airbnb/javascript

3、https://github.com/amfe/lib-flexible

4、https://github.com/fouber/blog/issues/2

5、https://blog.coding.net/blog/frontend-engineering

6、https://github.com/xufei/blog/issues/19

7、http://www.cnblogs.com/yexiaochai/p/4901341.html

8、http://fex.baidu.com/blog/2014/03/fis-module/

参考开源项目

1、https://github.com/gulpjs/gulp

2、https://github.com/weixin/tmt-workflow

3、https://github.com/icefox0801/fecom

文章选自微信公众号：zhaopinteam_58

如果您有什么意见想法或者想看到更多干货，欢迎关注公众号：zhaopinteam_58