1、vite 简介

随着前端项目越来越复杂，我们无法像十多年前那样，只编写一些简单的 JS 脚本然后在 html 中引入，就可以应付整个项目。因此，现阶段的前端项目已经发展成为了一个完整的工程化项目。我们需要借助构建工具帮助我们把复杂的前端项目打包然后交付给浏览器运行。

在过去，我们总是基于 webpack 来构建我们的前端项目。但是随着项目的越来越庞大，webpack 相关的性能问题成为了前端开发者的痛点，启动时间和热更新的时间都太长了。因此，现在最热门的构建工具变成了更快的 vite。

vite 是一个超快的构建工具，他基于浏览器开始支持原生的 ES 模块这一特性使开发者获得了超快的开发体验。因此，它快速的流行了起来。在我们的专栏中，也推荐大家基于 vite 来构建自己的第一个 React 项目。

当然，也推荐使用 rspack，和 vite 相比，它具备更好的兼容性

2、创建项目

首先，我们在终端中，运行如下指令创建一个 React 项目

npm create vite

上面的命令执行完成之后，会引导你输入项目名称，我们将项目名称取为：keeplearn

✔ Project name: keeplearn

输入之后，按下回车，选择前端框架，我们依次选择

1
    vanilla
2
    vue
3
❯   react
4
    preact
5
    lit
6
    svelte

1
    TypeScript
2
❯   TypeScript + SWC
3
    JavaScript
4
    JavaScript + SWC

SWC 是对标 babel 的编译工具，具备更好的编译性能，但是在引入三方插件时，有可能会存在兼容性的问题，因此在生产环境需要谨慎使用。由于本项目仅为学习项目，所以我们这里选择 TypeScript + SWC。

执行完毕之后，vite 会在当前目录中创建项目 keeplearn，我们通过如下指令进入到项目文件

cd keeplearn

然后用编辑器打开项目文件，在根目录的 package.json 文件中观察到，目前 react 与 react-dom 的依赖版本为 react 19. 如果未来你的版本发生了变化，则自行调整即可。

1
"dependencies": {
2
  "react": "^19.0.0",
3
  "react-dom": "^19.0.0"
4
},

在终端中进入到项目目录之后，我们可以执行如下指令安装项目依赖

npm i

依赖安装完成之后，然后执行如下指令运行项目

npm run dev

成功启动之后，我们可以在浏览器中输入 http://localhost:5173 访问到项目，项目运行结果大概如下所示。下面例子中的代码与实际的代码会略有出入，以实际为准。

10
import Image from 'next/image'
20
import { useState } from 'react'
30
import reactLogo from './react.svg'
40
import viteLogo from './vite.svg'
50

60
function App() {
70
  const [count, setCount] = useState(0)
80

90
  return (
10
    <div className='flex items-center justify-center flex-col'>
11
      <div>
12
        <a href="https://vitejs.dev" target="_blank">
13
          <Image src={viteLogo} className="logo" width={50} alt="Vite logo" />
14
        </a>
15
        <a href="https://react.dev" target="_blank">
16
          <Image src={reactLogo} className="logo react" width={50} alt="React logo" />
17
        </a>
18
      </div>
19
      <h1>Vite + React</h1>
20
      <div className="text-center">
21
        <button className='button' onClick={() => setCount((count) => count + 1)}>
22
          count is {count}
23
        </button>
24
        <p>
25
          Edit <code>src/App.tsx</code> and save to test HMR
26
        </p>
27
      </div>
28
      <p className="read-the-docs">
29
        Click on the Vite and React logos to learn more
30
      </p>
31
    </div>
32
  )
33
}
34

35
export default App

3、支持 require

由于我们项目需要用到 require，但是 vite 中使用 ES module 作为模块方案，因此并没有内置对CommonJS 的支持，如果你需要在项目中支持 require 语法引入模块，则需要做点其他的操作

首先，我们需要安装如下依赖

npm i vite-plugin-require-transform --save-dev

然后，在 vite.config.ts 中新增如下配置

 
10
import { defineConfig } from 'vite'
 
20
import react from '@vitejs/plugin-react-swc'
+
30
import requireTransform from 'vite-plugin-require-transform'
 
40

 
50

 
60
// https://vitejs.dev/config/
 
70
export default defineConfig({
 
80
  plugins: [
 
90
    react(),
+
10
    requireTransform({
+
11
      fileRegex: /.js$|.jsx$/,
+
12
    }),
 
13
  ],
 
14
})

如果你需要支持更多的文件后缀，则需要在 fileRegex 中添加，本项目仅支持 .js 与 .jsx

最后重启项目即可。

除此之外，如果你的项目中需要使用路由库，我们可以安装 react-router

npm i react-router

状态管理库 zustand

npm i zustand