目标:
在本地代码运行时 通过点击触发代码覆盖率报告的生成 在代码覆盖率报告中显示自己的各个代码文件执行代码的百分比
首先使用 vue-cli 创建一个新项目 项目名称为 istanbul
vue create istanbul
进入项目 并下载包
cd istanbul
yarn
下载插件
yarn add --dev babel-plugin-istanbul chalk concurrently live-server nodemon rimraf axios express nyc
babel-plugin-istanbul 代码覆盖率的 babel 版支持工具
chalk 控制台输出带色儿的文字
concurrently 一次运行多个命令
live-server 自动刷新浏览器标签页的本地服务
nodemon 监听文件并自动刷新的 nodejs 本地服务
rimraf 删除文件和文件夹
axios 网络请求
express 本地服务
nyc 代码覆盖率报告生成工具
修改 babel.config.js
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
'istanbul',
{
"useInlineSourceMaps": false,
extension: ['.js', '.vue']
}
]
]
};
修改 package.json 文件
"scripts": {
"test": "concurrently \"npm run nodemon\" \"npm run serve\"",
"nodemon": "nodemon autoIstanbul.js --watch",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"nyc": {
"reporter": [
"html",
"text-summary"
],
"extension": [
".js",
".vue"
]
},
在 src/ 目录中添加文件 nycClient.js 用于前端项目触发代码覆盖率报告
import axios from 'axios';
let istanbulSync = () => {
axios.post(
'http://127.0.0.1:11118/istanbulSync',
{
coverage: JSON.stringify(window.__coverage__)
},
(res) => {
console.log('res', res);
}
);
};
window.onload = () => {
istanbulSync();
};
document.body.addEventListener('click', istanbulSync);
在 main.js 中引入 nycClient.js 文件
import './nycClient.js';
最关键的一步 自动覆盖率报告本地服务文件
创建 autoIstanbul.js 放到根目录
const fs = require('fs');
const express = require('express');
const app = express();
const { execSync } = require('child_process');
const liveServer = require('live-server');
const chalk = require('chalk');
const rimraf = require('rimraf');
// 清空文件夹
rimraf.sync('./.nyc_output/');
fs.mkdirSync('./.nyc_output');
// 设置跨域
app.all('*', function(req, res, next) {
res.header('Access-Control-Allow-Origin', req.headers.origin);
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Credentials', 'true');
res.header('Access-Control-Allow-Methods', '*');
res.header('Content-Type', 'application/json;charset=utf-8');
next();
});
// 设置接收json的大小
app.use(express.json({
limit: '100mb'
}));
app.use(express.urlencoded({ extended: true }));
// 设置静态页面 自测用的
app.get('*', (req, res) => {
res.send('autoIstanbul.js');
});
// 接收前端传参
app.post('/istanbulSync', async (req, res) => {
let parse = JSON.parse(req.body.coverage);
let date = new Date().getTime();
fs.writeFileSync(`./.nyc_output/${date}.json`, JSON.stringify(parse));
let message = '代码覆盖率同步成功!';
try {
execSync('nyc report --reporter=html', { encoding: 'utf8' });
} catch (error) {
message = '代码覆盖率同步失败!' + error;
}
console.log(chalk.green(message));
res.send(`${message}, 实时预览地址: http://localhost:11119`);
});
// 启动代码覆盖率后端服务
app.listen(11118, () => {
console.log(chalk.cyan('listening sync: http://localhost:11118'));
});
// 启动代码覆盖率前端标签页自动刷新服务
let params = {
port: 11119,
host: '0.0.0.0',
root: './coverage',
open: false,
file: 'index.html',
logLevel: 0,
middleware: [
function(req, res, next) {
next();
}
]
};
liveServer.start(params);
console.log(chalk.cyan('listening showHtml: http://localhost:11119'));
运行项目
yarn test
查看 vue 项目
http://localhost:8080
查看代码覆盖率报告
http://localhost:11119
image.gif
