分离 Hit 和 Map

在 CI 中收集 Babel 编译期间生成的初始覆盖率源文件

原因

收集完整的编译文件：在编译过程中，通过 @canyonjs/babel-plugin 插件，分析并解析每个编译文件的初始覆盖率文件，并将其保存到 .canyon_out 文件夹中。
早期收集以减轻压力：如果不报告初始覆盖率文件，这些覆盖率文件将在 UI 自动化测试期间被报告，这会产生巨大的传输压力。早期收集可以减少超过 90% 的传输压力。

报告初始覆盖率数据

@canyonjs/babel-plugin 插件在编译过程中为编译后的文件生成初始覆盖率文件，并将其保存到 .canyon_output 文件夹中。我们提供了 Tools CLI 命令行工具，您可以在 CI 中使用它向 Canyon 服务器报告。

.github/workflows/report-canyon-output.yml


name: Report Canyon Output
 
jobs:
  report:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "18" # 您可以根据项目要求修改 Node.js 版本
      - name: Install dependencies
        run: npm install
      - name: Generate output
        run: npm run build
 
      # Report .canyon_output file contents
      - name: Report output
        run: canyon-uploader map --dsn=https://canyonjs.org

更新 Babel 插件

将 keepMap 选项配置为 false

babel.config.js


module.exports = {
  plugins: [
    "istanbul",
    [
      "canyon",
      {
        keepMap: false,
      },
    ],
  ],
};

准备就绪

现在检查页面上的 window.coverage 对象，如截图所示。window.coverage 不再包含 map 数据，这可以大大降低 UI 自动化覆盖率收集过程中的大量传输成本。