素晴らしいコミュニティモジュール

ソースマップ

ビルドステータス

NPM

これは、ここで説明するソースマップ形式を生成および使用するためのライブラリです

ノードで使用

1
$ npm install source-map

Webでの使用

1 2 3 4 5 6
<script src="https://unpkg.com/source-map@0.7.2/dist/source-map.js"></script> <script> sourceMap.SourceMapConsumer.initialize({ "lib/mappings.wasm": "https://unpkg.com/source-map@0.7.2/lib/mappings.wasm" }); </script>

目次

Consuming a source map

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
const rawSourceMap = { version: 3, file: 'min.js', names: ['bar', 'baz', 'n'], sources: ['one.js', 'two.js'], sourceRoot: 'http://example.com/www/js/', mappings: 'CAAC,IAAI,IAAM,SAAUA,GAClB,OAAOC,IAAID;CCDb,IAAI,IAAM,SAAUE,GAClB,OAAOA' }; const whatever = await SourceMapConsumer.with(rawSourceMap, null, consumer => { console.log(consumer.sources); // [ 'http://example.com/www/js/one.js', // 'http://example.com/www/js/two.js' ] console.log(consumer.originalPositionFor({ line: 2, column: 28 })); // { source: 'http://example.com/www/js/two.js', // line: 2, // column: 10, // name: 'n' } console.log(consumer.generatedPositionFor({ source: 'http://example.com/www/js/two.js', line: 2, column: 10 })); // { line: 2, column: 28 } consumer.eachMapping(function (m) { // ... }); return computeWhatever(); });

Generating a source map

詳細ガイド: JavaScriptへのコンパイル、およびソースマップを使用したデバッグ

SourceNode(高レベルAPI)を使用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
function compile(ast) { switch (ast.type) { case 'BinaryExpression': return new SourceNode( ast.location.line, ast.location.column, ast.location.source, [compile(ast.left), " + ", compile(ast.right)] ); case 'Literal': return new SourceNode( ast.location.line, ast.location.column, ast.location.source, String(ast.value) ); // ... default: throw new Error("Bad AST"); } } var ast = parse("40 + 2", "add.js"); console.log(compile(ast).toStringWithSourceMap({ file: 'add.js' })); // { code: '40 + 2', // map: [object SourceMapGenerator] }

SourceMapGenerator(低レベルAPI)を使用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
var map = new SourceMapGenerator({ file: "source-mapped.js" }); map.addMapping({ generated: { line: 10, column: 35 }, source: "foo.js", original: { line: 33, column: 2 }, name: "christopher" }); console.log(map.toString()); // '{"version":3,"file":"source-mapped.js","sources":["foo.js"],"names":["christopher"],"mappings":";;;;;;;;;mCAgCEA"}'

API

モジュールへの参照を取得します。

1 2 3 4 5 6 7 8
// Node.js var sourceMap = require('source-map'); // Browser builds var sourceMap = window.sourceMap; // Inside Firefox const sourceMap = require("devtools/toolkit/sourcemap/source-map.js");

SourceMapConsumer

SourceMapConsumerインスタンスは、生成されたソース内のファイル位置を指定することにより、元のファイル位置に関する情報を照会できる、解析されたソースマップを表します。

SourceMapConsumer.initialize(options)

使用している場合SourceMapConsumerのNode.jsの外側を、Web上で例えば、それは何のURLの負荷を知っている必要があるlib/mappings.wasm 。あなたが呼び出すことによって、それを通知しなければならないinitializeの任意構築する前にSourceMapConsumer秒。

オプションオブジェクトには、次のプロパティがあります。

  • "lib/mappings.wasm"lib/mappings.wasmファイルのURLを含むString
1 2 3
sourceMap.SourceMapConsumer.initialize({ "lib/mappings.wasm": "https://example.com/source-map/lib/mappings.wasm" });

新しいSourceMapConsumer(rawSourceMap)

唯一のパラメーターは、生のソースマップです( JSON.parseにできる文字列、またはオブジェクトのいずれかとして)。仕様によると、ソースマップには次の属性があります。

  • version :このマップがフォローしているソースマップ仕様のバージョン。

  • sources :元のソースファイルへのURLの配列。

  • names :個々のマッピングで参照できる識別子の配列。

  • sourceRoot :オプション。すべてのソースが相対的なURLルート。

  • sourcesContent :オプション。元のソースファイルのコンテンツの配列。

  • mappings :実際のマッピングを含むbase64VLQの文字列。

  • file :オプション。このソースマップが関連付けられている生成されたファイル名。

構築されたソースマップ消費者の約束が返されます。

SourceMapConsumerが使用されなくなったら、そのdestroyメソッドを呼び出す必要があります。

1 2 3
const consumer = await new sourceMap.SourceMapConsumer(rawSourceMapJsonData); doStuffWith(consumer); consumer.destroy();

または、 SourceMapConsumer.withを使用して、 destroyを呼び出すことを忘れないようにすることもできます。

SourceMapConsumer.with

rawSourceMapおよびSourceMapConsumerから新しい新しいSourceMapConsumerrawSourceMapsourceMapUrl (詳細についてはSourceMapConsumerコンストラクターを参照し、Theを呼び出します。 async function f(SourceMapConsumer) -> Tを新しく構築したコンシューマーで、 fが完了するのを待ちdestroy ON The Consumerを呼び出しdestroy fを返します。の戻り値。

f完了した後は、コンシューマーを使用しないでください。

withを使用するwithf完了すると自動的に呼び出されるため、コンシューマーでdestroyを手動で呼び出すことを覚えておく必要はありません。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
const xSquared = await SourceMapConsumer.with( myRawSourceMap, null, async function (consumer) { // Use `consumer` inside here and don't worry about remembering // to call `destroy`. const x = await whatever(consumer); return x * x; } ); // You may not use that `consumer` anymore out here; it has // been destroyed. But you can use `xSquared`. console.log(xSquared);

SourceMapConsumer.prototype.destroy()

手動で管理されているこのソースマップコンシューマーに関連付けられたwasmデータを解放します。

1
consumer.destroy();

または、 SourceMapConsumer.withを使用して、 destroyを呼び出すことを忘れないようにすることもできます。

SourceMapConsumer.prototype.computeColumnSpans()

生成された各マッピングの最後の列を計算します。最後の列は包括的です。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
// Before: consumer.allGeneratedPositionsFor({ line: 2, source: "foo.coffee" }) // [ { line: 2, // column: 1 }, // { line: 2, // column: 10 }, // { line: 2, // column: 20 } ] consumer.computeColumnSpans(); // After: consumer.allGeneratedPositionsFor({ line: 2, source: "foo.coffee" }) // [ { line: 2, // column: 1, // lastColumn: 9 }, // { line: 2, // column: 10, // lastColumn: 19 }, // { line: 2, // column: 20, // lastColumn: Infinity } ]

SourceMapConsumer.prototype.originalPositionFor(generatedPosition)

生成されたソースの行と列の位置について、元のソース、行、および列の情報を返します。引数は、次のプロパティを持つオブジェクトのみです。

  • line :生成されたソースの行番号。このライブラリの行番号は1ベースです(基になるソースマップ仕様は0ベースの行番号を使用することに注意してください-このライブラリは変換を処理します)。

  • column :生成されたソースの列番号。このライブラリの列番号は0から始まります。

  • biasSourceMapConsumer.GREATEST_LOWER_BOUNDまたはSourceMapConsumer.LEAST_UPPER_BOUND 。正確な要素が見つからない場合に、それぞれ、検索している要素よりも小さいまたは大きい最も近い要素を返すかどうかを指定します。デフォルトはSourceMapConsumer.GREATEST_LOWER_BOUNDです。

そして、オブジェクトは次のプロパティで返されます。

  • source :元のソースファイル。この情報が利用できない場合はnull。

  • line :元のソースの行番号。この情報が利用できない場合はnull。行番号は1から始まります。

  • column :元のソースの列番号。この情報が利用できない場合はnull。列番号は0から始まります。

  • name :元の識別子。この情報が利用できない場合はnull。

1 2 3 4 5 6 7 8 9 10 11
consumer.originalPositionFor({ line: 2, column: 10 }) // { source: 'foo.coffee', // line: 2, // column: 2, // name: null } consumer.originalPositionFor({ line: 99999999999999999, column: 999999999999999 }) // { source: null, // line: null, // column: null, // name: null }

SourceMapConsumer.prototype.generatedPositionFor(originalPosition)

提供された元のソース、行、および列の位置に対して生成された行および列の情報を返します。唯一の引数は、次のプロパティを持つオブジェクトです。

  • sourcesourceのファイル名。

  • line :元のソースの行番号。行番号は1から始まります。

  • column :元のソースの列番号。列番号は0から始まります。

そして、オブジェクトは次のプロパティで返されます。

  • line :生成されたソースの行番号、またはnull。行番号は1から始まります。

  • column :生成されたソースの列番号またはnull。列番号は0から始まります。

1 2 3
consumer.generatedPositionFor({ source: "example.js", line: 2, column: 10 }) // { line: 1, // column: 56 }

SourceMapConsumer.prototype.allGeneratedPositionsFor(originalPosition)

指定された元のソース、行、および列に対して生成されたすべての行および列情報を返します。列が指定されていない場合は、検索している行またはマッピングがある次に近い行のいずれかに対応するすべてのマッピングを返します。それ以外の場合は、指定された行に対応するすべてのマッピングと、検索している列、またはオフセットがある次に近い列のいずれか。

唯一の引数は、次のプロパティを持つオブジェクトです。

  • sourcesourceのファイル名。

  • line :元のソースの行番号。行番号は1から始まります。

  • column :オプション。元のソースの列番号。列番号は0から始まります。

オブジェクトの配列が返され、それぞれに次のプロパティがあります。

  • line :生成されたソースの行番号、またはnull。行番号は1から始まります。

  • column :生成されたソースの列番号またはnull。列番号は0から始まります。

1 2 3 4 5 6 7
consumer.allGeneratedpositionsfor({ line: 2, source: "foo.coffee" }) // [ { line: 2, // column: 1 }, // { line: 2, // column: 10 }, // { line: 2, // column: 20 } ]

SourceMapConsumer.prototype.hasContentsOfAllSources()

ソースマップにリストされているすべてのソースのソースコンテンツが埋め込まれている場合はtrueを返し、そうでない場合はfalseを返します。

このメソッドが返す言い換えれば、 true 、そしてconsumer.sourceContentFor(s) 、すべてのソースのために成功するsconsumer.sources

1 2 3 4 5 6 7
// ... if (consumer.hasContentsOfAllSources()) { consumerReadyCallback(consumer); } else { fetchSources(consumer, consumerReadyCallback); } // ...

SourceMapConsumer.prototype.sourceContentFor(source [、returnNullOnMissing])

指定されたソースの元のソースコンテンツを返します。唯一の引数は、元のソースファイルのURLです。

指定されたソースのソースコンテンツが見つからない場合は、エラーがスローされます。オプションで、2番目のパラメーターとしてtrueを渡して、代わりにnull返します。

1 2 3 4 5 6 7 8 9 10 11
consumer.sources // [ "my-cool-lib.clj" ] consumer.sourceContentFor("my-cool-lib.clj") // "..." consumer.sourceContentFor("this is not in the source map"); // Error: "this is not in the source map" is not in the source map consumer.sourceContentFor("this is not in the source map", true); // null

SourceMapConsumer.prototype.eachMapping(callback、context、order)

元のソース/行/列とこのソースマップで生成された行/列の間の各マッピングを繰り返します。

  • callback :各マッピングで呼び出される関数。マッピングの形式は{ source, generatedLine, generatedColumn, originalLine, originalColumn, name }

  • context :オプション。指定した場合、このオブジェクトは、そのcallbackが呼び出されるたびにthis値になりcallback

  • orderSourceMapConsumer.GENERATED_ORDERまたはSourceMapConsumer.ORIGINAL_ORDERいずれか。生成されたファイルの行/列の順序または元のソース/行/列の順序でそれぞれ並べ替えられたマッピングを反復するかどうかを指定します。デフォルトはSourceMapConsumer.GENERATED_ORDERです。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
consumer.eachMapping(function (m) { console.log(m); }) // ... // { source: 'illmatic.js', // generatedLine: 1, // generatedColumn: 0, // originalLine: 1, // originalColumn: 0, // name: null } // { source: 'illmatic.js', // generatedLine: 2, // generatedColumn: 0, // originalLine: 2, // originalColumn: 0, // name: null } // ...

SourceMapGenerator

SourceMapGeneratorのインスタンスは、段階的に作成されるソースマップを表します。

new SourceMapGenerator([startOfSourceMap])

次のプロパティを持つオブジェクトを渡すことができます。

  • file :このソースマップが関連付けられている、生成されたソースのファイル名。

  • sourceRoot :このソースマップ内のすべての相対URLのルート。

  • skipValidation :オプションの場合はtrue 、それらが追加されると、マッピングの検証を無効にします。これは、パフォーマンスを向上させることができますが、最後の手段として、慎重に使用する必要があるとしても、その後、可能な場合、1は、テストを実行するときに、このフラグを使用しないでください。。。

1 2 3 4
var generator = new sourceMap.SourceMapGenerator({ file: "my-generated-javascript-file.js", sourceRoot: "http://example.com/app/js/" });

SourceMapGenerator.fromSourceMap(sourceMapConsumer)

既存のSourceMapConsumerインスタンスから新しいSourceMapGeneratorを作成します。

  • sourceMapConsumer
1
var generator = sourceMap.SourceMapGenerator.fromSourceMap(consumer);

SourceMapGenerator.prototype.addMapping(mapping)

元のソース行と列から、作成中のこのソースマップ用に生成されたソースの行と列に単一のマッピングを追加します。マッピングオブジェクトには、次のプロパティが必要です。

  • generated :生成された行と列の位置を持つオブジェクト。

  • original :元の行と列の位置を持つオブジェクト。

  • source :元のソースファイル(sourceRootに対して)。

  • name :このマッピングのオプションの元のトークン名。

1 2 3 4 5
generator.addMapping({ source: "module-one.scm", original: { line: 128, column: 0 }, generated: { line: 3, column: 456 } })

SourceMapGenerator.prototype.setSourceContent(sourceFile、sourceContent)

元のソースファイルのソースコンテンツを設定します。

  • sourceFile元のソースファイルのURL。

  • sourceContentソースファイルのコンテンツ。

1 2
generator.setSourceContent("module-one.scm", fs.readFileSync("path/to/module-one.scm"))

SourceMapGenerator.prototype.applySourceMap(sourceMapConsumer [、sourceFile [、sourceMapPath]])

ソースファイルのSourceMapをSourceMapに適用します。提供されたソースファイルへの各マッピングは、提供されたSourceMapを使用して書き換えられます。注:結果のマッピングの解像度は、このマップと提供されたマップの最小値です。

  • sourceMapConsumer :適用されるSourceMap。

  • sourceFile :オプション。ソースファイルのファイル名。省略した場合、sourceMapConsumer.fileが存在する場合はそれが使用されます。存在しない場合は、エラーがスローされます。

  • sourceMapPath :オプション。適用されるSourceMapへのパスのdirname。relativeの場合、SourceMapからの相対です。

    このパラメーターは、2つのSourceMapが同じディレクトリになく、適用されるSourceMapに相対ソースパスが含まれている場合に必要です。その場合、それらの相対ソースパスをSourceMapに対して書き換える必要があります。

    省略した場合、両方のSourceMapが同じディレクトリにあると見なされるため、書き直す必要はありません( '.'ても同じ効果があります)。

SourceMapGenerator.prototype.toString()

生成されているソースマップを文字列にレンダリングします。

1 2
generator.toString() // '{"version":3,"sources":["module-one.scm"],"names":[],"mappings":"...snip...","file":"my-generated-javascript-file.js","sourceRoot":"http://example.com/app/js/"}'

SourceNode

SourceNodesは、生成されたJavaScriptソースコードのスニペットの補間や連結を抽象化する方法を提供し、それらのスニペットと元のソースコードの間に関連付けられた行と列の情報を維持します。これは、コンパイラが出力する前に使用する可能性のある最終的な中間表現として役立ちます。生成されたJSとソースマップ。

new SourceNode([line、column、source [、chunk [、name]]])

  • line :このソースノードに関連付けられている元の行番号。元の行に関連付けられていない場合はnull。行番号は1から始まります。

  • column :このソースノードに関連付けられている元の列番号。元の列に関連付けられていない場合はnull。列番号は0から始まります。

  • source :元のソースのファイル名。ファイル名が指定されていない場合はnull。

  • chunk :オプション。すぐにSourceNode.prototype.addに渡されます。以下を参照してください。

  • name :オプション。元の識別子。

1 2 3 4 5
var node = new SourceNode(1, 2, "a.cpp", [ new SourceNode(3, 4, "b.cpp", "extern int status;\n"), new SourceNode(5, 6, "c.cpp", "std::string* make_string(size_t n);\n"), new SourceNode(7, 8, "d.cpp", "int main(int argc, char** argv) {}\n"), ]);

SourceNode.fromStringWithSourceMap(code、sourceMapConsumer [、relativePath])

生成されたコードとSourceMapConsumerからSourceNodeを作成します。

  • code :生成されたコード

  • sourceMapConsumer生成されたコードのSourceMap

  • relativePathの相対ソースこと任意パスsourceMapConsumerに対してであるべきです。

1 2
const consumer = await new SourceMapConsumer(fs.readFileSync("path/to/my-file.js.map", "utf8")); const node = SourceNode.fromStringWithSourceMap(fs.readFileSync("path/to/my-file.js"), consumer);

SourceNode.prototype.add(chunk)

生成されたJSのチャンクをこのソースノードに追加します。

  • chunk :生成されたJSコードの文字列スニペット、 SourceNode別のインスタンス、または各メンバーがそれらの1つである配列。
1 2 3
node.add(" + "); node.add(otherNode); node.add([leftHandOperandNode, " + ", rightHandOperandNode]);

SourceNode.prototype.prepend(chunk)

生成されたJSのチャンクをこのソースノードの前に追加します。

  • chunk :生成されたJSコードの文字列スニペット、 SourceNode別のインスタンス、または各メンバーがそれらの1つである配列。
1
node.prepend("/** Build Id: f783haef86324gf **/\n\n");

SourceNode.prototype.setSourceContent(sourceFile、sourceContent)

ソースファイルのソースコンテンツを設定します。これは、 sourcesContentフィールドのSourceMapに追加されます。

  • sourceFile :ソースファイルのファイル名

  • sourceContent :ソースファイルのコンテンツ

1 2
node.setSourceContent("module-one.scm", fs.readFileSync("path/to/module-one.scm"))

SourceNode.prototype.walk(fn)

このノードとその子のJSスニペットのツリーをウォークオーバーします。ウォーキング関数は、JSのスニペットごとに1回呼び出され、そのスニペットとそれに関連付けられた元のソースの行/列の場所が渡されます。

  • fn :トラバーサル関数。
1 2 3 4 5 6 7 8 9 10 11 12 13 14
var node = new SourceNode(1, 2, "a.js", [ new SourceNode(3, 4, "b.js", "uno"), "dos", [ "tres", new SourceNode(5, 6, "c.js", "quatro") ] ]); node.walk(function (code, loc) { console.log("WALK:", code, loc); }) // WALK: uno { source: 'b.js', line: 3, column: 4, name: null } // WALK: dos { source: 'a.js', line: 1, column: 2, name: null } // WALK: tres { source: 'a.js', line: 1, column: 2, name: null } // WALK: quatro { source: 'c.js', line: 5, column: 6, name: null }

SourceNode.prototype.walkSourceContents(fn)

SourceNodesのツリーをウォークオーバーします。ウォーキング関数は、ソースファイルのコンテンツごとに呼び出され、ファイル名とソースコンテンツが渡されます。

  • fn :トラバーサル関数。
1 2 3 4 5 6 7 8 9 10 11 12
var a = new SourceNode(1, 2, "a.js", "generated from a"); a.setSourceContent("a.js", "original a"); var b = new SourceNode(1, 2, "b.js", "generated from b"); b.setSourceContent("b.js", "original b"); var c = new SourceNode(1, 2, "c.js", "generated from c"); c.setSourceContent("c.js", "original c"); var node = new SourceNode(null, null, null, [a, b, c]); node.walkSourceContents(function (source, contents) { console.log("WALK:", source, ":", contents); }) // WALK: a.js : original a // WALK: b.js : original b // WALK: c.js : original c

SourceNode.prototype.join(sep)

Array.prototype.joinを除いてArray.prototype.joinと同様Array.prototype.join 。このソースノードの各子の間にセパレータを挿入します。

  • sep :セパレーター。
1 2 3 4 5 6
var lhs = new SourceNode(1, 2, "a.rs", "my_copy"); var operand = new SourceNode(3, 4, "a.rs", "="); var rhs = new SourceNode(5, 6, "a.rs", "orig.clone()"); var node = new SourceNode(null, null, null, [ lhs, operand, rhs ]); var joinedNode = node.join(" ");

SourceNode.prototype.replaceRight(pattern、replacement)

右端のソーススニペットでString.prototype.replaceを呼び出します。ソースノードの末尾などから空白をString.prototype.replaceする場合に便利です。

  • pattern :置き換えるパターン。

  • replacement :パターンを置換するもの。

1 2
// Trim trailing white space. node.replaceRight(/\s*$/, "");

SourceNode.prototype.toString()

このソースノードの文字列表現を返します。ツリーをウォークオーバーし、さまざまなスニペットをすべて1つの文字列に連結します。

1 2 3 4 5 6 7 8 9 10 11
var node = new SourceNode(1, 2, "a.js", [ new SourceNode(3, 4, "b.js", "uno"), "dos", [ "tres", new SourceNode(5, 6, "c.js", "quatro") ] ]); node.toString() // 'unodostresquatro'

SourceNode.prototype.toStringWithSourceMap([startOfSourceMap])

このソースノードのツリーの文字列表現に加えて、生成されたソースと元のソースの間のすべてのマッピングを含むSourceMapGeneratorを返します。

引数は、 new SourceMapGeneratorの引数と同じnew SourceMapGenerator

1 2 3 4 5 6 7 8 9 10 11 12
var node = new SourceNode(1, 2, "a.js", [ new SourceNode(3, 4, "b.js", "uno"), "dos", [ "tres", new SourceNode(5, 6, "c.js", "quatro") ] ]); node.toStringWithSourceMap({ file: "my-output-file.js" }) // { code: 'unodostresquatro', // map: [object SourceMapGenerator] }