ソース マップとは、配布されるコードが元のソース コードにどのように対応付けされるかを記録する、独立した .map ファイルです。V3（バージョン 3）は、現在のソース マップのフォーマットです。V3 ソース マップは JSON 形式のファイルであり、mappings フィールドには、VLQ（可変長数量）エンコードされた Base64 を用いて行および列の位置情報がエンコードされています。
ブラウザーは開発者ツールが開いているときにのみソース マップを読み込むため、ユーザーに負担（コスト）をかけることはありません。
JSDefender Webpack プラグインを使用する際に、V3 ソース マップの生成を有効にするには、以下の手順を実行します。
- Webpack の設定でソース マップを有効にします。
- Webpack の設定で Terser を設定します。
- JSDefender の設定でソース マップを有効にします。
- 選択した JSDefender 手法を無効にします。
- スタック トレースを検証します。
1. Webpack でソース マップを有効にする
webpack.config.js ファイルを開き、devtool を "source-map" に設定します。
devtool: "source-map"これで Webpack のソース マップが有効になります。
2. Terser を設定する
ソース マップの精度を向上させるために、Webpack の設定で Terser を設定します。
Terser プラグインをインポートし、最適化設定を構成します。
const TerserPlugin = require("terser-webpack-plugin");
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
// Webpack 4 only:
// sourceMap: true,
terserOptions: {
compress: {
sequences: false,
collapse_vars: false,
reduce_vars: false,
reduce_funcs: false
}
}
})
]
}メモ：Webpack 4 では sourceMap: true が必要です。Webpack 5 では、ソース マップの生成は devtool: "source-map" によって制御されるため、Terser でのソース マップの追加設定を行う必要はありません。
3. JSDefender でソース マップを有効にする
プロジェクトのルート フォルダーにある jsdefender.config.json ファイルを開き、ルート レベルで sourceMaps を true に設定します。
{
"sourceMaps": true
}4. 選択した JSDefender 手法を無効にする
以下の JSDefender 手法を無効化します。
- localDeclarations
- exprSequence
- selfDefending
Terser の設定に従い、これらの手法を無効にすることで、ソース マップの精度が著しく向上します。
5. スタック トレースを検証する
ソース マップ生成の設定を行った後、以下の手順を実行します。
- アプリケーションをビルドします。
- ランタイム エラーを発生させます。
- ブラウザーのスタック トレースが、行と列のマッピングによって元のソース ファイルへと正しく復元されることを確認します。