Vite+React搭建开发构建环境实践记录

更新时间：2022年09月15日 10:20:53 作者：韩子卢

这篇文章主要介绍了Vite+React搭建开发构建环境实践,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

前言

使用 Vite 已经有两年了，期间使用它开发过单页面应用，也开发过浏览器扩展插件，对比日常工作中用到的 webpack 构建速度大幅提升，开发体验也好很多。
虽然相比于 webpack 来说简单了很多，但是仍然有一些配置需要记录一下，以便之后可以快速搭建一个本地开发构建的环境。

使用 create-vite 脚手架生成基础模板

运行命令安装脚手架

yarn create vite

我在安装时提供的命令行选项那里，选择了 React + TypeScript。

使用下面的命令启动项目

yarn dev

此时的项目已经默认集成了 @vitejs/plugin-react 这个插件。

到这一步其实就已经基本结束了，自动集成 HMR，jsx，ts，css module，资源打包等一系列功能。

相比于 webpack，简直不要太友好。

eslint

先安装 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@* // 这个可以移除

之后有两个方案：

方案一，使用vite-plugin-eslint，这个会在报错时在页面上显示报错信息。
方案二，使用 VSCode 的 ESlint 插件去使用 ESLint，这个是在代码上出现红线报错。（个人更喜欢这种）

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

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" // 表达式中的布尔值必须严格是布尔类型
    }
}

prettier

安装

yarn add prettier -D

根目录下新建.prettierrc 配置文件,然后给个我自己用的配置方案:

{
    printWidth: 100,
    tabWidth: 4,
    useTabs: false,
    singleQuote: true,
    jsxSingleQuote: false,
    endOfLine: 'lf'
}

一般这个配合 VSCode 的 Prettier 插件和保存时格式化即可。

另外，对于 lf 和 crlf 的处理，保存时没法切换，需要在 VSCode 中设置。

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>
);

这里我将路由相关代码放在了单独的路由文件 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";

默认情况下，会直接报错，所以我们需要在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/*"]
        }
    },
}

完毕。

Less 与 CSS Module

Vite 已集成了 CSS Module 功能，但是想要使用 Less 还需要安装 less 这个库。

yarn add less

最后使用的方式如下：

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

总结

暂时就记录这么多吧，后续如果有一些别的功能配置，也会统一记录在这篇博客。

示例代码仓库：vite-react-practice。

到此这篇关于Vite+React搭建开发构建环境实践的文章就介绍到这了,更多相关React环境搭建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React Fiber源码深入分析
Fiber 可以理解为一个执行单元，每次执行完一个执行单元，React Fiber就会检查还剩多少时间，如果没有时间则将控制权让出去，然后由浏览器执行渲染操作，这篇文章主要介绍了React Fiber架构原理剖析,需要的朋友可以参考下
2022-11-11
React重新渲染超详细讲解
什么是re-render（重新渲染）？哪些是必要的re-render？哪些是非必要的re-render？如果你对这些问题还不是很明白，那么可以在这篇文章中找到答案
2022-11-11
简单分析React中的EffectList
这篇文章主要简单分析了React中的EffectList，帮助大家更好的理解和学习使用React进行前端开发，感兴趣的朋友可以了解下
2021-04-04
React项目build打包页面空白的解决方案
React项目执行build命令后,在本地服务器打开页面是空白的,本文主要介绍了React项目build打包页面空白的解决方案,感兴趣的可以了解一下
2023-08-08
React 性能优化方法总结
这篇文章主要介绍了React性能优化方法总结，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09
React Hooks - useContetx和useReducer的使用实例详解
这篇文章主要介绍了React Hooks - useContetx和useReducer的基本使用,本文通过实例代码给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-11-11
React 中的 useContext使用方法
这篇文章主要介绍了React中的useContext使用,使用useContext在改变一个数据时，是通过自己逐级查找对比改变的数据然后渲染，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-08-08
react父组件调用子组件的方式汇总
在react中常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用,下面这篇文章主要给大家介绍了关于react父组件调用子组件的相关资料,需要的朋友可以参考下
2022-08-08
解决React报错Style prop value must be a
这篇文章主要为大家介绍了React报错Style prop value must be an object解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
React实践之Tree组件的使用方法
本篇文章主要介绍了React实践之Tree组件的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09