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

Svelte 如何編譯程式碼（1）

Avatar for Kalan Kalan
October 02, 2020
Programming
0
180

Svelte 如何編譯程式碼（1）

Avatar for Kalan

Kalan

October 02, 2020
Tweet

More Decks by Kalan

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

Other Decks in Programming

See All in Programming
すべてのコンテキストを、 ユーザー価値に変える
Avatar for Michiru Kato applism118
2
760
都市をデータで見るってこういうこと　PLATEAU属性情報入門
Avatar for nokonoko1203 nokonoko1203
1
570
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
Avatar for uutan1108 ohmori_yusuke
2
180
エラーって何種類あるの？
Avatar for Takuma Kajikawa kajitack
5
300
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
Avatar for 武田 憲太郎 kentaroutakeda
2
490
童醫院敏捷轉型的實踐經驗
Avatar for Max Lai cclai999
0
190
Select API from Kotlin Coroutine
Avatar for Matsuda Jumpei jmatsu
1
190
Java on Azure で LangGraph！
Avatar for Kohei Saito kohei3110
0
170
Go1.25からのGOMAXPROCS
Avatar for kuro kuro_kurorrr
1
800
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
Avatar for Tetsuya Kikuchi tkikuc
19
3.5k
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
Avatar for Hayato OKUMOTO falcon8823
4
930
GoのGenericsによるslice操作との付き合い方
Avatar for syumai syumai
3
680

Featured

See All Featured
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.1k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.3k
Designing for Performance
Avatar for Lara Hogan lara
609
69k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
46
9.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
228
22k

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