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
Svelte 如何編譯程式碼(1)
Search
Kalan
October 02, 2020
Programming
0
150
Svelte 如何編譯程式碼(1)
Kalan
October 02, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
750
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
290
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
140
状態管理を楽にする道
kjj6198
1
310
Day25. 如何解析 HTML 語法
kjj6198
0
130
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
170
Day22. Svelte 經驗談
kjj6198
0
140
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
130
Day17. UI 實戰篇 - 音樂播放器
kjj6198
0
51
Other Decks in Programming
See All in Programming
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
200
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
Jakarta EE meets AI
ivargrimstad
0
620
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
3
700
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
240
Arm移行タイムアタック
qnighy
0
340
イベント駆動で成長して委員会
happymana
1
340
初めてDefinitelyTypedにPRを出した話
syumai
0
420
Jakarta EE meets AI
ivargrimstad
0
160
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
120
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Documentation Writing (for coders)
carmenintech
65
4.4k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Docker and Python
trallard
40
3.1k
Unsuck your backbone
ammeep
668
57k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Teambox: Starting and Learning
jrom
133
8.8k
Producing Creativity
orderedlist
PRO
341
39k
Transcript
第 12 屆 IT 鐵⼈賽 30 天從 0 到 1
學 Svelte Day23 - 進階篇:Svelte 如何編譯?
第 12 屆 IT 鐵⼈賽 Svelte 編譯流程 {#if} {#each} {#await}
等另外處理 html 語法解析 遇到 { } 內的表達式 ⽤ acron 解析 css (<style> 裡頭) 使⽤ css-tree 產⽣語法樹 AST 產⽣語法樹 <script> 裡頭 使⽤ acron 分析並產⽣語法樹 AST
第 12 屆 IT 鐵⼈賽 語法樹完成! 主要會產⽣三個語法樹,CSS、HTML、instance CSS HTML instance
第 12 屆 IT 鐵⼈賽 準備編譯 a11y 檢查、變數宣告檢查、選擇器檢查、依賴(dependency)⽣成 等等可以在編譯時期完成的事情