source map
変換後のJSファイルに所定の形式のコメントを書くことでひもづけられる
format
ファイル形式
jsonで記述されているようだ
sourcemap: <url>
2. ソースファイル中に //# sourceMappingURL=<url>
のような形で指定する
@
も可なのは後方互換性のため
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
という値しかもたない
わかるのは、処理の流れくらいだろうか?
2024-07-28 10:46:39 元の変数名がわかることで、処理を置いやすくなるのが利点の一つ
2024-07-28 16:36:11 単体テストしたら無限ループに入ってしまった
extractSourceMapURL.tsimport { 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",
});
libraries
色々まとまっている
sourceMappingURL
をソースコードから抽出するpackage
Source Map Visualizer
矢印で結ばれるUIがかっこいい
対応関係がわかりやすい
Reference