Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Svelte 如何編譯程式碼(1)
Search
Kalan
October 02, 2020
Programming
0
190
Svelte 如何編譯程式碼(1)
Kalan
October 02, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
780
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
340
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
170
状態管理を楽にする道
kjj6198
1
370
Day25. 如何解析 HTML 語法
kjj6198
0
140
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
190
Day22. Svelte 經驗談
kjj6198
0
160
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
150
Day17. UI 實戰篇 - 音樂播放器
kjj6198
0
68
Other Decks in Programming
See All in Programming
技術同人誌をMCP Serverにしてみた
74th
1
680
生成AI時代のコンポーネントライブラリの作り方
touyou
1
260
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
470
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6.7k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
600
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
160
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
140
Hack Claude Code with Claude Code
choplin
6
2.4k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
170
フロントエンドのパフォーマンスチューニング
koukimiura
5
1.8k
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
BBQ
matthewcrist
89
9.7k
Optimizing for Happiness
mojombo
379
70k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
A better future with KSS
kneath
238
17k
How to Ace a Technical Interview
jacobian
278
23k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
The Cult of Friendly URLs
andyhume
79
6.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Why Our Code Smells
bkeepers
PRO
336
57k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Transcript
第 12 屆 IT 鐵⼈賽 30 天從 0 到 1
學 Svelte Day23 - 進階篇:Svelte 如何編譯?
第 12 屆 IT 鐵⼈賽 Svelte 編譯流程 {#if} {#each} {#await}
等另外處理 html 語法解析 遇到 { } 內的表達式 ⽤ acron 解析 css (<style> 裡頭) 使⽤ css-tree 產⽣語法樹 AST 產⽣語法樹 <script> 裡頭 使⽤ acron 分析並產⽣語法樹 AST
第 12 屆 IT 鐵⼈賽 語法樹完成! 主要會產⽣三個語法樹,CSS、HTML、instance CSS HTML instance
第 12 屆 IT 鐵⼈賽 準備編譯 a11y 檢查、變數宣告檢查、選擇器檢查、依賴(dependency)⽣成 等等可以在編譯時期完成的事情