用 Vite 建立 React 網站

Continued from previous post:

React JS 網頁開發筆記（一）

1 Vite 簡介
- 1.1 Vite 既優點
2 動手做
3 檢視結果
- 3.1 Source map
- 3.2 GitHub Pages 網站
4 參考資料

1 Vite 簡介

幾年前，ReactJS 既開發者應該都會用 Create-React-App 呢一個 npm module 作為 React 項目既 template 項目生成器，不過 Create-React-App 已經超過 2 年冇更新，可以被視為已死既項目。

Vite 係由 VueJS 既原作者創立。因為 VueJS 既興起，Vite 近年取而代之，成為左主流既建立 React 項目既 template 項目生成器。

Vite 有以下既組件：

組件	用途
`create-vite`	新 SPA 項目既生成器
`vite`	Build scripts

1.1 Vite 既優點

用過 Vite 就會發現佢有唔少比起 Create-React-App 絕對既好處：

方面	Create-React-App	Vite
生成出黎既項目既 `node_modules` 裡面既檔案、目錄數量	4000+ 檔案、5000+ 目錄	300+ 檔案、50+ 目錄
Module bundler	Webpack	較快既 Rollup
ReactJS transpiler	Babel	較快既 `@vitejs/plugin-react` 或者 `@vitejs/plugin-react-swc`
Build scripts	非常笨重、已經超過 2 年冇更新既 React Scripts	輕量既 Vite

以下係 Create-React-App 生成出黎既 ReactJS 項目既 node_modules：

以下係 Create-Vite 生成出黎既 ReactJS 項目既 node_modules：

註：

Create-React-App 之所以生成出黎既 ReactJS 項目有 npm modules，完全係因為 React Scripts 引入左大量既 transitive dependencies。

2 動手做

2.1 安裝 Create-Vite

npm i -g create-vite

2.2 生成 ReactJS 項目

創建一個新 folder，然後喺裡面執行：

create-vite my-react-app-vite

我地既項目名係 my-react-app-vite。

之後需要揀一啲選項：

React
JavaScript + SWC

2.3 執行 ReactJS 項目

喺生成出黎既 ReactJS 項目既 project root folder 度執行：

npm i

等佢下載所有 npm modules，之後就可以執行：

npm run dev

然後喺本地瀏覽器打開 http://localhost:5173。

但如果想 LAN 既其他裝置（例如手機、平板）既瀏覽器都可以連接到，就要執行：

npm run dev -- --host

OS 既防火牆 allow 左 node.exe 之後，可以喺 LAN 既其他裝置打開 http://192.168.1.X:5173。

2.4 部署到 GitHub Pages

2.4.1 創建 GitHub repository

登入 GitHub，然後新增一個 public repository。
喺本地 git clone 呢個新既 Git repo。
將 .git 檔案搬到我地用 Create-Vite 建立既項目既 project root folder 裡面。

2.4.2 喺 ReactJS 項目加入 gh-pages

喺 ReactJS 項目既 project root folder 執行：

npm i gh-pages

之後喺 package.json 加入 homepage，個 URL 後面既 path 係岩岩創建既 Git repo 名：

{
	"homepage": "http://blackr1234.github.io/my-react-app-vite"
}

然後喺 package.json 既 scripts field 裡面加入 predeploy 以及 deploy：

1{
2	"scripts": {
3		"dev": "vite",
4		"build": "vite build",
5		"preview": "vite preview",
6
7		"predeploy": "npm run build",
8		"deploy": "gh-pages -d dist"
9	}
10}

註：

predeploy 呢個 script 名係 deploy 既 pre script，而 pre script 係 npm 提供既功能。
- Pre script 會喺佢「pre」既對象既 script 執行之前執行。
- predeploy 會喺 deploy 執行之前執行。
部署流程：
1. predeploy script 會幫我地執行 npm run build，而 npm run build 對應 build script，會執行 vite build，生成 dist folder。
2. deploy script 會執行 gh-pages 既邏輯，將 -d 既 dist folder 部署上我地 Git repo 作為 GitHub Pages。

2.4.3 修改 Vite 配置

我地要將 base path 寫落 vite.config.js：

1import { defineConfig } from "vite";
2import react from "@vitejs/plugin-react-swc";
3
4export default defineConfig({
5	base: "/my-react-app-vite", // 要加呢個 config
6	plugins: [react()],
7});