使用 vite構建一個React專案

語言: CN / TW / HK

使用vite生成react專案

使用官方提供的命令 yarn create @vitejs/app 然後根據你的需要進行選擇,我們這裡選擇React-TS模板

這時候僅僅是支援React語法的,我們還需要其他的配置一起來完成React專案的搭建

TypeScript

在用腳手架生成React專案的時候,是有一個React-TS版本的選擇的,建議大家直接選擇React-TS版本,這樣你可以直接跳過這部分內容。

如果你選擇的是React版本,那麼如果配置請看下面(沒必要,直接選擇TS版本唄)

Vite這裡自己是支援Typescript語法的,但是它只編譯,不校驗。意思就是它只是把TS語法編譯成JS,能夠在瀏覽器中執行,但是它不會去做TS型別的校驗,即使你定義的型別有錯誤,但是也能是通過正常的編譯,如果我們想對TS語法進行校驗,可以使用tsc --noEmit命令來進行校驗

``` // test.ts

interface A { name:string }

export const a:A={ name:'fishfan', age:'18' }

``` 上面程式碼明顯是存在TS語法錯誤的,你能夠在編輯器上看到錯誤(VScode自帶的錯誤提示),但是瀏覽器仍然能夠正常執行。

我們需要安裝typescript

yarn add typescript @types/react @types/react-dom -D 然後在package.json中修改打包命令

"scripts": { "dev": "vite", "build": "tsc && vite build", "serve": "vite preview" },

在根目錄建立tsconfig.json

``` { "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, "lib": ["DOM", "DOM.Iterable", "ESNext"], "allowJs": false, "skipLibCheck": false, "esModuleInterop": false, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "ESNext", "moduleResolution": "Node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "preserve" }, "include": ["./src"] }

``` 這樣就會在打包的時候,對錯誤進行提示

樣式

Vite支援 CSS variable 和postCSS

關於css cariable 可以檢視該連結

安裝相關外掛 yarn add postcss-preset-env autoprefixer -D

Vie的內部是有Postcss,如果我們想使用postcss的其他plugin的話,在根目錄新建postcss.config.js配置如下,情況視專案而定。

module.exports = { plugins: [ require('autoprefixer'), require('postcss-preset-env'), ], };

autoprefixer

這個就不用多說了,必裝外掛之一。方便的寫規範的css,它會為你提供非常完整的hack相容方案的。當然這裡需要了解一下的是,它的大部分相容資料來源Can I Use,另外一個稍微需要了解的外掛配置引數就是browsers,不過一般我們都是在package.json中配置瀏覽器版本相關資訊。

package.json內增加如下示例,這樣其他外掛也能夠從中獲取到專案將要相容的版本 "browserslist": [ "> 1%", // 全球瀏覽器使用率大於1%。 "last 2 versions" // 每個瀏覽器中最新的兩個版本。 ]

postcss-preset-env

postcss-preset-env是幫postcss找到package.json中的browserlist裡面的配置,通過配置載入指定的css相容性樣式

css Module

建立的css檔名稱為 [name].module.css 就會被識別的css module,如果你的css檔名稱不是這麼定義的,你是無法使用的css module的

如果驗證?建立一個css檔名稱為 app.module.css

``` // app.module.css .text { color: red; }

```

``` // app.jsx

import { useState } from 'react'; import styles from './app.module.css';

function App() { return

hello fishfan
; }

export default App;

```

你再將module欄位去除,你會發現css樣式不起作用

less sass 等 css預處理工具

如果你要是使用哪個你就安裝哪個前處理器即可 我們拿less為例

yarn add less -D

安裝之後你就可以使用less,無須其他配置。

eslint & prettier

eslint是用來規範程式碼的書寫格式,團隊專案必備! pritter 自動幫我們格式化的

eslint

在根目錄建立.eslintrc.js檔案,eslint的規則可以由我們自己來書寫,關於如何配置可以 點選此處

這裡就按照我的package.json來安裝就可以

packag.json配置如下

``` { "name": "vite", "version": "0.0.0", "scripts": { "dev": "vite", "build": "tsc && vite build", "serve": "vite preview", "lint:fix": "eslint ./src --ext .jsx,.js,.ts,.tsx --quiet --fix --ignore-path ./.gitignore", "lint:format": "prettier --loglevel warn --write \"./*/.{js,jsx,ts,tsx,css,md,json}\" ", "lint": "yarn lint:format && yarn lint:fix ", "type-check": "tsc" }, "dependencies": { "react": "^17.0.0", "react-dom": "^17.0.0" }, "devDependencies": { "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "@typescript-eslint/eslint-plugin": "^4.28.2", "@typescript-eslint/parser": "^4.28.2", "@vitejs/plugin-react": "^1.0.0", "eslint": "^7.30.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-html": "^6.2.0", "eslint-plugin-import": "^2.23.4", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-node": "^11.1.0", "eslint-plugin-prettier": "^3.4.0", "eslint-plugin-promise": "^5.1.1", "eslint-plugin-react": "^7.24.0", "eslint-plugin-simple-import-sort": "^7.0.0", "pre-commit": "^1.2.2", "prettier": "^2.3.2", "typescript": "^4.3.2", "vite": "^2.6.4" } }

```

建立eslint規則檔案.eslintrc.js

``` module.exports = { root: true, parser: '@typescript-eslint/parser', parserOptions: { ecmaVersion: 2020, sourceType: 'module', ecmaFeatures: { jsx: true, }, }, settings: { react: { version: 'detect', }, }, env: { browser: true, amd: true, node: true, }, extends: [ 'eslint:recommended', 'plugin:react/recommended', 'plugin:jsx-a11y/recommended', 'plugin:prettier/recommended', // Make sure this is always the last element in the array. ], plugins: ['simple-import-sort', 'prettier'], rules: { 'prettier/prettier': ['error', {}, { usePrettierrc: true }], 'react/react-in-jsx-scope': 'off', 'jsx-a11y/accessible-emoji': 'off', 'react/prop-types': 'off', '@typescript-eslint/explicit-function-return-type': 'off', 'simple-import-sort/imports': 'error', 'simple-import-sort/exports': 'error', 'jsx-a11y/anchor-is-valid': [ 'error', { components: ['Link'], specialLink: ['hrefLeft', 'hrefRight'], aspects: ['invalidHref', 'preferButton'], }, ], }, };

```

建立不需要eslint檢測的檔案.eslintignore

node_modules .DS_Store dist dist-ssr *.local node_modules/*

按照規則我們會發現我們的許多程式碼都是不符合規範的,如果去修改需要手動的一個一個去修改(或者在commit的時候,使用eslint一鍵修復),這樣很麻煩,我們想實現在儲存的時候,能夠自動地修復。

這時候就需要我們的prettier出場

prettier

關於prettier詳細介紹可以 點選此處

在VScode 我們首先要安裝Prettier外掛

在根目錄外掛.prettierrc.js檔案 內容如下,可以根據自己的需求來配置規則 ``` module.exports = { semi: true, trailingComma: 'all', singleQuote: true, printWidth: 90, tabWidth: 2, jsxBracketSameLine: true, endOfLine: 'auto', };

``` 同樣建立忽略修復的檔案.prettierignore

node_modules .DS_Store dist dist-ssr *.local node_modules/*

開啟VScode的自動儲存配置

第一步開啟設定搜尋format on save 如圖進行設定

6.png

第二步搜尋formatter 選擇prettier

7.png

在程式碼提交之前,進行程式碼規則檢查能夠確保進入git倉庫的程式碼都是符合規範的,但是整個專案執行lint速度會很慢,lint-staged能夠讓lint只檢測暫存區的檔案,所以速度很快

安裝husky和lint-staged

yarn add husky lint-staged -D

package.json新增如下配置 "husky":{ "hooks":{ "pre-commit":"lint-staged" } }, "lint-staged":{ "*.js":"eslint --fix", "*.ts":"eslint --fix" }, 當檔案變化,我們git commit它們,pre-commit鉤子會啟動,執行lint-staged命令.

resolve

alias

路徑別名 和webpack中的alias功能一樣,當專案比較複雜的時候,如果在深層的檔案想引入最外層的檔案 例如會出現如下情況,我們可以將src設定為跟目錄,用@符來標識

``` import untils from '../../../../util' // 未使用別名

import untils from '@/util' // 使用別名後 ```

extensions

使用extensions可以忽略匯入時候的副檔名,例如

``` import App from './app.jsx // 未使用extensions

import App from './app // 使用extensions ```

修改vite.config.ts的檔案

``` // vite.config.ts

import { defineConfig } from 'vite' import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], resolve: { extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], alias: { '@': '/src', }, }, })

```

server

關於配置中server需要關注的是proxy,請求代理,如果我們沒有設定proxy,那麼我們傳送請求就會出現跨域的情況。

server: { proxy: { '/api': { target: 'https://www.xxx.xxx', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') }, } } 在vite.config.js這麼配置,那麼你的請求url字首都是以/api開頭的話,就會被轉發到https://www.xxx.xxx中。

至此關於React專案基本的搭建已經完畢,下面介紹的是如何在Vite搭建的React專案中使用React-route和Antd

下面內容參照該文章 https://juejin.cn/post/6938671679153373214#heading-5

路由

首選安裝 react-router-dom

yarn add react-router-dom -D // 這麼安裝是react-router-dom的最新版本 我的版本6.0.2

react-router-dom的最新版本(6x之後)不提供Switch元件而是使用Routes,關於react-router-dom 5x版本和6x版本的差異請點選下方連結檢視

連結1

連結2

連結3

在src檔案下建立Home和About資料夾,並建立對應的檔案

``` /src/Home/index.tsx

import React from 'react'

export default function index() { return (

Home
) }

```

``` /src/About/index.tsx

import React from 'react'

export default function index() { return (

About
) }

```

根目錄建立route.tsx檔案

這裡我需要解釋下為什麼route檔案是tsx而不是ts檔案,主要是內部需要直接使用元件 ,之前我是使用匯出函式,然後在Route裡面執行函式的方式來,發現Vite不在熱更新,很神奇,感覺這是Vite與最新的React-route-dom不相容的問題,我補充下有問題程式碼的寫法 如下:

``` // route.tsx import Home from '../src/Home' import About from '../src/About'

const routes = [ { path: "/home", component: Home }, { path: "/about", component: About } ];

export default routes

// App.tsx import React from 'react' import { Route, Routes } from "react-router-dom"; import routes from './route' import './App.css'

function App() { return (

{ routes.map(item => { return }) }

) }

export default App

這是使用之後Vite不在熱更新的寫法!!!

```

沒有問題的寫法

``` // route.tsx import Home from '../src/Home' import About from '../src/About'

const routes = [ { path: "/home", component: }, { path: "/about", component: } ];

export default routes

```

修改App.tsx檔案

``` import React from 'react' import { Route, Routes } from "react-router-dom"; import routes from './route' import './App.css'

function App() { return (

{ routes.map(item => { return }) }

) }

export default App

``` 修改main.tsx檔案

``` import React from 'react' import ReactDOM from 'react-dom' import {BrowserRouter} from 'react-router-dom' import './index.css' import App from './App'

ReactDOM.render( , document.getElementById('root') )

```

分別訪問 http://localhost:3000/home 和 http://localhost:3000/about 會看到自己路由生效

使用Antd

安裝antd和 @ant-design/icons ,antd 4x版本之後圖示庫就和antd本身區分開了,需要單獨安裝

yarn add antd @ant-design/icons

在App.tsx檔案引入antd

``` import React from 'react' import { Route, Routes} from "react-router-dom"; import routes from './route' import { Button } from 'antd' import './App.css'

function App() { return (

{ routes.map(item => { return }) }
) }

export default App

```

你會發現

1.png

那是因為我們沒有引入antd 的樣式,在main.tsx引入antd的樣式

// main.tsx import 'antd/dist/antd.css'

2.png 樣式生效了!!! 但是執行打包命令

yarn build

我們來看下打包後的css體積,有500多KB,很明顯樣式沒有實現按需載入。

3.png

antd樣式實現按需載入

請注意我們這裡使用的是less,如果你是使用css,下方配置對應的也需要修改

安裝vite-plugin-imp

yarn add vite-plugin-imp -D

修改vite.config.js ``` import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import vitePluginImp from 'vite-plugin-imp'

// https://vitejs.dev/config/ export default defineConfig({ plugins: [ react(), vitePluginImp({ libList: [ { libName: "antd", style: (name) => antd/lib/${name}/style/index.less, // 這裡是less,沒安裝less,就使用css(css使用全域性樣式無法生效) }, ], }) ], css: { preprocessorOptions: { less: { javascriptEnabled: true, } } }, })

``` 刪除main.tsx 引入antd樣式的程式碼

import 'antd/dist/antd.css' 刪除

再執行打包命令發現css的體積減小到40kb左右,體積大幅減少。

4.png

如何修改antd的全域性樣式

修改vite.config.js中的css配置,新增modifyVars物件,物件的變數就是antd全域性的變數值

css: { preprocessorOptions: { less: { javascriptEnabled: true, modifyVars:{ 'primary-color': '#ff704c', 'link-color': '#ff704c', 'border-radius-base': '4px', } } } },

5.png

我們會發現設定的全域性主題顏色發生了變化,說明我們的配置生效了

結束結束

專案地址: https://github.com/wuqiren/fish-vite