{"_id":"@51jbs/webpack-coverage-plugin","name":"@51jbs/webpack-coverage-plugin","dist-tags":{"latest":"2.0.0"},"versions":{"2.0.0":{"name":"@51jbs/webpack-coverage-plugin","version":"2.0.0","description":"Webpack plugin for collecting code coverage during development and generating incremental self-testing reports","main":"dist/cjs/index.js","module":"dist/index.js","types":"dist/index.d.ts","keywords":["webpack","plugin","coverage","istanbul","self-testing"],"author":{"name":"chuanjing.li"},"license":"MIT","devDependencies":{"@babel/parser":"^7.28.5","@babel/traverse":"^7.28.5","@types/express":"^5.0.6","@types/jest":"^30.0.0","@types/node":"^18.0.0","@types/webpack":"^5.28.5","babel-plugin-istanbul":"^7.0.1","express":"^5.2.1","jest":"^30.2.0","ts-jest":"^29.4.6","typescript":"^4.9.0","webpack":"^5.104.0","webpack-cli":"^6.0.1"},"peerDependencies":{"webpack":"^5.0.0"},"scripts":{"build":"tsc && tsc -p tsconfig.cjs.json","test":"jest","dev":"tsc --watch"},"_id":"@51jbs/webpack-coverage-plugin@2.0.0","_integrity":"sha512-H4FasgpI4120SOHJSWWnHPQvNO2SjmLZrKZjKnwfbVDOxCuHQNYgA1+oIsyj2L+rQ4UU0oOx1elCxWj7waYkVA==","_resolved":"/tmp/4c11c7e0a1515a07a4458c56405c89b1/51jbs-webpack-coverage-plugin-2.0.0.tgz","_from":"file:51jbs-webpack-coverage-plugin-2.0.0.tgz","_nodeVersion":"20.19.6","_npmVersion":"10.8.2","dist":{"integrity":"sha512-H4FasgpI4120SOHJSWWnHPQvNO2SjmLZrKZjKnwfbVDOxCuHQNYgA1+oIsyj2L+rQ4UU0oOx1elCxWj7waYkVA==","shasum":"158ee943f705dfde040216be5f5f0807fb5fbfd6","tarball":"https://registry.npmjs.org/@51jbs/webpack-coverage-plugin/-/webpack-coverage-plugin-2.0.0.tgz","fileCount":24,"unpackedSize":230352,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBj8QCsxCHklVV/6sHClBVUPWj+UHpfZi3PTFyU+qa/jAiEA8RD0cIzIbZamTlNWo2uTOd0upA/Zt6Am3iJJx/NTJfU="}]},"_npmUser":{"name":"chuanjing729","email":"chuanjing729@gmail.com"},"directories":{},"maintainers":[{"name":"chuanjing729","email":"chuanjing729@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/webpack-coverage-plugin_2.0.0_1766043279177_0.8611560230841069"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-18T07:34:39.068Z","2.0.0":"2025-12-18T07:34:39.315Z","modified":"2025-12-18T07:34:39.656Z"},"maintainers":[{"name":"chuanjing729","email":"chuanjing729@gmail.com"}],"description":"Webpack plugin for collecting code coverage during development and generating incremental self-testing reports","keywords":["webpack","plugin","coverage","istanbul","self-testing"],"author":{"name":"chuanjing.li"},"license":"MIT","readme":"# webpack-coverage-plugin\n\nWebpack 插件用于在开发阶段收集代码覆盖率，并生成增量自测报告。\n\n## 功能特性\n\n- 动态插桩：在 DevServer 启动时对代码进行插桩\n- 实时收集：收集运行时的代码覆盖率数据\n- 增量报告：与 Git Diff 结合，生成增量自测报告\n- 开发者友好：提供悬浮控制台和快捷键操作\n- 影响范围分析：分析代码变更的影响范围，识别受影响的页面和组件\n- 运行时小气泡：在页面中显示实时覆盖率进度的悬浮气泡\n- 图表化报告：生成包含饼图、柱状图等可视化元素的HTML报告\n\n## 兼容性\n\n- Webpack 4.x 和 5.x\n- Vue 2.x 项目\n- 支持 CommonJS 和 ES Module\n- TypeScript 类型支持\n\n## 安装\n\n```bash\nnpm install @51jbs/webpack-coverage-plugin\n```\n\n## 使用方法\n\n### 1. 在 webpack 配置中引入插件\n\n```javascript\nconst { WebpackCoveragePlugin } = require('@51jbs/webpack-coverage-plugin');\n\nmodule.exports = {\n  // ... 其他配置\n  plugins: [\n    new WebpackCoveragePlugin({\n      enabled: process.env.ENABLE_SELF_TEST === 'true',\n      include: ['src/**/*.{js,ts,jsx,tsx}'],\n      exclude: [/node_modules/, /\\.test\\./, /\\.spec\\./]\n    })\n  ]\n};\n```\n\n### 2. 启用插件\n\n在开发时，设置环境变量启用插件：\n\n```bash\nENABLE_SELF_TEST=true npm run dev\n```\n\n### 3. 收集覆盖率数据\n\n在开发过程中完成自测后，通过以下方式之一上传覆盖率数据：\n\n1. 使用快捷键 (默认 Ctrl+Shift+C)\n2. 点击页面右下角的悬浮控制台按钮\n\n### 4. 运行时小气泡\n\n插件会在页面右下角显示一个悬浮气泡，实时显示当前的代码覆盖率进度：\n\n- 点击气泡可以展开详细信息面板\n- 气泡颜色根据覆盖率自动变化（红色<50%，黄色50-80%，绿色>80%）\n- 支持拖拽移动气泡位置\n- 支持最小化气泡\n- 详细面板包含影响范围分析结果\n- 可以通过enableOverlay选项禁用此功能\n\n### 5. 影响范围分析\n\n插件会自动分析代码变更的影响范围，帮助开发者识别可能受影响的页面和组件：\n\n- 自动识别受影响的页面列表\n- 自动识别受影响的组件列表\n- 评估影响程度（高/中/低）\n- 分析影响传播路径\n- 提供回归测试建议\n- 可以通过enableImpactAnalysis选项禁用此功能\n\n### 6. 查看自测报告\n\n插件会在每次构建完成后自动生成两种格式的自测报告：\n\n1. Markdown 格式：`<outputDir>/reports/self-test-report.md`\n2. HTML 格式：`<outputDir>/reports/self-test-report.html`\n\n报告包含测试环境信息、测试摘要和详细测试结果，其中HTML报告还包含丰富的图表：\n\n- 饼图：展示测试通过率分布\n- 柱状图：展示各组件/页面的代码行数和测试覆盖率\n- 进度条：直观显示整体测试进度\n- 热力图：展示代码复杂度分布\n- 表格：展示业务信息和影响范围分析结果\n\n## 配置选项\n\n| 选项 | 类型 | 默认值 | 描述 |\n|------|------|--------|------|\n| enabled | boolean | `process.env.ENABLE_SELF_TEST === 'true'` | 是否启用插件 |\n| include | RegExp \\| string[] | `[]` | 需要插桩的文件模式 |\n| exclude | RegExp \\| string[] | `[/node_modules/, /\\.test\\./, /\\.spec\\./]` | 需要排除的文件模式 |\n| outputDir | string | `'.coverage'` | 输出目录 |\n| enableImpactAnalysis | boolean | `true` | 是否启用影响范围分析 |\n| enableOverlay | boolean | `true` | 是否启用运行时小气泡 |\n\n## 开发指南\n\n### 构建项目\n\n```bash\nnpm run build\n```\n\n构建过程会生成两个版本的代码：\n- CommonJS 版本位于 `dist/cjs/` 目录\n- ES Module 版本位于 `dist/` 目录\n- TypeScript 类型定义文件位于 `dist/index.d.ts`\n\n### 运行测试\n\n```bash\nnpm test\n```\n\n测试套件包含：\n- 单元测试：验证插件核心功能\n- 集成测试：验证与 Webpack 的集成\n- 报告生成测试：验证报告生成功能\n\n### 示例项目\n\n查看 `examples/` 目录下的示例项目，了解如何在实际项目中使用插件。\n\n## 许可证\n\nMIT @chuanjing.li\n","readmeFilename":"README.md","_rev":"1-e2edac6e11408a6a2a2745e3262c1633"}