Javascript Module

https://blog.naver.com/pjt3591oo/222834625061

초기 자바스크립트는

어플리케이션의 규모가 커지며 변수와 함수들을 따로 보관할 필요성이 생겨 모듈 개념이 필요했지만, 자바스크립트는 그런 기능이 없었다. 이러한 상황에서 CommonJS, AMD가 등장했으며, CommonJS는 사실상 js의 표준 모듈 시스템으로 불리며, ECMAScript의 표준 스펙이 아니지만 이들은 자바스크립트 모듈화 작업의 선두주자이다. 공식적으로 ES6 이후에 문법 수준에서 모듈을 지원한다. 이는 ESM(ES Modules)라 불리며, 표준화된 모듈화 시스템이다 그러나 모든 브라우저에서 ES6 모듈을 지원하지 않기 때문에 모듈 번들러들을 사용하여 문법을 target ES 버전에 맞게 변환할 수 있다.

ESM의 동작 과정

우선 ESM은 구성, 인스턴스화, 평가라는 3단계를 거쳐 파일 의존 관계를 생성한다.

구성(construction)

entry file에서 시작해 import문을 찾아가며 해당 모듈 파일들을 모듈 레코드로 구문 분석을 진행한다.

인스턴스화(instantiation)

export된 값들을 메모리 공간에 배치하기 위해 메모리 공간을 찾고 가리키도록 한다.

평가(evaludation)

코드를 실행해 인스턴스화 단계에 가리킨 메모리에 변수값을 실제로 채워넣는다. JS 엔진은 함수 외부 코드인 최상위 레벨 코드를 실행해 이를 수행한다. 이때 모듈은 한번만 평가하도록 되어 있다. 평가 도중 모듈이 서버에 어떤 요청을 한다거나 할 경우 부작용이 생길 수 있기 때문이다.