@@ -64,9 +64,32 @@ module.exports = {
6464
6565### Vite {/* vite* /}
6666
67- 如果你使用 Vite,可以将插件添加到 vite- plugin-react 中 :
67+ 如果你使用 Vite v6.0.0 或者更高版本,那么可以从 ` @vitejs/ plugin-react` 中导出并配置 ` reactCompilerPreset ` :
6868
69- ``` js {3,9}
69+ <TerminalBlock >
70+ npm install -D @rolldown/plugin-babel
71+ </TerminalBlock >
72+
73+ ``` js {3-4,9-11}
74+ // vite.config.js
75+ import { defineConfig } from ' vite' ;
76+ import react , { reactCompilerPreset } from ' @vitejs/plugin-react' ;
77+ import babel from ' @rolldown/plugin-babel' ;
78+
79+ export default defineConfig ({
80+ plugins: [
81+ react (),
82+ babel ({
83+ presets: [reactCompilerPreset ()]
84+ }),
85+ ],
86+ });
87+ ```
88+
89+ <Note >
90+ 从 ` @vitejs/plugin-react@6.0.0 ` 开始,内联的 Babel 选项已经被移除。如果你使用的是更低版本,可以通过下面的方式进行配置:
91+
92+ ``` js
7093// vite.config.js
7194import { defineConfig } from ' vite' ;
7295import react from ' @vitejs/plugin-react' ;
@@ -81,26 +104,21 @@ export default defineConfig({
81104 ],
82105});
83106```
107+ </Note >
84108
85- 或者,如果你更倾向于为 Vite 使用一个独立的 Babel 插件:
86-
87- <TerminalBlock >
88- npm install -D vite-plugin-babel
89- </TerminalBlock >
109+ 或者, 你也可以通过 ` @rolldown/plugin-babel ` 直接使用 Babel 插件。
90110
91- ``` js {2,11 }
111+ ``` js {3,9 }
92112// vite.config.js
93- import babel from ' vite-plugin-babel' ;
94113import { defineConfig } from ' vite' ;
95114import react from ' @vitejs/plugin-react' ;
115+ import babel from ' @rolldown/plugin-babel' ;
96116
97117export default defineConfig ({
98118 plugins: [
99119 react (),
100120 babel ({
101- babelConfig: {
102- plugins: [' babel-plugin-react-compiler' ],
103- },
121+ plugins: [' babel-plugin-react-compiler' ],
104122 }),
105123 ],
106124});
0 commit comments