[Note] Vite 組態配置(持續更新)

之前實習和現在工作專案都用Vite作為專案的開發工具，註篇記錄常用配置和遇到的問題，因為習慣用React，所以以下前端框架或套件的部分也都用React角度來寫。

Create Project

之前看過Web Dev Simplified不推薦用React CRA指令的影片，也就是 create react app，而Vite的cli指令是另一個替代React CRA的好選擇，例如要建立一個Vite + React + TypeScript的專案，根據Vite官方文件的指令如下：

pnpm create vite my-react-app --template react-ts

vite.config.js / vite.config.ts

雖然個人覺得Vite在組態配置上沒有webpack複雜，但有時候配合專案需要還是要搞清楚一些基本的組態功用，以下會列出有用過以及常用組態。

首先，如果自行定義Vite如何打包專案，要先建立Vite的組態檔案，檔名為vite.config.js（或是有在用TypeScript的話就是vite.config.ts），並且將組態檔案放在根目錄。

根目錄可能隨著專案設定改變，但預設通常是放在專案資料夾第一層：

Vite組態檔案的預設輸出就是組態配置的物件，若還沒有寫入組態配置：

export defult defineConfig({
    // config...
});

然後這裡簡單提供一些比較常用或是可能會用到的config和其預設值，範例如下：

import path from 'path';

export defult defineConfig({
    root: process.cwd(),  // __dirname
    publicDir: 'public', // path.resolve(root, 'public')
    envDir: root,
    envPrefix: 'VITE_',
    resolve:{
        alias:{
            // ...
        }
    },
    server:{
        proxy:{
            // ...
        }
    },
    base: '/',
    build:{
        outDir: 'dist',
        emptyOutDir: true,
        rollupOptions:{
            input:{
                // ...
            }
        }
    },
    plugin: [/* ... */]
});

root：指的是整個專案目錄的根路徑，預設就跟 __dirname 一樣，也就是專案資料夾第一層（Vite官方文件）。
- 有時候會為了作些設定改變專案目錄的根路徑，譬如要做一個多頁式應用(MPA)的專案，這時建議 /public 資料夾的目錄路徑 ─ publicDir 和環境變數(environment variable)的讀取目錄路徑 ─ envDir 要清楚定義，因為像 envDir 的預設是 root，如果根路徑改變，不是環境變數檔案要放到新的根路徑，就是得定義清楚放置環境變數檔案的目錄路徑。
publicDir：放置 /public 資料夾的目錄路徑（Vite官方文件）
envDir：放置環境變數檔案（.env[.any]）的目錄路徑，環境變數定義可參考Vite官方文件。
envPrefix：環境變數名稱前綴。
- Vite本身已經處理好環境變數的定義，這裡只是為了強調Vite因為要區隔內建重要的環境變數，Vite預設規定自定義的環境變數是用 VITE_ 開頭
resolve.alias：目錄別名（Vite官方文件）。
- 有時候為了避免在專案內寫出像是 import * as Components from ../components; 這種看到最後會讓人混淆的目錄路徑，可以在resolve.alias 內定義常用目錄的別名路徑
- 範例：
```
  resolve:{
      alias:{
          assets: path.resolve(__dirname, 'src/assets'),
          components: path.resolve(__dirname, 'src/components'),
          // ...
      }
  }
```
server.proxy：local server的proxy配置，寫法可參考Vite官方文件。
base：靜態檔案的輸出路徑（Vite官方文件）
- 這在部署時是個很重要的配置，主要是用來覆寫專案內的相對路徑，像是img src="./a.png" 或是HTML檔案內的 <script type="module" src="./main.jsx"></script>，詳情可參考Static Assets Handling和Public Base Path
build：用來配置專案輸出（部署用）的一些組態（Vite官方文件）。
- outDir：輸出後放置檔案的目錄
- emptyOutDir：是否每次輸出都要清空放置檔案的目錄
- rollupOptions：配置rollup打包專案的組態選項（Vite官方文件）
  - Vite背後其實是透過rollup在打包專案輸出，所以才會出現這個東東🤣
  - 例如要配置多頁式應用就可以在這個組態內作設定
plugins：配置插件（Vite官方文件）