首先，我们使用 vite 创建一个 React 项目
npm
create vite
上面的命令执行完成之后，会引导你输入项目名称，我们将项目名称取为：react19feature
✔
Project name: react19feature
输入之后，按下回车，选择前端框架
1
vanilla
2
vue
3
>
react
4
react-ts
5
preact
6
lit
7
svelte
我们选择 react
，执行完毕之后，vite 会在当前目录中创建项目 react19feature
，我们通过如下指令进入到项目文件
cd
react19feature
然后用编辑器打开项目文件，在根目录的 package.json
文件中修改 react
与 react-dom
的依赖版本为 react 19.
1
"dependencies "
: {
2
"react "
:
"^19.0.0 "
,
3
"react-dom "
:
"^19.0.0 "
,
4
}
注意：如果已经正式发版，那么vite 创建的版本可能会直接更新为最新版而不需要我们手动修改
修改完成之后，执行如下指令安装依赖
npm
i
然后执行如下指令运行项目
npm
run dev
成功启动之后，我们可以在浏览器中输入 http://localhost:5173
访问到项目
10
import
{ useState }
from
'react '
20
import
reactLogo
from
'./react.svg '
30
import
viteLogo
from
'./vite.svg '
40
50
function
App
() {
60
const
[
count
,
setCount
]
=
useState
(
0
)
70
80
return
(
90
<
div
className
=
'flex items-center justify-center flex-col '
>
10
<
div
>
11
<
a
href
=
"https://vitejs.dev "
target
=
"_blank "
>
12
<
img
src
={
viteLogo
}
className
=
"logo "
alt
=
"Vite logo "
/>
13
</
a
>
14
<
a
href
=
"https://react.dev "
target
=
"_blank "
>
15
<
img
src
={
reactLogo
}
className
=
"logo react "
alt
=
"React logo "
/>
16
</
a
>
17
</
div
>
18
<
h1
>Vite + React </
h1
>
19
<
div
className
=
"text-center "
>
20
<
button
className
=
'button '
onClick
={
()
=>
setCount
((
count
)
=>
count
+
1
)
}
>
21
count is
{
count
}
22
</
button
>
23
<
p
>
24
Edit <
code
>src/App.tsx </
code
>and save to test HMR
25
</
p
>
26
</
div
>
27
<
p
className
=
"read-the-docs "
>
28
Click on the Vite and React logos to learn more
29
</
p
>
30
</
div
>
31
)
32
}
33
34
export default
App
由于我们项目需要用到 require
，但是 vite 中使用 ES module 作为模块方案，因此并没有内置对CommonJS 的支持，如果你需要在项目中支持 require
语法引入模块，则需要做点其他的操作
首先，我们需要安装如下依赖
npm
i vite-plugin-require-transform
--save-dev
然后，在 vite.config.js
中新增如下配置
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