この記事はSource Mapに対応した何かを作るためのライブラリとか仕様とかについて調べてメモった記事です。

利用する場合の話はSource Maps 101 – Tuts+ Code Tutorial等 検索すれば色々出てくると思います。

Source Mapとは

まずはSource Map Revision 3 Proposalを見て置きましょう。
ConventionsやNotesに参考となる情報が多いはずです。

//@”から//# sourceURLという形式に変えた理由や、多段source mapについて書いてあります。

何かを実現したい時、mozilla/source-mapを見てこのAPIで実現できないかを見てましょう。
多くのライブラリは内部的にこのモジュールを使っていて、ちょっとしたラッパーであるケースも多いです。

source mapオブジェクト は色々なモジュールの中で出てきます。

{
  // version
  "version" : 3,
  // Source Map の対象ファイル (*.min.js など)
  "file": "out.js",
  // sources の基準となるルートパス
  "sourceRoot": "",
  // ソースファイルへの参照
  "sources": ["foo.js", "bar.js"],
  // ソースファイルを埋め込む場合に使う
  "sourcesContent": [null, null],
  // mappings でシンボルリスト
  "names": ["src", "maps", "are", "fun"],
  //  エンコードされたマッピングデータ(対応表)
  "mappings": "A,AAAB;;ABCDE;"
}

via #JSオジサンで Source Map について話してきました : document

Utility

多段SourceMapの対応を行うモジュール。 詳しくは多段SourceMapの対応方法とライブラリ | Web Scratchにて解説しています。

  • lydell/source-map-resolve
    • sourceMappingURL(コードに含まれているsource mapの定義ファイル/データURL)コメントから詳細な情報を取得するモジュール

コード -> source map オブジェクトの詳細情報

function(){...}();
/*# sourceMappingURL=foo.js.map */

のようなコード(とファイルパス)を受け取って、source mapオブジェクト等を取得する。

sourceMapResolve.resolveSourceMap はsource mapオブジェクトやそのmapファイルへの相対パスをsourcesRelativeToで取得出来る。

sourceMapResolve.resolve は resolveSourceMapがパスだけなのに対して、ソースの中身(コード自体も)も一緒に取れる。

  • lydell/source-map-dummy
    • ダミーのsource mapオブジェクトを作成するモジュール
    • mappingsプロパティを生成する際に、jsとcssは自分自身をtokenに分解してマッピングを作る
  • lydell/source-map-url
    • sourceMappingURLコメントが入ったコードが対象
    • mapファイルのURLを取得
    • sourceMappingURLコメントの書き換え
    • sourceMappingURLコメントの削除
    • sourceMappingURLコメントの前にコードを挿入
    • sourceMappingURLコメントにマッチする正規表現の取得
  • thlorenz/convert-source-map
    • source map の相互変換モジュール
    • 入力 : source mapオブジェクト、JSON、Base64、sourceMappingURLコメント、mapファイル
    • 変換 : プロパティの追加/削除、
    • 出力 : source mapオブジェクト、JSON、base64、sourceMappingURLコメント
    • 削除 : sourceMappingURLコメントの削除

結合

  • edc/mapcat
    • mapファイルを結合するツール/モジュール
    • mapファイルを渡す
  1. mapファイルから変換後ソースしてそれぞれ結合
  2. source mapのlineを結合するときに、ソースの行数分offsetを足していく
  3. 結合したソース + 結合したmapファイルを取得
  1. code と map を持ったオブジェクトの配列を作る
  2. concatに渡す
  3. => codeをまとめたjsファイルと、mapをまとめたmapファイルができる

codeとmapが1対1、mapがないjsはlydell/source-map-dummyでダミーを使ってやればいいという方針。

デバッグ

ツール

AST

バリデーション

その他

人