Vite - 플러그인 사용하기

https://ko.vitejs.dev/guide/using-plugins.html

Vite

 

플러그인 추가하는 법

플러그인을 사용하려면 devDependencies 에 플러그인을 추가하고

vite.config.js 설정 파일의 plugins 배열에 해당 플러그인을 포함시켜야 한다.

plugins 에는 여러 플러그인을 하나의 요소로 묶는 사전 설정을 포함시킬 수 있으며 프레임워크 통합과 같은 여러 플러그인을 사용하여 구혀되는 복잡한 기능을 구현할 때 사용될 수 있다. 내부적으로 배열은 Flatten 연산을 거친다고 한다.

Flatten 연산이란?
다차원 배열을 1차원 배열로 평탄화 하는 것

추가로 다른 플러그인을 쉽게 활성화하거나 비활성화 시킬 수 있는 플러그인은 무시된다고 한다.

 

공식 플러그인

https://ko.vitejs.dev/plugins/

Vite

• @vitejs/plugin-react : esbuild 와 Babel 을 사용하여 작은 패키지 크기와 Babel 변형 파이프라인의 유연성을 통하여 빠른 HMR을 달성, 추가 Babel 플러그인이 없으면 빌드 중 esbuild 만 사용된다.
• @vitejs/plugin-react-swc : 개발 중에는 Babel 대신 swc를 사용
• @vitejs/plugin-legacy : 프로덕션 빌드를 위한 이전 브라우저 지원을 제공

 

커뮤니티 플러그인

 

https://github.com/vitejs/awesome-vite#plugins

GitHub - vitejs/awesome-vite: ⚡️ A curated list of awesome things related to Vite.js

여러 설정들을 빠르게 설정 가능하다.

 

플러그인 순서 정하기

Rollup 플러그인과 호환을 위해 플러그인 순서를 정하거나 빌드 시 플러그인이 동작하도록 구성 가능

• enforce : 플러그인 순서를 정하고자 할 때 속성
• pre : 코어 플러그인보다 먼저 실행하고자 할 때
• post : 빌드 플러그인 이후에 실행하고자 할 때

import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      ...image(),
      enforce: 'pre'
    }
  ]
})

 

기본적으로 플러그인은 개발서버(serve)와 빌드(build) 모두 동작하지만 조건부로 플러그인이 동작하길 원한다면

apply 프로퍼티를 사용하여 지정해줄 수 있다.

export default defineConfig({
  plugins: [
    {
      ...typescript2(),
      apply: 'build'
    }
  ]
})