Slide 1

Slide 1 text

Source Map Revision 3 概要 @rchaser53

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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;" }

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

別資料へ… Base64 VLQ 概要

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

こんな感じになる

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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 }

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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