Vite2.0+React17搭建开发环境

最近研究Vite+Vue的开发环境，写demo。突发奇想，因为之前一直用React开发，所以想尝试一下 Vite+React。

这里默认已经安装了Node环境

要点：

• Vite脚手架初始化React项目

搭建 Vite 项目

兼容性注意

Vite 需要 Node.js 版本 >= 12.0.0。

可参考 官方文档有兴趣的可以看看文档。

一键生成项目

Vite提供两种初始化项目的方式，一种是：

npm init @vitejs/app
复制代码

还有一种是直接使用官方提供的模板，一键生成：

# npm 6.x
npm init @vitejs/app my-react-app --template react

# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-react-app -- --template react

# yarn
yarn create @vitejs/app my-react-app --template react
复制代码

本文使用 第二种方式生成项目：

按照上述步骤，进入 my-react-app，启动项目

cd my-react-app && yarn && yarn dev
复制代码

此时已经成搭建出 Vite + React 的开发环境了,接来下 配置路由。

引入路由插件react-router-dom

yarn add react-router-dom -S
复制代码

在项目src目录下新增pages目录，再创建两个目录 Home和About,并在目录下创建index.jsx

// /Home/index.jsx
import React from 'react'

export default function Home() {
    return (
      <div>
        Home
      </div>
    )
}

// /About/index.jsx
import React from 'react'

export default function About() {
    return (
      <div>
        About
      </div>
    )
}

复制代码

书写route.js

接下来配置路由，新建src/router/index.js文件，配置路由：

import Home from '../pages/Home'
import About from '../pages/About'

const routes = [
  {
    path:'/',
    component: Home,
    name:'Home'
  },
  {
    path:'/about',
    component: About,
    name:'About'
  },
]
export default routes
复制代码

配置App.jsx

在App.jsx文件中引入路由文件 并配置:

import React, { useState } from 'react'
import {BrowserRouter as Router, Switch, Route,Link} from 'react-router-dom'
import routes from './router'

import './App.css'

function App() {
  return (
    <div>
      <Router>
        <div className="navBox">
        {
          routes.map(route=><Link to={route.path} key={route.path} className="nav" >
            {route.name}
          </Link>)
        }
        <p>
          content 区域
        </p>
        </div>
      <br/>
      <Switch>
        {
          routes.map(route=><Route exact path={route.path} key={route.path} render={route.component}>
          </Route>)
        }
      </Switch>
    </Router>
    </div>
  )
}

export default App
复制代码

启动项目后查看配置好的页面

配置好基础项目没有UI还是很丑的，接下来再配置一个 UI组件库 antd,使项目更美观些。

配置 Antd UI组件库

首先下载安装包：

yarn add antd @ant-design/icons -S
复制代码

新版的antd 4 的icons库是分离的，需要单独安装

安装成功之后，在入口文件main.js中引入样式。

...
import 'antd/dist/antd.css'
...
复制代码

再回到/Home/index.jsx 文件做如下修改：

import React from 'react'
import {Button} from 'antd' 
export default function Home() {
    return (
      <div>
        Home
        <Button type='primary'>确认安装成功</Button>
      </div>
    )
}
复制代码

无需重启项目，打开浏览器刷新 如下图所示，代表成功引入antd

一切配置就绪，可以着手进行开发了。

改用Vite后，我想看看build后的文件大小，运行指令 yarn build,如下所示：

乍眼一看，全局引入的样式 打包后就有588.11kb,接下来了 我们试试 按需加载。

antd 按需加载

首先还是安装插件:

yarn add vite-plugin-imp -D
复制代码

然后在vite.config.js 配置

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import vitePluginImp from 'vite-plugin-imp'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    reactRefresh(),
    vitePluginImp({
      libList:[
        {
          libName:'antd',
          style: name=>`antd/lib/${name}/style/index.less`,
        }
      ]
    })
  ],
  css:{
    preprocessorOptions:{
      less:{
        // 支持内联js
        javascriptEnabled:true
      }
    }
  }
})
复制代码

因为引入的是 less，所以需要安装插件， yarn add less less-loader -D,安装成功后，把 main.jsx中的 import 'antd/dist/antd.css'去掉，再次运行 yarn build 看看包大小：

css样式包 变成了40.40kb，Amazing！

自定义 antd 主题色

修改 vite.config.js文件如下：

...
import lessToJs from 'less-vars-to-js';
import fs from 'fs';
import path from 'path';
// Read the less file in as string
const variablesConfig = lessToJs(fs.readFileSync(path.resolve(__dirname,'./config/variables.less'), 'utf8'))

export default defineConfig({
  plugins: [
    reactRefresh(),
    vitePluginImp({
      libList:[
        {
          libName:'antd',
          style: name=>`antd/lib/${name}/style/index.less`,
        }
      ]
    })
  ],
  css:{
    preprocessorOptions:{
      less:{
        // 支持内联js
        javascriptEnabled:true,
        // 重写less变量，定制样式 
        modifyVars:variablesConfig
      }
    }
  }
})
...

复制代码

less-vars-to-js包是将less样式转化为json键值对的形式

然后在根目录下添加 /config/variables.less文件,内容如下：

// 自定义覆盖 =============================================================
@primary-color: orange; // 全局主色
// 下面你可以各种写一些覆盖的样式
复制代码

重启项目后,主题色就改好了。 查看：