---
# System prepended metadata

title: 從 Vite Plugin 出發的編譯器大冒險 - Alex Liu
tags: [JSDC2025]

---

# 從 Vite Plugin 出發的編譯器大冒險 - Alex Liu

{%hackmd @JSDC-tw/B1loEcwJZl %}
###### tags: `JSDC2025`

Slido：https://app.sli.do/event/9jUifygirqgo7uTYF4WEvq

> 開始做筆記

vite 2020年推出的打包工具

webpack 儲存後要喝個咖啡 等打包時間


推薦看龍哥的vite 原始碼解讀

vite 本質是一個dev server 


對於瀏覽器而言 看不懂typescript 

所以vite 處理了 typescript ，首先 vite 來啟動了 node的 server  找到路徑後 轉譯完 再回傳

以處理css 為例

解析模組 然後載入模組 而則會添加style 的tag 然後添加css 上去

至於vite 如何處理vue 、 react 

先解析完整的路徑

解析實際路徑
然後取得原始程式碼的字串
之後使用transform 

一個vite plugin ok 
大致上流程就是解析路徑、Load 和transfer 



SVG loader (SVG component)

將SVG檔案作為vue 元件 載入

vite-svg-loader
就可以直接將svg 當元件使用了

react 的畫室叫做 svg-r 

最佳化 graphQL schema 


加上\0可以讓vite 不用處理













> 聊天區

---

{%hackmd @JSDC-tw/jsdc2025_sponsor %}