基于Vite快速建立react环境

前言

据2021年年底的数据统计，诞生不久的vite现已经成为了排名第一的构建工具，如果经常使用webpack，会常常遇到因为项目过大导致打包慢，热更新慢的问题，而vite的使用可以说是非常的快，为什么会这样则涉及到更多的话题，这里不做细说，这篇文章主要谈谈如何基于vite建立一个简单的react环境。

---

创建一个react项目

首先需要打开终端，进行vite的引入

yarn create vite

创建一个react项目

yarn create vite my-app --template react
cd my-app
yarn

以上的过程结束你会得到一个react项目，其目录结构如下

打开main.jsx入口文件简单看一看，再在终端中执行yarn dev启动项目，你会发现速度很快，通常是1s以内，这就是vite的速度！

在浏览器中可以看见这个简单的项目启动的展示效果

一般情况下，我们需要按照需要配置以下目录结构，如状态管理、路由、静态资源、组件、页面、工具包，这些都需要在src下有一席之地，按照我个人的习惯，我预先建立了比较常见的以下目录：

后续让我们来一点点完善这个项目，使这个项目可以满足工作需求

---

给项目添加路由

路由是一个项目最重要的模块之一，所以我们先来把路由添上，其实在这里添加路由和在webpack中添加区别不大，这里就简单了解一下。

• 首先需要安装react-router-dom，注意这里的版本是v5

npm install react-router-dom@5.3.0

• 在pages中简单写两个页面，用来切换路由使用
• 在router文件夹中编写路由文件index.js，导出路由模块

import Home from '../pages/home'  //刚刚写好的页面
import Find from '../pages/find'

export default {
    routes: [{
            exact: true,
            path: '/',
            component: Home
        },
        {
            exact: true,
            path: '/find',
            component: Find
        }
    ]
}

• 在main.jsx中将路由模块导入，并导入相关组件

import routerConfig from './router' //导入路由模块
import { HashRouter, Route, Switch } from 'react-router-dom' //导入组件

•  利用导入的组件把路由模块与应用进行连接

刚刚建立的react项目中，在路口文件main.jsx中是预先就引入了一个<App />组件的，主要是用来初始项目的展示，现在我们不需要可以直接注释掉，换成我们的路由页面，如下

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { HashRouter, Route, Switch } from 'react-router-dom'
import routerConfig from './router'


ReactDOM.render(
  <React.StrictMode>
    {/* <App /> */}
    <HashRouter>
        <Switch>
          {
            routerConfig.routes.map((router) => {  //map方法把每一条路由都添加到应用
              return (
                <Route key={router.path} {...router} />
              )
            })
          }
        </Switch>
     </HashRouter>
  </React.StrictMode>,
  document.getElementById('root')
)

这样一个简单的路由就配好了

---

给项目添加状态管理

 状态管理，前端框架三剑客之一，这里我们将为我们的项目配置redux状态管理

• 安装以下依赖包
• npm install redux
• npm install react-redux
• npm install @reduxjs/toolkit
• npm install redux-thunk
• npm install esbuild

• 创建store

你可以在你的src目录中创建一个名为store的文件夹并在里面新建一个index.js文件

在该文件中你需要有以下的结构

//  store/index.js
import { configureStore } from "@reduxjs/toolkit"
export default configureStore({
    reducer:{
        //在这里配置reducer
    }
})

• 创建一个Redux切片（Slice）并在store中进行导入和配置

切片是应用中单个功能的Redux reducer 逻辑和 action 的集合，在这里做了一个计数功能的切片以供学习使用，代码如下

// store/counter
 
import { createSlice } from "@reduxjs/toolkit"
export const counter = createSlice({
    name:'counter', //切片的名称，在定位到该切片的时候需要用到
    initialState:{  //state的初始值，这是一个对象，里面包含用来所有组件共享的变量
        count:0     
    },
    reducers:{      //这里配置切片中用于操作变量的方法
        increment:state=>{ //一个方法即为一个action，“increment”即供action匹配的type字段
            state.count += 1
        }
    }
})
 
export const { increment } = counter.actions //要把所有的action都导出去，以供组件使用
export default counter.reducer //导出该切片，并在index.js文件（store）中的reducer进行配置
 
 
//配置如下
// store/index.js
import { configureStore } from "@reduxjs/toolkit"
import counter from './counter'
export default configureStore({
    reducer:{
        counter
    }
})

• 把配置好的store与应用进行连接

在应用的main.jsx中添加如下代码

import React from 'react'
import ReactDOM from 'react-dom'
import store from './store' //引入store
import { Provider } from 'react-redux' //引入这个组件用于包裹顶层组件
 
ReactDOM.render(
  <Provider store={store}> //通过Provider的store属性把我们自己配置的store注入到应用
    <App />
  </Provider>,
  document.getElementById('root')
)

• 使用和修改store中的state

其实到上一步，redux已经在项目中配置好了，这一步我们主要是看看store是否配置成功和测试一下使用方法，随便找一个应用中的组件：

import { useSelector,useDispatch } from 'react-redux' //引入两个钩子函数
import { increment } from '@/store/counter' //按需引入action
export default () => {
    const count = useSelector(state => state.counter.count) //这是第一个钩子函数的用法，用于获取store中的state，'counter'表示name:"counter"的切片，"count"这表示该切片中的某一个state变量,此时打印count将会得到初始值0
    const dispatch = useDispatch() //第二个钩子函数的用法，返回一个dispath方法，用于分发action
    const add = () =>{
        dispatch(increment()) //调用dispatch方法，把刚才按需加载的action进行分发，store中的数据即被修改
    }
        return (
        <>
            <h1>{count}!!!</h1>
            <button onClick={add}>加一</button>
        </>
    )
}

到这我们的redux差不多配好了

---

前端框架三剑客：框架本身、路由、状态管理我们都简单的进行了配置，所以一个项目环境也算是搭起来了，但是这对满足我们的工作需求肯定是不够的，大家可以根据自己的需求继续玩一玩、学一学、配一配这个项目，以下是官方的文档可供学习参考：

vite官方文档：开始 {#getting-started} | Vite中文网 (vitejs.cn)

redux安装配置：Redux 基础，第二节：应用的结构 | Redux 中文官网

一个统计前端技术走向的网站：2021 JavaScript Rising Stars