Vite에서 import.meta는 왜 사용하는 걸까? (feat. HMR)

• Vite는 소스코드와 디펜던시를 두 가지 카테고리로 나누어 빌드하고, ESM 환경인 브라우저에 빠르게 제공하는 것이 특징이다. 이를 통해 현재 페이지에서 필요한 정보만 아주 빠르게 실행시킬 수 있으며, 모든 파일을 번들링 하여 제공하는 것이 아니라 현재 필요한 모듈만 골라내어 빠르게 제공한다.

• Vite는 Node.js 환경에서 동작하는 대부분의 bundler와 달리, 소스코드를 ESM으로 제공하여 브라우저에서 동적 import를 통해 원하는 JavaScript 파일만 실행시킬 수 있다. 이를 위해 Vite는 Node.js에서만 가능했던 기능을 브라우저에서 동작하도록 해결하였다.

• dotenv 라이브러리는 Node.js 환경에서 .env 파일을 파싱하여 text 값을 통해 객체를 생성하고, process.env에 값을 추가해 Node.js 환경의 전역에 노출시킨다. 이를 통해 환경 변수를 사용할 수 있게 되며, 환경 변수 값이 변경되면 devServer를 재시작해야 변경된 값이 반영된다.

• Vite는 환경 변수가 정의된 파일에서 필요한 변수를 가져와 사용할 수 있으며, JavaScript 문법인 import.meta를 통해 환경 변수에 접근할 수 있다. import.meta는 ES Module이 탄생하면서 모듈에 대한 메타 데이터를 저장하기 위한 객체로, 모듈 자체에 대한 메타 데이터를 담고 있다.