vite

browserslist와 vite 연동하기

$3

- browserslist를 구닥다리로 생성하기
- 트랜스파일(ex. ??=)과 폴리필(ex. Array.prototype.at)이 잘 생성되는지 확인하기

$3

- .browserslistrc를 만들자
- chrome >= 79로 설정

$3

- vite의 build.target(production build)은 최소한 es2015 이상이어야 한다.
- chrome 79는 가능
- 그럼 플러그인 안써도 되는거 아냐..?
- vite는 트랜스파일만 하고 폴리필은 추가 안함 (build.target만 수정하면 ??=은 처리되는데 at은..)
- browserslist 형식으로 쓰는건 되는데 .browserslistrc를 읽을 수 있다는 말은 없다.
- @vitejs/plugin-legacy를 쓰라는데.. (얘는 .browserslistrc도 읽나봄)
- 근데 라이브러리 모드를 지원안한다. (@vitejs/plugin-legacy does not support library mode.) (바벨..을 써라?)
- @rollup/plugin-babel을 써서 .browserslistrc와 연동해보자..

$3

- @babel/preset-env
- allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills)
- useBuiltIns: usage: build된 파일에서 core-js 폴리필을 직접 import 해준다. (core-js 설치 필수)
- core-js
- 폴리필 모음집
- @babel/preset-env에서 core-js를 쓸거면 버전을 써줘야 된다;
- 메이저만 쓰면 신기술을 포함 안될 수 있으니 마이너도 쓸 것;
- 생각해보니..생각없이 devDep에 깔았는데 사용처에서 import해서 쓰려면 dep로 깔야야 된다...(맞나?)
- @rollup/plugin-babel api
- getBabelOutputPlugin: rollup을 먼저 실행하고, babel을 output에 실행한다.
- babel()과 반대로 bundle된 파일에 사용해서 크고 복잡한 파일을 읽어야 돼서 느리다.
- 파일들이 정리된 상태로 폴리필이 추가되다보니 폴리필이 중복안된다. (내가 신경 안써도 돼서 설정도 쉬움)
- 근데 난 bundle을 안한다?
- 트랜스파일
- ??=을 왜 ?? 안쓰지 했는데 Nullish coalescing operator가 es2020인데 79 버전에서 호환 안됨 ㅎ 성능확실