基于vite搭建React项目

背景

最近要做一个新项目，打算用 vite 来搭建项目。毕竟最近 vite 很火，vite 也可以说代表着未来，可以学习一下。

本文主要记录整个项目的搭建过程。

脚手架

直接用 vite 官方文档 提供的命令来初始化整个项目，框架选择 React ，加上 ts 类型提示。整个过程没有踩到坑，很顺畅。

组件库

组件库使用字节开源的 arco-design。原因是以前一直用的 arco-desigin，对它比较熟悉 (提过PR)，而且 oncall 也能及时响应。

css

tailwind，推荐使用，没有用过的一定要试一下！！

tailwind css 是现代工程化框架里把原子css做到极致的css框架，它将大部分css属性封装成语义化的类，使用者的关注点从写css到使用tailwind类名，极大的减少了代码量。

优点：

1. 降低为类命名的精力——如何为div起一个语义化的类名是开发者经常遇到的问题，使用tailwind之后，大部分情况下都能直接使用 tailwind 类名而无需开发者关注如何起名，这对大部分开发者都是喜闻乐见的事。

2. 大大减少CSS代码量。

3. 样式跟着元素走，方便删除。tailwind是内联在元素上，元素如果需要删除，css也会跟着删除。

缺点：原子类太多，需要花费时间去记忆和查阅官方文档。

如果你是VSCode使用者，VSCode有tailwind插件提示。

image.png

请求

请求使用 fetch，使用 React hooks 库 swr 来管理请求的状态，包括返回的数据，error状态等。

举个🌰：

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

swr 对接口状态进行了封装，在内部维护了数据的状态，使开发者不在需要去自行维护这些状态。
当然，swr 的能力不止这些，还有像条件请求、自动重新请求、缓存等功能。

状态管理

新项目状态管理舍弃了 redux，原因是太繁琐，不好用。

接入了轻量级的 unstated-next ，使用很简单，源码也才40行，很容易理解原理。

项目目录

-src
    -assets
    -components
    -constant
    -hooks
    -pages
    -services
    -routes.ts
    -App.tsx
    -main.css
    -main.tsx

路由配置

新增 routes.ts 文件，所有页面的路由都集中在 routes.ts 配置。

import YourComponent from '@pages/YourComponent'

const routesConfig = [
  {
    path: '/',
    component: YourComponent
  },
]

export default routesConfig

把页面布局以及路由都集中到 App.tsx 中：

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import routerConfig from '@/routes'
import Layout from '@/components/Layout'
import Header from '@/components/Header';
import { Notification } from '@arco-design/web-react'
import userContainer, { useUser } from '@/hooks/useUser';
import { Spin } from '@arco-design/web-react'
import './main.css';
import "@arco-design/web-react/dist/css/arco.css";

function App() {
  const { isLoading, isError } = useUser();
  if (isLoading) {
    return <Spin dot />
  }

  if (isError) {
    Notification.error({
      title: '请重新登录',
      content: '正在重新加载',
    })
    return null;
  }
  
  return (
    <BrowserRouter basename='mlbb'>
      <userContainer.Provider>
        <Header />
        <div className="flex">
          <Layout />
          <div className="bg-slate-200 flex-1 p-5 h-screen overflow-hidden">
            <Routes>
              {
                routerConfig.map((route) => {
                  const { path, component: Component} = route
                  return (
                    <Route key={route.path} path={path} element={<Component />} />
                  )
                })
              }
              </Routes>
            </div>
          </div>
        </userContainer.Provider>
    </BrowserRouter>
  )
}

export default App;

在 App.tsx 里面，可以判断当前用户是否登录，如果没有登录则提示登录及展示登录页。

由于笔者是在 sso 登录，已经在接口层面做了判断，如果没有登录会直接在接口层打开 sso 登录页。

整个页面的布局如下：

image.png

渲染

在 main.tsx 渲染 App

import ReactDOM from 'react-dom/client'
import App from './App';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
 <App />
)

问题

整个流程还是比较顺畅的，唯一遇到的问题是在 接入 sso 之后，如果本地启动还是用 localhost去访问，则 sso 无法访问，这就需要把页面通过域名来访问，然后代理到本地。

而 vite 默认是无法通过ip去访问的，需要在 vite.config.ts 配置 host ：

image.png