Upgrade to Pro — share decks privately, control downloads, hide ads and more …

sourcemap規格概要

 sourcemap規格概要

rchaser53

June 15, 2017
Tweet

More Decks by rchaser53

Other Decks in Programming

Transcript

  1. Source Map Revision 3
    概要
    @rchaser53

    View full-size slide

  2. CAUTION!
    発表内容は発表者の独自調査によるものです
    間違ってたらすみません

    View full-size slide

  3. 規格(Source Map Revision 3)
    2011/4/12
    年に初版に初版が公開
    非常に短く実質7p
    くらいしかないので気軽に読める量
    (
    気軽に読める内容とは言っていない)

    View full-size slide

  4. sourcemap
    の出力結果
    実際は1
    行だけど見づらいから改行している
    {
    "version" : 3,
    "file": "out.js",
    "sourceRoot": "",
    "sources": ["foo.js", "bar.js"],
    "sourcesContent": [null, null],
    "names": ["src", "maps", "are", "fun"],
    "mappings": "A,AAAB;;ABCDE;"
    }

    View full-size slide

  5. interface
    と概要
    {
    version: 3; // version 3 3固定
    file: string; // 対象
    sourceRoot?: string; // 基準
    sources: string[]; // 対象 元
    sourcesContent?: string[]; // 変換元
    names: string[]; // 対象 出力
    mappings: string; // 生成前 位置
    }

    View full-size slide

  6. sourcesRoot
    とsources
    変換前のファイルの位置を示す
    ファイルが存在しないと参照した際に何も表示されない
    sourcesRoot
    が空文字なケースもある
    (sources
    に全部書かれている)

    View full-size slide

  7. 対象のファイルが存在する場合

    View full-size slide

  8. 対象のファイルが存在しない場合

    View full-size slide

  9. sourcesContent
    変換前のソース
    ts=>js
    であればts
    のファイルの内容が出力されている
    sources
    より優先される

    View full-size slide

  10. こんな感じに書かれている
    サーバに変換前のファイルを配置しなくてよくなる

    View full-size slide

  11. name
    変換後のファイルにの単語が配列として保存されている
    mappings
    で使用される
    重複されて記述されることはない
    []
    でも普通に動く

    View full-size slide

  12. mappings
    Base64 VLQ
    というので記述されている
    絶対的に情報を指定せず、相対的に情報を指定する
    複雑だけど規格書には詳細は定義されていない
    こんなの
    ;AAAAA,EAAE,gBABC,CAAEB;

    View full-size slide

  13. 別資料へ…
    Base64 VLQ
    概要

    View full-size slide

  14. その他の情報
    ・inline sourcemap
    ・X-Sourcemap

    View full-size slide

  15. inline sourcemap
    ファイルに直接sourcemap
    の情報を書き込む
    xxx.js.map
    とかいらない
    ファイルのサイズはお察し

    View full-size slide

  16. こんな感じになる

    View full-size slide

  17. sourceMappingURL=data:application/json;base64
    json
    でbase64
    フォーマットだということを示して
    eyJ2ZXJzaW9uIjozLCJmaWxlIjoic291cmNlbWFwVGVzdC5qcyIsInN
    base64
    ベースの情報を続けて記述する

    View full-size slide

  18. eyJ2ZXJzaW9uIjozLCJmaWxlIjoic291cmNlbWFwVGVzdC5qcyIsInN

    {
    "version":3,
    "file":"sourcemapTest.js",
    "sourceRoot":"",
    "sources":["../src/sourcemapTest.ts"],
    "names":[],
    "mappings":"AAGA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;AACpB,OAAO,CAAC,G
    "sourcesContent":["interface Poyo {\n hoge : string;\n}\nconsole.log
    }

    View full-size slide

  19. X-Sourcemap
    sourcemap
    の位置をヘッダーで指定する
    ソースに不要な情報が表示されなくなる
    正直ソース読む人はheader
    も読みそうな気はする

    View full-size slide

  20. 便利なライブラリ集
    mozilla/source-map
    sourcemap
    を作成やsourcemap
    同士の関連付けに使える
    babel, webpack, uglify
    などが使用(TypeScript
    は未使用)
    azu/multi-stage-sourcemap
    お手軽簡単に多段ソースマップが作成できる
    上のライブラリのサンプルコードとして使える

    View full-size slide

  21. ご静聴ありがとうございました!

    View full-size slide