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

Svelte 如何編譯程式碼(1)

Kalan
October 02, 2020

Svelte 如何編譯程式碼(1)

Kalan

October 02, 2020
Tweet

More Decks by Kalan

Other Decks in Programming

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