本文会介绍一种前端JS代码测试覆盖率平台的搭建思路。提供了由简单到复杂的三个场景，并分别提供了不同场景下合适的实现代码覆盖率解决方案。
1.场景1单版本，单次测试的覆盖率统计
要实现这种最简单的场景，有很多好用的插件可以选择：
上述插件各有优劣，但均可以在一定程度上满足这个简单的场景。当然这个场景存在局限性：
1.单版本，单次测试
2.一般用于单元测试、前端自动化
3.报告生成在本地
4.不支持多次测试覆盖率叠加
如果需要突破上述局限性，可以参考一下场景2是否能满足需求。
2.场景2单版本，多终端多次测试的覆盖率统计
要实现这种扩展场景，我们可以找到一些既有的实践，都是基于场景1中列举的插件的开源代码做的，举其中两个例子：
当然，场景2依然存在一些局限性，于是我设计了场景3，来满足当前场景的一些局限性：
1.单项目，单版本
2.数据无统一管理，只能导成文件
3.Repo无法自动匹配更新
3.场景3多版本，多终端多次测试的覆盖率统计
因为场景3存在大量定制化的成分，因此必然存在不少地方需要自己实现。我选择在Istanbul-Middleware的基础上进行改造。
3.1.摸透Istanbul-Middleware的使用方法
根据Git中的说明以及对demo的研究，想要把istanbul-middleware应用到自己的前端工程，可以分为五步：
3.1.1.部署middleware
将istanbul-middleware的代码clone下来，并部署在某个服务器上，使默认接口可用。默认接口的设计详见repo的readme。
3.1.2.插桩
使用Istanbul的插件给前端代码插桩。
以酷家乐的某个前端repo为例，它使用babel编译打包，可使用babel-plugin-Istanbul插桩，具体实现方法，就是在babel的配置文件.babelrc中添加istanbul插件。参考：github.com/istanbuljs/babel-plugin-istanbul
对于其他类型的JS前端工程，可参考：github.com/istanbuljs/nyc
插桩前后代码对比如下。插桩后的代码可以在运行过程中，统计到某一行代码是否运行到，某一段逻辑是否被覆盖。
3.1.3.浏览器运行插桩后代码
浏览器运行的代码如果成功的被istanbul插桩，可以通过window.__coverage__查看前端代码运行过程中的覆盖率数据，如图所示。当然这个数据是一堆json结构，不具可视化。
3.1.4.前端代码调用middleware提供的接口
前端代码调用middleware/coverage/client接口，将window.__coverage__上传给中间件，供它统计。
3.1.5.查看代码覆盖率报告
middleware提供了看报告的页面，直接访问即可查看。
3.2.如何改造
既然我们已经知道了istanbul-middleware的使用方法，那么我们应该如何基于它实现场景3呢？
3.2.1.需求
多个repo的覆盖率分布统计；各个repo部署的各个环境分别统计；各个环境中，不同的版本分别统计。
3.2.2.架构
3.3.3.数据库
3.3.4.接口设计
client接口，增加一个version参数。
show接口，增加四个参数。
3.3.5.结果展示
前端代码在浏览器运行时，通过调用client时配置不同参数，区分repo、环境、版本。
查看特定repo特定version的覆盖率数据
查看某个路径下所有文件的覆盖率数据
查看覆盖率数据的原始数据源
渲染后台架构渲染集群几个机房，每个机房有proxy、renderservice、redis、mysqlProxy：控制节点，角色为master或slave，每个集群至少部署2个以成环；Render：渲染节点，每个集群有上百个；Redis：存储任务信息、配置信息等等，以主