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

发表于 更新于 分类于 阅读次数：

本篇博文承接前端工程自动化入门系列的第一篇：《初探前端自动化测试–以 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-essential 和wget、git那些依赖。连 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：添加徽章步骤，可以说是非常具体了