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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Kalan
October 02, 2020
Programming
0
230
Svelte 如何編譯程式碼(1)
Kalan
October 02, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
810
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
380
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
200
状態管理を楽にする道
kjj6198
1
410
Day25. 如何解析 HTML 語法
kjj6198
0
160
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
220
Day22. Svelte 經驗談
kjj6198
0
190
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
190
Day17. UI 實戰篇 - 音樂播放器
kjj6198
0
95
Other Decks in Programming
See All in Programming
maplibre-gl-layers - 地図に移動体たくさん表示したい
kekyo
PRO
0
400
ポーリング処理廃止によるイベント駆動アーキテクチャへの移行
seitarof
3
1.1k
ふつうの Rubyist、ちいさなデバイス、大きな一年
bash0c7
0
1.1k
Claude Code Skill入門
mayahoney
0
410
エンジニアの「手元の自動化」を加速するn8n 2026.02.27
symy2co
0
170
車輪の再発明をしよう!PHP で実装して学ぶ、Web サーバーの仕組みと HTTP の正体
h1r0
2
290
API Platformを活用したPHPによる本格的なWeb API開発 / api-platform-book-intro
ttskch
1
150
安いハードウェアでVulkan
fadis
0
730
PHP 7.4でもOpenTelemetryゼロコード計装がしたい! / PHPerKaigi 2026
arthur1
1
370
PHPのバージョンアップ時にも役立ったAST(2026年版)
matsuo_atsushi
0
230
Vuetify 3 → 4 何が変わった?差分と移行ポイント10分まとめ
koukimiura
0
170
条件判定に名前、つけてますか? #phperkaigi #c
77web
2
670
Featured
See All Featured
A Tale of Four Properties
chriscoyier
163
24k
How GitHub (no longer) Works
holman
316
150k
Utilizing Notion as your number one productivity tool
mfonobong
4
270
The Curious Case for Waylosing
cassininazir
0
270
The Cult of Friendly URLs
andyhume
79
6.8k
Mind Mapping
helmedeiros
PRO
1
130
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Information Architects: The Missing Link in Design Systems
soysaucechin
0
840
Optimizing for Happiness
mojombo
378
71k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
Statistics for Hackers
jakevdp
799
230k
The Art of Programming - Codeland 2020
erikaheidi
57
14k
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)⽣成 等等可以在編譯時期完成的事情