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

Svelte 如何編譯程式碼（1）

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Kalan Kalan
October 02, 2020
Programming
250
0

Svelte 如何編譯程式碼（1）

Avatar for Kalan

Kalan

October 02, 2020

More Decks by Kalan

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

Other Decks in Programming

See All in Programming
JPUG勉強会 OSSデータベースの内部構造を理解しよう(第２回)
Avatar for Atsushi Ogawa oga5
0
270
Heart of Swift Concurrency
Avatar for Yuta Koshizawa koher
0
960
そのリトライ、死んだコネクションを使い回していませんか ── GoのHTTPクライアントとHTTP/2を実プロダクト障害から学び直す
Avatar for Yusa Matsuda myus4a
0
220
TiDB Cloudのカスタムコントローラーによるオートスケール対応
Avatar for takaidohigasi takaidohigasi
0
130
Workers Cache を知る
Avatar for syumai syumai
0
210
個人開発基盤をまるごとCloudflareに引っ越して爆速で総合的体験を向上させた話
Avatar for Tsubasa SEKIGUCHI tinykitten
0
200
新卒PdEのリアル
Avatar for ryu ryu1013
1
510
海上で動くGoサーバー: goroutineとchannelでさばく航行データストリーム
Avatar for Atsuki Seo atsuki_seo
0
920
LoopHub - ローカルで動く GitHub で、AI と共同開発
Avatar for jugyo jugyo
1
570
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
520
The Rails Doctrine Decade
Avatar for Koichi ITO koic
2
350
ハーネス設計入門 〜 基礎知識の整理から実務へのステップアップ 〜
Avatar for kinopee kinopeee
16
14k

Featured

See All Featured
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
290
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
500
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.5k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
260
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
41k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
570
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
910
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
710
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k

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