ソースコードカバレッジの復元

フロントエンドアプリケーションのコンパイル形態は様々で、多くの場合、プリコンパイル後の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で、これはTypeScriptファイルをコンパイルした成果物です。sourceMapデータの受け渡しを確実にするために、tsconfig.jsonのsourceMapをtrueに設定する必要があります。

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

sourceMapを手動で設定する場合

sourceMapの生成方法が以下の場合、手動で設定する必要があります。

sourceMapの手動設定方法

この場合、hitとmapの分離を使用し、canyon-uploaderでビルド段階でローカルのsourceMapファイルを検出する必要があります。Canyonはそれらをカバレッジの初期データとマッチングしてアップロードします。