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

Svelte 如何編譯程式碼(1)

9d7732f8bad970e853ce664588b204b0?s=47 Kalan
October 02, 2020

Svelte 如何編譯程式碼(1)

9d7732f8bad970e853ce664588b204b0?s=128

Kalan

October 02, 2020
Tweet

More Decks by Kalan

Other Decks in Programming

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