/vite-on-swc

speed up!

Primary LanguageTypeScriptMIT LicenseMIT

Plugins

vite-plugin-swc-react

features

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 browserlist as a devDependency
  • install core-js as 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',
            },
          },
        },
      },
    }),
  ],
})