Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Svelte 如何編譯程式碼（1）

Avatar for Kalan Kalan
October 02, 2020
Programming
0
220

Svelte 如何編譯程式碼（1）

Avatar for Kalan

Kalan

October 02, 2020
Tweet

More Decks by Kalan

See All by Kalan
單頁式應用中的無障礙設計
Avatar for Kalan kjj6198
0
810
選擇 Svelte 的三個理由 - JSDC
Avatar for Kalan kjj6198
0
380
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
Avatar for Kalan kjj6198
0
200
状態管理を楽にする道
Avatar for Kalan kjj6198
1
410
Day25. 如何解析 HTML 語法
Avatar for Kalan kjj6198
0
160
Day24. Svelte 如何編譯程式碼（2）
Avatar for Kalan kjj6198
0
220
Day22. Svelte 經驗談
Avatar for Kalan kjj6198
0
190
Day18. UI 實戰篇 - 圖片檢視器
Avatar for Kalan kjj6198
0
180
Day17. UI 實戰篇 - 音樂播放器
Avatar for Kalan kjj6198
0
91

Other Decks in Programming

See All in Programming
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
Avatar for tasshi tasshi
0
210
Smart Handoff/Pickup ガイド - Claude Code セッション管理
Avatar for rasshii yukiigarashi
0
150
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
1
1k
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
Avatar for Yuto tsukamoto1783
0
200
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
180
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
4k
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
140
なるべく楽してバックエンドに型をつけたい！(楽とは言ってない)
Avatar for HIBIKI CUBE hibiki_cube
0
140
疑似コードによるプロンプト記述、どのくらい正確に実行される？
Avatar for kokuyouwind kokuyouwind
0
390
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
Avatar for azukiazusa azukiazusa1
1
750
Gemini for developers
Avatar for Mete Atamel meteatamel
0
100
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
620

Featured

See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.9k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon szymonslowik
1
220
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
110
It's Worth the Effort
Avatar for 3n 3n
188
29k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
200
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
220
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
2k

Transcript

  1. 第 12 屆 IT 鐵⼈賽 30 天從 0 到 1

    學 Svelte Day23 - 進階篇：Svelte 如何編譯？

  2. 第 12 屆 IT 鐵⼈賽 Svelte 編譯流程 {#if} {#each} {#await}

    等另外處理 html 語法解析 遇到 { } 內的表達式 ⽤ acron 解析 css (<style> 裡頭) 使⽤ css-tree 產⽣語法樹 AST 產⽣語法樹 <script> 裡頭 使⽤ acron 分析並產⽣語法樹 AST

  3. 第 12 屆 IT 鐵⼈賽 語法樹完成！ 主要會產⽣三個語法樹，CSS、HTML、instance CSS HTML instance

  4. 第 12 屆 IT 鐵⼈賽 準備編譯 a11y 檢查、變數宣告檢查、選擇器檢查、依賴（dependency）⽣成 等等可以在編譯時期完成的事情