使用 Vite 已經有兩年了，期間使用它開發過單頁面應用，也開發過瀏覽器擴充套件外掛，對比日常工作中用到的 webpack 構建速度大幅提升，開發體驗也好很多。
雖然相比於 webpack 來說簡單了很多，但是仍然有一些設定需要記錄一下，以便之後可以快速搭建一個本地開發構建的環境。
執行命令安裝腳手架
yarn create vite
我在安裝時提供的命令列選項那裡，選擇了 React + TypeScript。
使用下面的命令啟動專案
yarn dev
此時的專案已經預設整合了 @vitejs/plugin-react 這個外掛。
到這一步其實就已經基本結束了，自動整合 HMR，jsx，ts，css module，資源打包等一系列功能。
相比於 webpack，簡直不要太友好。
先安裝 eslint：
yarn add eslint -D
然後初始化eslint設定：
yarn eslint --init
選擇選項後，我自己安裝的庫大致是：
eslint-plugin-react@latest
eslint-config-standard-with-typescript@latest
@typescript-eslint/eslint-plugin@^5.0.0
eslint@^8.0.1
eslint-plugin-import@^2.25.2
eslint-plugin-n@^15.0.0
eslint-plugin-promise@^6.0.0
typescript@* // 這個可以移除
之後有兩個方案：
方案二直接用外掛即可，方案一需要安裝一下庫：
yarn add vite-plugin-eslint -D
安裝完畢後，在vite.config.ts中設定：
//...
import eslint from "vite-plugin-eslint";
export default defineConfig({
plugins: [react(), eslint()],
//...
});
無論方案一還是方案二，此時仍會報錯，因為 ESLint 無法解析 ts 程式碼，所以還需要安裝 @typescript-eslint/parser
yarn add @typescript-eslint/parser -D
最後你還需要在.eslintrc.json 加上這行設定：
"parserOptions": {
//...
"project": "tsconfig.json"
},
基本完畢。
為什麼說是基本？因為 eslint 設定還是更多跟程式碼習慣有關，比如單雙引號的使用之類的，所以剛設定完一般都一堆報錯，還需要自己去慢慢調整。
而且還涉及到與 prettier 的設定相沖突的問題,eslint 和 prettier 的設定分別是程式碼校驗和程式碼格式化時的規則，所以也是要保證規則一致的。
手動調整規則太繁瑣了,一般使用eslint-config-prettier禁用掉 ESLint 中和 Prettier 設定有衝突的規則,然後用eslint-plugin-prettier保證 eslint 用 prettier 的風格校驗。
yarn add eslint-config-prettier eslint-plugin-prettier -D
然後在.eslintrc.json 中加上設定:
{
"extends": [
//...
"plugin:prettier/recommended"
],
}
另外根據需要一般常用的設定列一下：
{
"rules": {
"react/react-in-jsx-scope":"off", // 使用 jsx 時不需要參照 React
"@typescript-eslint/strict-boolean-expressions":"off" // 表示式中的布林值必須嚴格是布林型別
}
}
這裡也可能涉及到對tsconfig.json的修改：
{
"compilerOptions": {
"noImplicitAny":false, // 未宣告型別的變數自動預設為any型別
}
}
這裡的設定較多，並且也因人而異，就不一一贅述了。
只要保持團隊內部程式碼風格統一，就算是不符合標準規範的程式碼，其實也是好程式碼。
安裝
yarn add prettier -D
根目錄下新建.prettierrc 組態檔,然後給個我自己用的設定方案:
{
printWidth: 100,
tabWidth: 4,
useTabs: false,
singleQuote: true,
jsxSingleQuote: false,
endOfLine: 'lf'
}
一般這個配合 VSCode 的 Prettier 外掛和儲存時格式化即可。
另外，對於 lf 和 crlf 的處理，儲存時沒法切換，需要在 VSCode 中設定。
安裝：
yarn add react-router-dom
然後修改 main.tsx 中的程式碼吧：
//...
import {RouterProvider} from "react-router-dom";
import router from './router';
//...
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
);
這裡我將路由相關程式碼放在了單獨的路由檔案 router.tsx 中：
import { createBrowserRouter } from 'react-router-dom';
import Framework from './Framework';
import Error from './Error';
import Home from '@/pages/home';
import About from '@/pages/about';
const router = createBrowserRouter([
{
path: '/',
element: <Framework />,
errorElement: <Error />,
children: [
{
path: 'home',
element: <Home />,
},
{
path: 'about',
element: <About />,
},
],
},
]);
export default router;
安裝命令：
yarn add antd
然後在主 less 檔案中加上程式碼：
@import 'antd/es/style/themes/default.less';
@import 'antd/dist/antd.less';
@primary-color: #4294ff; // 更換全域性主色
然後還需要更改 vite.config.ts：
//...
export default defineConfig({
//...
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
});
通常我們會使用下面的方式來使用別名：
import reactLogo from "@/assets/react.svg";
預設情況下，會直接報錯，所以我們需要在vite.config.ts進行如下設定：
//...
import path from "path";
export default defineConfig({
//...
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
},
},
});
這裡因為沒有 path 這個依賴庫，所以還要執行命令安裝：
yarn add path -D
此時別名功能已經可以正常使用，但是__dirname會報紅，需要安裝@types/node
yarn add @types/node -D
這時別名時沒有智慧提示的，所以還需要在tsconfig.json中，設定：
{
"compilerOptions": {
//...
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
}
完畢。
Vite 已整合了 CSS Module 功能，但是想要使用 Less 還需要安裝 less 這個庫。
yarn add less
最後使用的方式如下：
import styles from "./App.module.less";
暫時就記錄這麼多吧，後續如果有一些別的功能設定，也會統一記錄在這篇部落格。
範例程式碼倉庫：vite-react-practice。