[요점 정리] 난생처음 만드는 Vite 플러그인 - 이은재

브라우저는 .jsx, .vue 이런 확장자를 모른다. 누가 js로 변환해줄까?

> vite

 

rollup 이란?

> webpack은 웹을 만들기 위한 번들러라면, rollup은 라이브러리를 만들기 위한 번들러

> vite를 만들 때 rollup plugin을 그대로 사용할 수 있게 만듬

 

vite plugin 구성

 - resolveId(source, importer, options)

 - load(id)

 - transform(code, id)

 

resolveId

source 보고, 우리가 다룰 수 있는건지 확인 (처리할 수 있니?)

다룰 수 있으면 응답을 내려주고 그렇지 않으면 null 반환

응답을 내려주면 vite가 load fn을 실행

 

load

id를 보고 파일의 정보를 메모리에 올려 반환해준다.

 

transfrom

메모리에 올라간 파일 정보를 변환

 

custom plugin으로 할 수 있는 것

예제 1

빌드 시 어떤 특정 값을 주입해서 if else statement를 지우는 일

자세한건 아래 강의를 (15:26 쯤)

 

예제 2

runtime에서 시간이 오래 걸리지만 데이터가 자주 변하지 않는 함수 (fetch해서 내려온 값)를 미리 빌드 때 계산해서 넣어줄 때

Virtual Module를 사용하여 해결 가능

자세한건 아래 강의를 (20:53 쯤)

 

Virtual Module

package.json에 없는 존재하지 않는 libaray인데, import 하고 사용할 수 있는 library.

**주의 할점. 비지니스 로직이 포함되어도 되는가? 사이즈가 너무 커서 번들 크기를 너무 많이 차지 하지 않나?

자세한건 아래 강의를 (22:05 쯤)

 

예제

 - 무거운 계산,

 - git 관련 정보 얻어서 dev 환경에 배포 시 어느 브렌치에서 배포되었는지 확인

 - 로컬 파일 접근 

    - *.md 파일 접근하여 md파일 렌더링

    - next.js file-base routing

 

 

 

 

난생처음 만드는 Vite 플러그인 - 이은재

학습 페이지