H5精准测试前端插装流程和对接发布平台

 

针对html应用，配置管理平台→组件信息，新增“是否接入istanbul”配置，若为否原编译打包流程不变，若为是测试环境编译打包流程需要增加如下几个步骤：

 

1、编译前对项目源文件中的 js文件 进行插桩，步骤如下

 1.1、nyc instrument ./src ./src2   （./src  为源文件目录   ./src2  为插桩后的目标目录文件）

 1.2、遍历/src2 目录下的 js文件，替换掉 ./src下的文件

nyc安装命令：npm install -g nyc

 

2、编译插桩后代码，按原流程编译即可无需改动（如：npm run build 、postbuild.sh等）

 

3、发布平台自动增加一个配置文件， autoconfig时在项目包的根目录下新增文件 VERSION_CONFIG.js  文件内容如下

VERSION_CONFIG.js

// appName、branch、commitID、ID分别为应用名、分支名、commitID、迭代ID，每次需要进行替换 const versionConfig = {   appName: "chopper-portal",   branch:"",   commitID: "123456",   ID: 22203 };   //versionConfig暴露给浏览器window window.versionConfig = versionConfig;

 

4、包目录文件（eg：dist）中index.html文件 </body> 前引入如下 js

 

index.html

<script type=text/javascript src=./VERSION_CONFIG.js></script> <script type=text/javascript src=https://www.test.pajk.cn/totoro-js-probe/probe.js></script>