Javascript ESM (ECMA Script Module)

 

ECMA, Ecma International

ECMAScript, ECMA-262 (javascript)

 

ECMA-262의 제6판에 해당하는 ES2015(ES6)부터 지원하고 있는 모듈 시스템.

이전까지는 브라우저 환경에서 사용할 수 있는 표준 모듈 시스템이 없었기에, <script src="script.js">의 형태로 파일을 직접 불러오는 방법을 사용했다, 파일이 많아지면서 중복된 변수 문제나 성능에 문제가 발생.

ES2015의 주요 특징 export, import 문법 사용
( 대조적으로 'Javascript CommonJS'의 경우 module.exports, require 문법 사용)

 

<script type="module" src="script.js"> 태그에 type="module"을 선언하면 Javascript파일은 모듈로 동작한다. 명확하게 표현하기 위해서 확장자는 mjs로 붙여주는 것을 권장한다. type="module"을 사용하면 해당 파일에서는 import와 export를 사용할 수 있다, 파일마다 독립적인 스코프를 갖게 되고, 각각의 mjs 파일에 있는 window 객체는 서로 공유되지 않는다.
( 브라우저에 따라서는 아직 import와 export를 지원하지 않는 경우도 있므로, webpack과 같은 번들러를 사용하는 것이 좋다 )

 

export 기본 사용법

export var name1;
export const name2;
export let name3;
var name4;
var name5;
export { name4, name5 as Name5 }

 

default 문
모듈에서 하나만 존재할 수 있고(대상으로 변수를 지정할 수 없다)

export var name1;
export const name2;
export default let name3;

var name4;
var name5;
export { name4 as default, name5 as Name5 }

 

export { getName1, getName2 } from './mydata1';
export * from './mydata2';
export { default as MyDataThree } from './mydata3';

 

import

import "mydata";
import Mydata from "mydata1";
import * as MydataTwo from "mydata2";
import { member1 , member2 as alias2 , [...] } from "mydata3";
import MydataDefault, { member [ , [...] ] } from "mydata4";

 

ES Modules작동 방식

사용하려면 config를 type="module"로 지정 필요.
모듈을 비동기 환경에서 다운로드하며, import export 구문을 찾아서 파싱한다. module이 실행 전에도 import, export 관계로 에러를 감지할 수 있다. 최근 버전에는 top-level await가 가능하다.

Module을 비동기로 가져오는 것과 별개로, module위치 결정은 runtime이 아닌 compile시간에만 할 수 있다(파일 시작부분에서 import를 사용하는 규칙).

loader는 module을 탐색하고 다운로드 하는 역할을 한다, loader 플랫폼에 따라 동기적으로 파일을 로드할 수 있다.
loader는 script 태그의 src를 통해 개발자가 지정한 파일을 entry point로 하여 나머지 파일들은 import문을 따라가며 찾고(resolution) 다운로드한다. 이 때 변수에는 아직 값이 없다. 파일을 브라우저에서 사용하려면 모듈 레코드 라는 과정이 필요하고 이후 모듈 레코드를 모듈 인스턴스로 변환해야한다. 모듈 인스턴스는 코드와 현재 상태를 결합하는 역할을 한다. 모듈을 불러오는 과정은 크게 구성, 인스턴스 화, 평가로 이루어진다.
이렇게 ES modules는 비동기방식으로 단계가 진행되지만 ES 모듈 명세외에 loader가 파일을 불러오는 방식에 따라서도 영향을 받기 때문에, 사용 중인 플랫폼에 따라 loader가 동기적으로 파일을 로드할 수 있다.

모듈 분석 전에 해당 파일이 모듈임을 알려주기 위해 스크립트 태그 내부에 type="module"을 표시해주어야 한다. node 환경에서는 .mjs 확장자로 모듈임을 알려준다.

ESM인 '.mjs'파일에서 CJS용인 require()를 사용할 수 없고, '.js'에서 require()로 '.mjs'파일을 가져올 수 없다. ES Module을 동적으로 가져오는 await import()함수를 사용할 수 있다.

import 표현식 을 사용하면 dynamic import가 가능하다. https://ko.javascript.info/modules-dynamic-imports

ES modules는 비동기로 동작하여 속도가 빠르고 실제 사용되는 부분만을 import(tree shaking) 하여 메모리를 적게 차지하며, 가독성이 좋고 순환 의존성을 지원한다는 이점이 있다.