Plugins
vite-plugin-swc-react
features
- Speedy Compiling in SWC
- HMR Support in React Refresh
- New JSX Transform
- Polyfill and Transpiler in SWC
Using template
npx degit iheyunfei/vite-swc-react-ts my-project
// or using javascript template
npx degit iheyunfei/vite-swc-react my-project
cd my-project
npm install
npm run dev
install
yarn add -D vite-plugin-swc-react
// or
npm install -D vite-plugin-swc-react
Usage
import { defineConfig } from 'vite'
import swcReact from 'vite-plugin-swc-react'
export default defineConfig({
plugins: [swcReact()],
})Polyfill and Transpiler
To enable polyfill, you would need to
- install
browserlistas a devDependency - install
core-jsas a dependency - pass options like
import { defineConfig } from 'vite'
import swcReact from 'vite-plugin-swc-react'
export default defineConfig({
plugins: [
swcReact({
swcOptions: {
env: {
// https://vitejs.dev/guide/build.html#browser-compatibility
targets: 'defaults and supports es6-module and supports es6-module-dynamic-import, not opera > 0, not samsung > 0, not and_qq > 0',
mode: 'usage',
coreJs: 3,
}
}
}),
],
})ES5
If your target browser only supports ES5, you may want to checkout @vitejs/plugin-legacy.
disable HMR
import { defineConfig } from 'vite'
import swcReact from 'vite-plugin-swc-react'
export default defineConfig({
plugins: [
swcReact({
reactFresh: false,
}),
],
})classic JSX runtime
import { defineConfig } from 'vite'
import swcReact from 'vite-plugin-swc-react'
export default defineConfig({
plugins: [
swcReact({
swcOptions: {
jsc: {
transform: {
react: {
runtime: 'classic',
},
},
},
},
}),
],
})