@@ -64,9 +64,36 @@ module.exports = {
6464
6565### Vite {/* vite* /}
6666
67+ <<<<<<< HEAD
6768Vite を使用している場合は、プラグインを vite-plugin-react に追加できます。
69+ =======
70+ If you use Vite with version 6.0.0 or later of ` @vitejs/plugin-react ` , you can use the ` reactCompilerPreset ` :
71+ >>>>>>> 47e64bf7ad81aab8bacfa791a37816ee869135eb
6872
69- ``` js {3,9}
73+ <TerminalBlock >
74+ npm install -D @rolldown/plugin-babel
75+ </TerminalBlock >
76+
77+ ``` js {3-4,9-11}
78+ // vite.config.js
79+ import { defineConfig } from ' vite' ;
80+ import react , { reactCompilerPreset } from ' @vitejs/plugin-react' ;
81+ import babel from ' @rolldown/plugin-babel' ;
82+
83+ export default defineConfig ({
84+ plugins: [
85+ react (),
86+ babel ({
87+ presets: [reactCompilerPreset ()]
88+ }),
89+ ],
90+ });
91+ ```
92+
93+ <Note >
94+ In ` @vitejs/plugin-react@6.0.0 ` , the inline Babel option was removed. If you're using an older version, you can use:
95+
96+ ``` js
7097// vite.config.js
7198import { defineConfig } from ' vite' ;
7299import react from ' @vitejs/plugin-react' ;
@@ -81,26 +108,25 @@ export default defineConfig({
81108 ],
82109});
83110```
111+ </Note >
84112
113+ <<<<<<< HEAD
85114または、Vite 用の Babel プラグインを別に使用したい場合は以下のようにします。
115+ =======
116+ Alternatively, you can use the Babel plugin directly with ` @rolldown/plugin-babel ` :
117+ >>>>>>> 47e64bf7ad81aab8bacfa791a37816ee869135eb
86118
87- <TerminalBlock >
88- npm install -D vite-plugin-babel
89- </TerminalBlock >
90-
91- ``` js {2,11}
119+ ``` js {3,9}
92120// vite.config.js
93- import babel from ' vite-plugin-babel' ;
94121import { defineConfig } from ' vite' ;
95122import react from ' @vitejs/plugin-react' ;
123+ import babel from ' @rolldown/plugin-babel' ;
96124
97125export default defineConfig ({
98126 plugins: [
99127 react (),
100128 babel ({
101- babelConfig: {
102- plugins: [' babel-plugin-react-compiler' ],
103- },
129+ plugins: [' babel-plugin-react-compiler' ],
104130 }),
105131 ],
106132});
0 commit comments