generated at
source map
minifytranspileしたあとのJavascriptと、元のソースコードの変数名との対応を記述したファイル
変換後のJSファイルに所定の形式のコメントを書くことでひもづけられる

format
ファイル形式
jsonで記述されているようだ
指定方法は以下のいずれかまたは両方を使う
sourcemap: <url>
2. ソースファイル中に //# sourceMappingURL=<url> のような形で指定する
source map URLを抽出する厳密な正規表現は /^[@#]\s*sourceMappingURL=(\S*?)\s*$/ https://tc39.es/source-map/#match-a-source-map-url-in-a-comment
@ も可なのは後方互換性のため
>The prefix for this annotation was initially //@ however this conflicts with Internet Explorer’s Conditional Compilation and was changed to //# .https://tc39.es/source-map/#match-a-source-map-url-in-a-comment
6.2.2.1. Extraction methods for JavaScript sourcesにソースコードからsource map URLを抽出するJSのサンプルコードが記されている
https://tc39.es/source-map/#extraction-methods-for-javascript-sources
/* */ styleのcommentでのみ使用できる
wasmにも使えるらしい
両方指定されている場合は、HTTP headerを優先する
<url> にはdata URLも指定可能

2021-06-28 13:46:39 使ってみたが、微妙
bundle minifyによって省略された変数が多く、それらは全て undefined という値しかもたない
これだとbreak pointを仕掛けても中身がわからない
わかるのは、処理の流れくらいだろうか?
2024-07-28 10:46:39 元の変数名がわかることで、処理を置いやすくなるのが利点の一つtakker

source map URLをsource fileから抽出するコード
2024-07-28 16:36:11 単体テストしたら無限ループに入ってしまった
evanw/source-map-visualization code.js finishLoadingCodeWithEmbeddedSourceMap に、data URLが巨大な場合も考慮したコードが有る
extractSourceMapURL.ts
import { createErr, createOk, Result } from "../option-t/mod.ts"; export interface InvalidURLError { name: "InvalidURLError"; message: string; } export interface NotFoundError { name: "NotFoundError"; message: string; } /** * Extracts the source map URL from the given code. * * This code is based on https://github.com/evanw/source-map-visualization/blob/f3e9dfec20e7bfd9625d03dd0d427affa74a9c43/code.js#L103-L145 under @evanw 's license. * * @param code - The code from which to extract the source map URL. * @param _lang - The language of the code (currently only supports `"js"`). * @returns The extracted source map URL as a `URL` object, or `null` if no source map URL is found. */ export const extractSourceMapURL = ( code: string, base: string | URL | undefined, ): Result<URL, InvalidURLError | NotFoundError> => { let url; // Check for both "//" and "/*" comments. This is mostly done manually // instead of doing it all with a regular expression because Firefox's // regular expression engine crashes with an internal error when the // match is too big. for (const match of code.matchAll(/\/([*/])[#@] *sourceMappingURL=/g)) { const start = match.index + match[0].length; const n = code.length; let end = start; while (end < n && code.charCodeAt(end) > 32) { end++; } if (end === start) continue; if (match[1] === "/" || code.indexOf("*/", end) > 0) { url = code.slice(start, end); break; } } return url ? URL.canParse(url, base) ? createOk(new URL(url, base)) : createErr({ name: "InvalidURLError", message: `Invalid URL: ${url}` }) : notFoundError; }; const notFoundError = createErr<NotFoundError>({ name: "NotFoundError", message: "Source map URL is not found", });
どちらもunambiguously links to a source mapには対応していない

libraries
色々まとまっている
sourceMappingURL をソースコードから抽出するpackage

Source Map Visualizer
esbuildの作者のevanw
矢印で結ばれるUIがかっこいい
対応関係がわかりやすい

Reference

#2024-07-28 10:47:48
#2021-06-27 10:18:00
#2021-06-26 22:29:08