再探前端自动化-持续集成

本篇博文承接前端工程自动化入门系列的第一篇:《初探前端自动化测试–以 Vue 为例》

传统开发模式中,项目经理等待所有模块都开发完成后再进行集成,出现 bug 则记录并分配责任人进行修改,之后再进行集成,直到通过测试为止持续循环。这个过程可能会出现如下问题:

  1. bug 总在最后才被发现(尤其是模块之间的依赖导致的 bug),并且越到项目后期,随着项目规模的膨胀,bug 变得愈发难以修复;
  2. 各个环节无效的等待时间较长,加上程序需要经常变更,导致软件交付时机无法保障;
  3. 用户无法随时看到项目演示原型,满意度低。

为了解决这些问题,“持续集成”(Continuous Integration)的概念被提出。

相关概念

持续集成(CI)是指将所有开发者工作副本频繁地(每天多次)合并到主干,始终保持可发布状态的做法。而持续集成服务器就是能够采用自动化的手段,实现项目持续集成的工具。

持续集成的具体工作流程:

  1. 本地开发(developing)
  2. 静态代码检查(linting)
  3. 单元测试(testing):代码仓库对 commit 操作配置钩子(hook),只要提交代码或者合并进入主干,就会跑自动化测试。这一轮可以先只跑单元测试。
  4. 合并进入主干(merging)
  5. 自动构建(building):将源码经过安装依赖、配置各种资源(CSS、JS、images),转换为可以运行的实际代码。之后会跑全面的测试。
  6. 自动发布(publishing):将可以直接部署的版本打包,发到生产服务器以启动应用。

持续集成之后还有持续交付持续部署,分别强调代码在任何时候都是可交付和可部署的。

持续集成的优点

  1. 自动化部署工作解放了重复性劳动,并减少手工集成的错误;
  2. 防止分支大幅偏离主干,而导致以后的集成难度变大,甚至难以集成;
  3. 持续集成缩短了开发、集成、测试、部署等各个环节的时间,从而减少等待时间,同时可以更快地发现、定位、修复问题并交付成果,使得产品可以快速迭代;
  4. 集成服务器一般都提供 Code review、代码质量检测等功能,帮助开发人员提高产品质量。

持续集成服务平台 - Travis

很多 PaaS 平台都提供了持续集成服务。Travis CI 是其中最著名的一个,对于开源项目可以免费使用。

每次跑测试时,Travis 提供的都是一个空白的环境。这个环境只有 Linux 基本的build-essentialwgetgit那些依赖。连 Node.js 的运行时都是现跑现安装的。因为 Travis 默认带有的依赖都是每个用户的机器上都会有的,所以一旦应用能在 Travis 上跑通,别的用户就都能安装上。

Travis 的使用方法如下:

首先,在官网 https://travis-ci.org/ 注册后选择需要开启集成测试的仓库。

travis.png

然后,需要在项目的根目录放一份配置文件.travis.yml来告诉 Travis 需要用什么版本的 Node 跑,以及跑测试的命令等信息。

1
2
3
4
5
6
7
8
// 一份简单的 .travis.yml
language: node_js
node_js:
- '4.2.5'
- '7.5.0'
script: npm run test

如果有用到数据库,则.travis.yml还需要添加一些内容。详细内容参考 Setting up Databases - Travis CI

之后将这份配置文件 push 上 github,Travis 就会被自动触发。下图是正在进行集成测试的 我的简历项目

CItesting.png

P.S. e2e 测试需要装 chrome 浏览器这个坑又出现了…简直阴魂不散。是不是要用 PhantomJS 才行啊…

我们先只跑单元测试好了。把.travis.yml更改一下:script: npm run unit,再 push 到 github 上。过一会就看到测试通过了。可以把 BlingBling 的 build 徽章加进项目的 README.md 中,来显示项目的构建状态了(徽章添加方案可见参考资料):

badage-sample.png

参考资料

写作资料

扩展阅读

前端开源项目持续集成三剑客 | EFE Tech:添加徽章步骤,可以说是非常具体了