# 從 Create-React-App 到 Vite: React 開發再加速
###### tags: `blog`

自從 webpack 越來越發達後，前端開發再也不是直接寫腳本給瀏覽器執行了。不管是寫什麼，總會有個工具把原始碼打包成瀏覽器看的 code。開發時也會開著 dev-server，配合 hot-reload module 的即時更新剛寫的程式碼。
前端框架三本柱 VAR 也發展出各自的打包工具，Vue 有 vue-cli，React 有 create-react-app(CRA) 配合 Craco 延伸設定。

2020年 vue社群推出來全新的打包工具，Vite。隔壁朋朋的新工具會帶給 React 開發者什麼新的優勢嗎？

## Vite 就是快
Vite 是法文的「快」，念法「veet」，與原本的打包工具相比，速度快了 10-20倍。Vite 的 dev server 藉著 ES module 提供了非常快速順暢的開發體驗。
### 與 CRA 比較

我們直接來比較 CRA 以及 Vite 準備好 dev server 的時間。
* Ｖite

* CRA

Vite 在 1 秒內準備好 dev server，CRA 則需要快 18 秒的時間，這樣的 10-20 倍的速度差異，在開發的體驗上完全是不同次元的兩件事。
指令打完後，Vite就可以打開瀏覽器了，而CRA則是要在電腦前發呆一下才能看到網頁。

實驗相關資訊:
專案的大小在打包後大約 320KB (gziped)，Vite 內建有計時，CRA 則是在 script 輸出 server 資訊後，`process.exit()` 並計時。

## 搬遷步驟
1. 安裝 viteu 以及 Dependency
2. 搬遷 configuration
3. 調整 source code
4. 收尾

## 1. 安裝 vite 以及 Dependency
安裝套件

yarn add -D vite  @vitejs/plugin-react vite-plugin-htm

另外有其它套件可供選配
* @vitejs/plugin-legacy
* vite-plugin-svgr
* vite-plugin-eslint
* ...

打開 `package.json`

 "scripts": {
    "start": "vite",
    "build": "vite build",
    "serve": "vite preview",
 },

## 2. 搬遷 configuration
在 cra 中，打包的設定要透過 craco 去延伸，這一步要把 craco.config.js 的設定搬遷到 vite.config.js。

打開 vite.config.js
{%gist yichung279/a283efa75bd560e480521102f690b655 %}

主要就分為三個部分
* plugin:
引入 `@vitejs/plugin-react` 以及 `vite-plugin-html`
* server:
port、proxy
* build:
把輸出路徑設定成跟 CRA 相同的 `build/`，多入口 rollupOptions

還有其他縮寫類的設定
## 3. 調整 source code

### 把 `public/` 裡的 index.html 移到專案的 root
vite 的dev server 直接從專案的 root 把 index.html 還有其他 module 按照路徑送出去，所以不把 index.html 夾在 `public/` 裡。

### 刪除 %PUBLIC%
index.html 不再放在 `public` 裡，`%PUBLIC_URL%` 自然也就跟著刪掉。
如果不刪掉的話，會看到

URIError: URI malformed

### 調整副檔名 `.js` -> `jsx`
vite 不支援 js 裡有 jsx，忘記的更改檔名的話會得到以下錯誤訊息，其實照錯誤訊息做就好了。

[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

### require 改為 import
Vite 使用原生的 ES module，require 不是 ES module的標準，通通改成 import。
另外，vite 不支援 dynamic import。

### 更新環境變數
把 `REACT_APP_to_VAR` 替換成 `VITE_VAR`
把 `process.env` 替換成 `import.meta.env`

## 4. 收尾
刪掉

"scripts": {
-    "build": "craco build",
-    "test": "craco test",
-    "eject": "craco eject"
}

刪掉

yarn remove react-script

用 depcheck 檢查有沒有沒用到的 package，通通刪掉。

npx depcheck
# then delete unuesd package

## Done

yarn start

have fun :)

## Reference
* https://vitejs.dev/config/
* https://www.darraghoriordan.com/2021/05/16/migrating-from-create-react-app-to-vite/
* https://juejin.cn/post/7010571160060428318#heading-34