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
180
Svelte 如何編譯程式碼(1)
Kalan
October 02, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
770
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
320
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
160
状態管理を楽にする道
kjj6198
1
350
Day25. 如何解析 HTML 語法
kjj6198
0
140
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
180
Day22. Svelte 經驗談
kjj6198
0
150
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
140
Day17. UI 實戰篇 - 音樂播放器
kjj6198
0
62
Other Decks in Programming
See All in Programming
海外のアプリで見かけたかっこいいTransitionを真似てみる
shogotakasaki
1
160
メモリウォールを超えて:キャッシュメモリ技術の進歩
kawayu
0
1.9k
Vibe Codingをせずに Clineを使っている
watany
17
6.1k
Go1.24 go vetとtestsアナライザ
kuro_kurorrr
2
840
サービスレベルを管理してアジャイルを加速しよう!! / slm-accelerate-agility
tomoyakitaura
1
170
AIコーディングワークフローの試行 〜AIエージェント×ワークフローでの自動化を目指して〜
rkaga
2
3.4k
AHC045_解説
shun_pi
0
470
英語 × の私が、生成AIの力を借りて、OSSに初コントリビュートした話
personabb
0
180
Unlock the Potential of Swift Code Generation
rockname
0
240
Defying Front-End Inertia: Inertia.js on Rails
skryukov
0
460
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
13
5.8k
エンジニア未経験が最短で戦力になるためのTips
gokana
0
260
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Language of Interfaces
destraynor
157
24k
How STYLIGHT went responsive
nonsquared
99
5.5k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Java REST API Framework Comparison - PWX 2021
mraible
30
8.5k
Making Projects Easy
brettharned
116
6.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Agile that works and the tools we love
rasmusluckow
328
21k
A Tale of Four Properties
chriscoyier
158
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
650
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)⽣成 等等可以在編譯時期完成的事情