Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Svelte 如何編譯程式碼（1）

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Kalan Kalan
October 02, 2020
Programming
280
0

Svelte 如何編譯程式碼（1）

Avatar for Kalan

Kalan

October 02, 2020

More Decks by Kalan

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

Other Decks in Programming

See All in Programming
The Rails Doctrine Decade
Avatar for Koichi ITO koic
2
560
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Rails World 2026, Austin, Texas
Avatar for Marco Roth marcoroth
0
210
iOS 27でニュースアプリはどう変わる！？ 〜日経電子版の新機能対応と、開発事例から〜
Avatar for Kazuki Nakashima lynnswap
7
13k
外から家のPCの電源入れたい！をＰＨＰで解決する
Avatar for かわしも（Shimokawa Shion） kawashimo0
1
130
TechTown - Creating Composable Callables in Contemporary C++
Avatar for Björn Fahller rollbear
0
100
コードで差別化できない時代の ソフトウェアエンジニアリング / Software Engineering in an Era Where Code Doesn’t Differentiate
Avatar for Naoki Kishida kishida
2
160
Agentic Software Factoryに、すごく賢いIF文を。 / super smart IF statement into the Agentic Software Factory.
Avatar for r-kagaya rkaga
8
2.1k
速習iPhone Duo対応
Avatar for 野瀬田　裕樹 yuukiw00w
2
980
Apple Intelligence を用いた個人情報誤送信防止、及びユーザーリクエスト体験の改善について
Avatar for Yuki Kuwashima yukiny
0
330
GemmaをJevのように使ってみる / Use Gemma like Jev
Avatar for Naoki Kishida kishida
5
770
ソニーのクラウド共通基盤の変遷と AI時代の開発スタイルに合わせた進化 / The Journey of Sony’s Common Cloud Platform and Its Evolution for AI-Native Development
Avatar for KenjiYoneyama kenjiyoneyama
0
250
月間100万人のサービス刷新で、 技術選定をHonoに振り切った話
Avatar for bara yutobara
8
6.3k

Featured

See All Featured
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.3k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
340
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
210
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
25k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.6k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
490
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
2.2k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
184
10k
Building an army of robots
Avatar for Kyle Neath kneath
307
47k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
880

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）⽣成 等等可以在編譯時期完成的事情