사내 billing 서비스를 Vue 2 -> 3로 Migration 하는 과정에서 다음과 같은 lint error를 마주쳤다.
[plugin:vite:resolve] Module "querystring" has been externalized for browser compatibility, imported by "/Users/mactest-230102/Desktop/spooncast-billing-ui/node_modules/.pnpm/parse-link-header@1.0.1/node_modules/parse-link-header/index.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
node_modules 에서 특정 모듈의 브라우저 호환성이 맞지 않는다는 내용이었다.
그래서 폴리필을 설치했다.
왜 폴리필을 깔았는가?
Vite은 기본적으로 Node.js module을 사용하되 native ESM으로 번들링하여 브라우저가 어느정도 이해할 수 있는 모듈을 제공한다.
이를 통해 브라우저가 번들링 과정을 돕도록 한다.
애초에 브라우저에서 지원되는 ES modules로 소스코드를 제공하기 때문에 브라우저가 '이거 내가 이해하기 쉽게 바꿔줘'라고 요청하면 그 때 코드를 변환해서 제공하면 된다. 이를 통해 빠른 속도와 효율을 제공할 수 있다.
이 때 일부 브라우저에서는 http, queryString, fs 등 Node.js의 Core Modules를 지원하지 않기 때문에 polyfill을 통해 ES module 번들링이 가능하도록 채워주어야 했다.
- polyfill의 개념만 알고 있었는데 직접 설치해서 warning을 하나 지워본 경험이 되었다.
- Vite의 동작 원리를 다시금 이해하게 되었다.
