jotai/babel 번들에서 제공하는 플러그인을 사용하면 Vite와 Jotai를 함께 사용할 때 개발자 경험을 향상시킬 수 있습니다.

vite.config.ts 파일에서 다음과 같이 설정할 수 있습니다:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import jotaiDebugLabel from 'jotai/babel/plugin-debug-label'
import jotaiReactRefresh from 'jotai/babel/plugin-react-refresh'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({ babel: { plugins: [jotaiDebugLabel, jotaiReactRefresh] } }),
  ],
  // ... 나머지 설정
})

아래 템플릿을 통해 직접 시도해 볼 수 있습니다.

Examples

Vite 템플릿