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

Svelte 如何編譯程式碼（1）

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
830
選擇 Svelte 的三個理由 - JSDC
Avatar for Kalan kjj6198
0
420
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
Avatar for Kalan kjj6198
0
230
状態管理を楽にする道
Avatar for Kalan kjj6198
1
440
Day25. 如何解析 HTML 語法
Avatar for Kalan kjj6198
0
190
Day24. Svelte 如何編譯程式碼（2）
Avatar for Kalan kjj6198
0
240
Day22. Svelte 經驗談
Avatar for Kalan kjj6198
0
220
Day18. UI 實戰篇 - 圖片檢視器
Avatar for Kalan kjj6198
0
210
Day17. UI 實戰篇 - 音樂播放器
Avatar for Kalan kjj6198
0
110

Other Decks in Programming

See All in Programming
言葉の格闘技のススメ～紙とペンと言葉から始める、キャリアの描き方～
Avatar for 進捗ゼミ progresscicada
2
150
琵琶湖の水は止められてもNet--HTTPのリトライは止められない / You might be able to stop the water flow of Lake Biwa but you can't stop Net::HTTP retries
Avatar for luccafort luccafort
PRO
0
730
AI Readyの正体はデータマネジメントだ メダリオン2.0の最前線
Avatar for freee freee
PRO
0
240
170k Jobs a Day on GKE: Scaling Mercari's CI Platform - and What's Next for AI-Native Development
Avatar for Junya Okabe junyaokabe
0
110
変わらないものが、変わるものを決める — 意図駆動開発 × イベントソーシング × イミュータブル | What Doesn't Change Decides What Can — IDD × Event Sourcing × Immutability
Avatar for Tomohisa Takaoka tomohisa
0
1.7k
komatsuna「分散システムにおけるバグ分析手法」
Avatar for こまつな komatsunaqa
0
260
S3 を使うアプリケーションをローカル完結で動かすことに全力を注いでみた / Running S3 Apps Offline
Avatar for Daisuke Garaike contour_gara
0
490
freee が目指す データ マネジメント戦略 AI-Ready 時代を支える 攻めのガバナンスとは
Avatar for freee freee
PRO
0
370
そこに3びきプロダクトがいるじゃろう——生成AI時代における“価値が届かない理由”の構造
Avatar for kosuke T kosuket
0
490
「寝てても仕事が進む」Claude Codeで組む第二の脳
Avatar for t-fujita24 tomoyafujita2016
0
330
運用ダッシュボードの設計を誰も教えてくれないのだけど みなさんどうしてるんですか？ - チームに監視するという文化を根付かせるための第一歩を踏みたい -
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
120
全PRの83%がAIレビューだけでマージできるようになった開発組織はその後どうなったか
Avatar for a-thug athug
1
1.6k

Featured

See All Featured
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2.1k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
420
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.3k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.5k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
270
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
610
Fireside Chat
Avatar for paigeccino paigeccino
42
4k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
250

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