ESM (ES Module) feat. Vite

• JS 파일은 브라우저에서 해석될 수 없다.
• 모듈은 모듈 스코프를, 변수/함수 스코프를 통해 서로의 파일이 오염되지 않도록 하는 장점이 있다.
  • import, export 를 활용한다.
• ES6부터 모듈 기능을 제공하기 시작했다.
  • 하지면 IE는 여전히 지원하지 않는다.
• entry 파일을 기준으로 import한 파일들을 찾아가며 의존성 그래프를 그린다.
• ES module이 동작하려면 브라우저에서 사용가능하도록 module record라는 데이터 구조로 변환해야한다.
  • 이 변환 과정은 ES6 명세가 아닌 HTML 명세를 따라 구문 분석을 한다. (브라우저 한정)
• 이런 모듈화 작업은 구성 → 인스턴스화 → 평가 단계로 진행된다.
  • 구성단계에서는 로더가 파일을 불러온다.
    • 파일을 모듈 레코드로 구문 분석한다.
    • 로더는 모듈 의존성을 파악하며 모듈 캐시 관리도 한다.
  • 인스턴스 단계에서는 JS 엔진이 모듈 환경 레코드를 생성 하고 메모리 공간을 차지한다.
    • import와 export 메모리 공간을 확보 (메모리에 값을 채워넣진 않음)
    • 한 모듈은 같은 메모리 주소를 가리키게 된다. → 라이브 바인딩
      • 이로써 export한 곳에서 일어난 변경점을 import에서 알수 있다. 그러나 import하는 곳에서 값을 변경할 수 없다.
    • CommonJS는 라이브 바인딩 아닌 객체 복사를 하기 때문에 export 파일의 변경점을 import하는 곳에서 알 수 없다.
  • 평가 단계에서 확보한 메모리 공간에 값을 채운다.
    • 평가는 1회만 한다.