Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
sourcemap規格概要
Search
rchaser53
June 15, 2017
Programming
1
1.1k
sourcemap規格概要
rchaser53
June 15, 2017
Tweet
Share
More Decks by rchaser53
See All by rchaser53
LLVM IR入門
rchaser53
4
2.6k
pitch loaderについて
rchaser53
1
520
Rustからwasmを生成してみた話
rchaser53
1
740
Base64 VLQ概要
rchaser53
2
1.5k
TypeScript+React入門
rchaser53
1
850
Other Decks in Programming
See All in Programming
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
130
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
120
GPUを計算資源として使おう!
primenumber
1
280
NEWT Backend Evolution
xpromx
1
140
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
480
ソフトウェア設計とAI技術の活用
masuda220
PRO
23
6.2k
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1k
「App Intent」よくわからんけどすごい!
rinngo0302
1
120
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
9.9k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
230
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
8.6k
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
150
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Six Lessons from altMBA
skipperchong
28
3.9k
Fireside Chat
paigeccino
37
3.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building Adaptive Systems
keathley
43
2.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Transcript
Source Map Revision 3 概要 @rchaser53
CAUTION! 発表内容は発表者の独自調査によるものです 間違ってたらすみません
規格(Source Map Revision 3) 2011/4/12 年に初版に初版が公開 非常に短く実質7p くらいしかないので気軽に読める量 ( 気軽に読める内容とは言っていない)
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;" }
interface と概要 { version: 3; // version 3 3固定 file:
string; // 対象 sourceRoot?: string; // 基準 sources: string[]; // 対象 元 sourcesContent?: string[]; // 変換元 names: string[]; // 対象 出力 mappings: string; // 生成前 位置 }
sourcesRoot とsources 変換前のファイルの位置を示す ファイルが存在しないと参照した際に何も表示されない sourcesRoot が空文字なケースもある (sources に全部書かれている)
対象のファイルが存在する場合
対象のファイルが存在しない場合
sourcesContent 変換前のソース ts=>js であればts のファイルの内容が出力されている sources より優先される
こんな感じに書かれている サーバに変換前のファイルを配置しなくてよくなる
name 変換後のファイルにの単語が配列として保存されている mappings で使用される 重複されて記述されることはない [] でも普通に動く
mappings Base64 VLQ というので記述されている 絶対的に情報を指定せず、相対的に情報を指定する 複雑だけど規格書には詳細は定義されていない こんなの ;AAAAA,EAAE,gBABC,CAAEB;
別資料へ… Base64 VLQ 概要
その他の情報 ・inline sourcemap ・X-Sourcemap
inline sourcemap ファイルに直接sourcemap の情報を書き込む xxx.js.map とかいらない ファイルのサイズはお察し
こんな感じになる
sourceMappingURL=data:application/json;base64 json でbase64 フォーマットだということを示して eyJ2ZXJzaW9uIjozLCJmaWxlIjoic291cmNlbWFwVGVzdC5qcyIsInN base64 ベースの情報を続けて記述する
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 }
X-Sourcemap sourcemap の位置をヘッダーで指定する ソースに不要な情報が表示されなくなる 正直ソース読む人はheader も読みそうな気はする
便利なライブラリ集 mozilla/source-map sourcemap を作成やsourcemap 同士の関連付けに使える babel, webpack, uglify などが使用(TypeScript は未使用)
azu/multi-stage-sourcemap お手軽簡単に多段ソースマップが作成できる 上のライブラリのサンプルコードとして使える
ご静聴ありがとうございました!