Vite+React搭建開發(fā)構(gòu)建環(huán)境實(shí)踐記錄
前言
使用 Vite 已經(jīng)有兩年了，期間使用它開發(fā)過單頁(yè)面應(yīng)用，也開發(fā)過瀏覽器擴(kuò)展插件，對(duì)比日常工作中用到的 webpack 構(gòu)建速度大幅提升，開發(fā)體驗(yàn)也好很多。
雖然相比于 webpack 來說簡(jiǎn)單了很多，但是仍然有一些配置需要記錄一下，以便之后可以快速搭建一個(gè)本地開發(fā)構(gòu)建的環(huán)境。
使用 create-vite 腳手架生成基礎(chǔ)模板
運(yùn)行命令安裝腳手架
yarn create vite
我在安裝時(shí)提供的命令行選項(xiàng)那里，選擇了 React + TypeScript。
使用下面的命令啟動(dòng)項(xiàng)目
yarn dev
此時(shí)的項(xiàng)目已經(jīng)默認(rèn)集成了 @vitejs/plugin-react 這個(gè)插件。
到這一步其實(shí)就已經(jīng)基本結(jié)束了，自動(dòng)集成 HMR，jsx，ts，css module，資源打包等一系列功能。
相比于 webpack，簡(jiǎn)直不要太友好。
eslint
先安裝 eslint：
yarn add eslint -D
然后初始化eslint配置：
yarn eslint --init
選擇選項(xiàng)后，我自己安裝的庫(kù)大致是：
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@* // 這個(gè)可以移除
之后有兩個(gè)方案：
- 方案一，使用vite-plugin-eslint，這個(gè)會(huì)在報(bào)錯(cuò)時(shí)在頁(yè)面上顯示報(bào)錯(cuò)信息。
- 方案二，使用 VSCode 的 ESlint 插件去使用 ESLint，這個(gè)是在代碼上出現(xiàn)紅線報(bào)錯(cuò)。（個(gè)人更喜歡這種）
方案二直接用插件即可，方案一需要安裝一下庫(kù)：
yarn add vite-plugin-eslint -D
安裝完畢后，在vite.config.ts中配置：
//...
import eslint from "vite-plugin-eslint";
export default defineConfig({
plugins: [react(), eslint()],
//...
});無論方案一還是方案二，此時(shí)仍會(huì)報(bào)錯(cuò)，因?yàn)?ESLint 無法解析 ts 代碼，所以還需要安裝 @typescript-eslint/parser
yarn add @typescript-eslint/parser -D
最后你還需要在.eslintrc.json 加上這行配置：
"parserOptions": {
//...
"project": "tsconfig.json"
},
基本完畢。
為什么說是基本？因?yàn)?eslint 配置還是更多跟代碼習(xí)慣有關(guān)，比如單雙引號(hào)的使用之類的，所以剛配置完一般都一堆報(bào)錯(cuò)，還需要自己去慢慢調(diào)整。
而且還涉及到與 prettier 的配置相沖突的問題,eslint 和 prettier 的配置分別是代碼校驗(yàn)和代碼格式化時(shí)的規(guī)則，所以也是要保證規(guī)則一致的。
手動(dòng)調(diào)整規(guī)則太繁瑣了,一般使用eslint-config-prettier禁用掉 ESLint 中和 Prettier 配置有沖突的規(guī)則,然后用eslint-plugin-prettier保證 eslint 用 prettier 的風(fēng)格校驗(yàn)。
yarn add eslint-config-prettier eslint-plugin-prettier -D
然后在.eslintrc.json 中加上配置:
{
"extends": [
//...
"plugin:prettier/recommended"
],
}
另外根據(jù)需要一般常用的配置列一下：
{
"rules": {
"react/react-in-jsx-scope":"off", // 使用 jsx 時(shí)不需要引用 React
"@typescript-eslint/strict-boolean-expressions":"off" // 表達(dá)式中的布爾值必須嚴(yán)格是布爾類型
}
}
prettier
安裝
yarn add prettier -D
根目錄下新建.prettierrc 配置文件,然后給個(gè)我自己用的配置方案:
{
printWidth: 100,
tabWidth: 4,
useTabs: false,
singleQuote: true,
jsxSingleQuote: false,
endOfLine: 'lf'
}
一般這個(gè)配合 VSCode 的 Prettier 插件和保存時(shí)格式化即可。
另外，對(duì)于 lf 和 crlf 的處理，保存時(shí)沒法切換，需要在 VSCode 中設(shè)置。
react-router
安裝：
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>
);
這里我將路由相關(guān)代碼放在了單獨(dú)的路由文件 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;antd
安裝命令：
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,
},
},
},
});
別名
通常我們會(huì)使用下面的方式來使用別名：
import reactLogo from "@/assets/react.svg";
默認(rèn)情況下，會(huì)直接報(bào)錯(cuò)，所以我們需要在vite.config.ts進(jìn)行如下配置：
//...
import path from "path";
export default defineConfig({
//...
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
},
},
});
這里因?yàn)闆]有 path 這個(gè)依賴庫(kù)，所以還要運(yùn)行命令安裝：
yarn add path -D
此時(shí)別名功能已經(jīng)可以正常使用，但是__dirname會(huì)報(bào)紅，需要安裝@types/node
yarn add @types/node -D
這時(shí)別名時(shí)沒有智能提示的，所以還需要在tsconfig.json中，配置：
{
"compilerOptions": {
//...
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
}
完畢。
Less 與 CSS Module
Vite 已集成了 CSS Module 功能，但是想要使用 Less 還需要安裝 less 這個(gè)庫(kù)。
yarn add less
最后使用的方式如下：
import styles from "./App.module.less";
總結(jié)
暫時(shí)就記錄這么多吧，后續(xù)如果有一些別的功能配置，也會(huì)統(tǒng)一記錄在這篇博客。
示例代碼倉(cāng)庫(kù)：vite-react-practice。
到此這篇關(guān)于Vite+React搭建開發(fā)構(gòu)建環(huán)境實(shí)踐的文章就介紹到這了,更多相關(guān)React環(huán)境搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于React動(dòng)態(tài)修改元素樣式的三種方式
這篇文章主要介紹了關(guān)于React動(dòng)態(tài)修改元素樣式的三種方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
解決React報(bào)錯(cuò)`value` prop on `input` should&
這篇文章主要為大家介紹了React報(bào)錯(cuò)`value` prop on `input` should not be null解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React源碼分析之useCallback與useMemo及useContext詳解
這篇文章主要介紹了React useCallback與useMemo及useContext源碼分析，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-11-11
React Native中實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入的示例代碼
隨著業(yè)務(wù)的發(fā)展，每一個(gè) React Native 應(yīng)用的代碼數(shù)量都在不斷增加。作為一個(gè)前端想到的方案自然就是動(dòng)態(tài)導(dǎo)入（Dynamic import）了，本文介紹了React Native中實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入的示例代碼，需要的可以參考一下2022-06-06
styled-components 樣式化組件，主要作用是它可以編寫實(shí)際的CSS代碼來設(shè)計(jì)組件樣式，本文主要介紹了React中styled-components的使用，具有一定的參考價(jià)值，感興趣的可以了解一下2022-04-04
React.memo?React.useMemo對(duì)項(xiàng)目性能優(yōu)化使用詳解
這篇文章主要為大家介紹了React.memo?React.useMemo對(duì)項(xiàng)目性能優(yōu)化的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)消息顯示器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
使用react-beautiful-dnd實(shí)現(xiàn)列表間拖拽踩坑
相比于react-dnd，react-beautiful-dnd更適用于列表之間拖拽的場(chǎng)景，本文主要介紹了使用react-beautiful-dnd實(shí)現(xiàn)列表間拖拽踩坑，感興趣的可以了解一下2021-05-05
這篇文章主要給大家介紹了關(guān)于react中組件通信的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
這篇文章主要為大家介紹了React并發(fā)更新與性能優(yōu)化解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05