日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

Vite+React搭建開發(fā)構(gòu)建環(huán)境實(shí)踐記錄_React

作者：韓子盧 ? 更新時(shí)間： 2022-11-07 編程語言

前言

使用 Vite 已經(jīng)有兩年了，期間使用它開發(fā)過單頁面應(yīng)用，也開發(fā)過瀏覽器擴(kuò)展插件，對比日常工作中用到的 webpack 構(gòu)建速度大幅提升，開發(fā)體驗(yàn)也好很多。
雖然相比于 webpack 來說簡單了很多，但是仍然有一些配置需要記錄一下，以便之后可以快速搭建一個(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，簡直不要太友好。

eslint

先安裝?eslint：

yarn add eslint -D

然后初始化eslint配置：

yarn eslint --init

選擇選項(xiàng)后，我自己安裝的庫大致是：

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è)會在報(bào)錯(cuò)時(shí)在頁面上顯示報(bào)錯(cuò)信息。
  • 方案二，使用 VSCode 的 ESlint 插件去使用 ESLint，這個(gè)是在代碼上出現(xiàn)紅線報(bào)錯(cuò)。（個(gè)人更喜歡這種）

方案二直接用插件即可，方案一需要安裝一下庫：

yarn add vite-plugin-eslint -D

安裝完畢后，在vite.config.ts中配置：

//...
import eslint from "vite-plugin-eslint";
export default defineConfig({
    plugins: [react(), eslint()],
    //...
});

無論方案一還是方案二，此時(shí)仍會報(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)，比如單雙引號的使用之類的，所以剛配置完一般都一堆報(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í)格式化即可。

另外，對于 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,
            },
        },
    },
});

別名

通常我們會使用下面的方式來使用別名：

import reactLogo from "@/assets/react.svg";

默認(rèn)情況下，會直接報(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è)依賴庫，所以還要運(yùn)行命令安裝：

yarn add path -D

此時(shí)別名功能已經(jīng)可以正常使用，但是__dirname會報(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è)庫。

yarn add less

最后使用的方式如下：

import styles from "./App.module.less";

總結(jié)

暫時(shí)就記錄這么多吧，后續(xù)如果有一些別的功能配置，也會統(tǒng)一記錄在這篇博客。

示例代碼倉庫：vite-react-practice。

原文鏈接：https://www.cnblogs.com/vvjiang/archive/2022/09/15/16693767.html

欄目分類
最近更新