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
200
Svelte 如何編譯程式碼(1)
Kalan
October 02, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
780
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
350
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
170
状態管理を楽にする道
kjj6198
1
380
Day25. 如何解析 HTML 語法
kjj6198
0
150
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
200
Day22. Svelte 經驗談
kjj6198
0
170
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
160
Day17. UI 實戰篇 - 音樂播放器
kjj6198
0
73
Other Decks in Programming
See All in Programming
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
Understanding Ruby Grammar Through Conflicts
yui_knk
1
120
MLH State of the League: 2026 Season
theycallmeswift
0
150
A Gopher's Guide to Vibe Coding
danicat
0
170
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.3k
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.5k
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
2
490
Vibe coding コードレビュー
kinopeee
0
460
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
950
CSC305 Summer Lecture 05
javiergs
PRO
0
100
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
490
学習を成果に繋げるための個人開発の考え方 〜 「学習のための個人開発」のすすめ / personal project for leaning
panda_program
1
110
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Agile that works and the tools we love
rasmusluckow
329
21k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
A Tale of Four Properties
chriscoyier
160
23k
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)⽣成 等等可以在編譯時期完成的事情