Svelte 如何編譯程式碼（1）

Transcript

1. 第 12 屆 IT 鐵⼈賽
   30 天從 0 到 1 學 Svelte
   Day23 - 進階篇：Svelte 如何編譯？
   

   View Slide

2. 第 12 屆 IT 鐵⼈賽
   Svelte 編譯流程
   {#if} {#each} {#await} 等另外處理
   html 語法解析
   遇到 { } 內的表達式
   ⽤ acron 解析
   css ( 裡頭)<br/>使⽤ css-tree 產⽣語法樹 AST<br/>產⽣語法樹<br/><script> 裡頭<br/>使⽤ acron 分析並產⽣語法樹 AST<br/>

   View Slide

3. 第 12 屆 IT 鐵⼈賽
   語法樹完成！
   主要會產⽣三個語法樹，CSS、HTML、instance
   CSS HTML instance
   

   View Slide

4. 第 12 屆 IT 鐵⼈賽
   準備編譯
   a11y 檢查、變數宣告檢查、選擇器檢查、依賴（dependency）⽣成
   等等可以在編譯時期完成的事情
   

   View Slide