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
250
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Svelte 如何編譯程式碼(1)
Kalan
October 02, 2020
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
830
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
420
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
230
状態管理を楽にする道
kjj6198
1
440
Day25. 如何解析 HTML 語法
kjj6198
0
190
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
240
Day22. Svelte 經驗談
kjj6198
0
220
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
210
Day17. UI 實戰篇 - 音樂播放器
kjj6198
0
110
Other Decks in Programming
See All in Programming
「寝てても仕事が進む」Claude Codeで組む第二の脳
tomoyafujita2016
0
350
freeeにおけるEvalsの実践例の紹介
freee
PRO
0
140
tsc.rip を支える技術 / Kyoto.なんか #8
susisu
0
120
go-spidermonkeyでAIエージェントのCode Modeを実装する
syumai
1
650
What's New in Android 2026
veronikapj
0
270
Dockerfile CMD for Node.js
grazie1999
0
120
Go を使い始めて 2 ヶ月の学び / My first two months with Go
contour_gara
0
370
改善しないと、タスクが回らない。 “てんこ盛りポジション” を引き継いだ情シスの、入社3ヶ月の業務改善録
krm963
0
280
Discordを用いたラボオートメーション関連情報収集の自動化
noguhiro2002
0
390
TSX の <Hoge<Fuga>> という構文に驚いた話 / tsx-type-argument-syntax
kanaru0928
0
240
自動化したのに回らない テスト運用の壁―AI時代の品質責任と生産性
mfunaki
0
420
Gmail/Google DriveをトリガーにAIエージェントを動かそう! / Run AI agents with Gmail/Google Drive as triggers!
har1101
2
420
Featured
See All Featured
Building AI with AI
inesmontani
PRO
1
1.2k
Code Review Best Practice
trishagee
74
20k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
120
120k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
300
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
290
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.6k
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
6.1k
The Invisible Side of Design
smashingmag
301
52k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
63
45k
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
540
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)⽣成 等等可以在編譯時期完成的事情