还原源码覆盖率

前端应用编译形态各异，很多情况下是经过预编译后的 AST 交由 babel 进行转换，这样导致覆盖率无法直接映射到源码上，因此我们需要还原源码覆盖率。

Source Map

在前端开发中，通常会对 JavaScript 代码进行压缩、混淆或使用预处理器（如 TypeScript、Babel）进行转换，以提高性能和兼容性。这些处理会使得最终部署到生产环境的代码与原始源代码差异很大，导致调试变得困难。Source Map 解决了这个问题，它记录了编译后代码与原始代码之间的映射关系，使得开发者能够在浏览器的开发者工具中查看和调试原始代码。 — web.dev 

大多数情况下，您不需要手动获取 sourceMap 文件，因为大多数构建工具都会 预编译后的 AST 交由 babel 进行转换 的这个过程中传递了 sourceMap 文件。

但是在某些情况下，您可能需要配置 sourceMap 文件。

开启 sourceMap 选项的情况

const path = require('path');
 
module.exports = {
  entry: './build/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module:{
    rules: [
      {
        test: /\.(js|jsx)$/,
        use:['babel-loader'],
        exclude:'/node_modules/'
      }
    ]
  }
};

在这个例子中，webpack的入口文件是 ./build/main.js，这是tsc编译ts文件的产物。我们需要将 tsconfig.json 中的 sourceMap 设置为 true，才能保证sourceMap数据的传递。

{
  "compilerOptions": {
    "sourceMap": true
  }
}

手动设置 sourceMap 的情况

当您的sourceMap生成的方式为以下情况时，您需要手动设置sourceMap。

如何手动设置 sourceMap

此时您需要使用到分离hit和map，通过canyon-uploader在构建阶段侦测本地的sourceMap文件，Canyon会将他们与覆盖率初始数据匹配上传。