난생처음 만드는 Vite 플러그인│인프콘2024

브라우저는 JSX나 Vue 파일을 그대로 이해하지 못하므로 Vite 개발 서버가 소스를 변환하고, 배포 빌드에서는 Rollup이 import 관계를 따라 모듈 그래프를 만든다. Rollup은 그래프를 출력 파일로 묶으면서 사용되지 않는 코드를 제거하는 트리셰이킹도 수행한다. 이 과정에서 Vite는 등록된 플러그인의 resolve, load, transform 훅을 차례로 호출해 각 모듈을 찾고 읽고 바꾼다.

Vite 플러그인은 Rollup과 호환되는 이름과 훅을 가진 객체로 정의하며 모듈 처리 단계마다 필요한 작업만 가로챈다. resolveId는 import 식별자를 실제 경로나 플러그인이 소유할 가상 ID로 결정하고, load는 해당 ID의 소스 코드를 제공한다. transform은 읽은 코드와 ID를 받아 내용을 다시 쓰므로 세 훅의 연결을 이해하면 모듈이 빌드 결과가 되는 전체 흐름을 추적할 수 있다.

첫 예제는 transform 훅에서 process.env.NODE_ENV를 빌드 환경의 문자열 리터럴로 치환하고 변경된 코드와 source map을 반환한다. 값을 JSON.stringify로 안전하게 코드에 삽입하면 Rollup이 조건을 상수로 판단해 사용하지 않는 분기를 트리셰이킹할 수 있다. replaceAll은 원리를 보여 주기 위한 단순 구현일 뿐 주석이나 문자열까지 잘못 바꿀 수 있으므로 실제 도구는 파서와 AST로 정확한 구문만 변환해야 한다.

두 번째 플러그인은 빌드 시 원격 API를 호출하고 resolveId와 load 훅으로 결과를 JavaScript 가상 모듈처럼 제공한다. 플러그인 팩토리에 데이터 선택 함수와 빌드 시각을 추가하면 사용자 이름, Markdown, 라우트나 자체 DSL처럼 프로젝트에 필요한 코드를 자동 생성할 수 있다. 모든 개발자가 플러그인을 배포할 필요는 없지만 빌드 시점과 실행 시점의 차이를 직접 다루면 사용하는 도구의 한계와 확장 지점을 더 정확히 이해하게 된다.