[ES6] 7. Module system

Chater 7. Module System

Module이란

ES6의 모듈은 Javascript 코드를 담고 있는 파일을 말한다. global scope에서의 변수명 충돌을 방지하기 위해 모듈화 방식을 사용한다.ES6 모듈은 모듈안에서 자동적으로 strict 모드로 처리되며 모듈안에서는 import, export 키워드로 모듈을 노출시키거나 불러올 수 있다.

모든 import와 export 구문은 모듈의 작성된 코드의 top level에만 올 수 있다. 조건적으로 import하거나 export할 수 없으며 import 구문을 함수 스코프에서 사용할 수도 없다. export 구문은 명시적인 이름으로 export 되어야 한다. 배열을 순회한다던가의 방법은 사용할 수 없다. 단 중괄호 안에 한꺼번에 여러 개의 모듈을 선언하는 것은 가능하다.

모듈은 객체와 다르기 때문에 확장할 수 없고, 모듈의 모든 의존관계들은 초기에 로드되고 파싱되고 링크되어야 한다. 즉, 모듈을 로딩하는데 있어서 lazy loading 할 수 없다는 것이다. 

Creating Modules

flash-message.js code>

export default function(message){
     alert(message);
}

export 키워드는 global으로 모듈을 노출하는 역할을 한다.

default 키워드는 export하는 type을 의미한다. default로 지정했을 때 가장 simple한 방법이다.

app.js>

import flashMessage from ‘./flash-message’;
// 주소값만 잘 맞으면 flashMessage란 이름은 상관없다. export할 떄 default로 export했기 때문이다.
flashMessage(“Hello”); // alert execute!

import할 자바스크립트 파일은 같은 폴더에 위치하고 있어야 한다.

이것을 webpack이 제공하는 기능 중 하나인 bundle과 혼동하여서는 안된다.

여전히 script 태그를 통해서 html 코드에 추가해줘야 한다.

ES6에서 제공하는 Module의 기능은, global namespace의 오염을 방지하기 위해 추가된 기능이다.

Named Exports

flash-message.js>

export function alertMessage(message){
     alert(message);
}
export function logMessage(message){
     console.log(message);
}

app.js>

import { alertMessage, logMessage } from ‘./flash-message’;
alertMessage(‘Hello’); // alert execute!
logMessage(‘world’); // world

특정 funtion을 export한 경우에, funtion의 이름을 통해서 import 할 수 있다.

Importing a Module as an object

app.js>

import * as flash from ‘./flash-message’;
flash.alertMessage(‘Hello’); // alert execute!
flash.logMessage(‘world’); // world

Removing Repeated Export Statements

flash-message.js>

function alertMessage(message){
     alert(message);
}
function logMessage(message){
     console.log(message);
}
export { alertMessage, logMessage }
 
const MAX_USERS = 3;
const MAX_REPLIES = 3;
export { MAX_USERS, MAX_REPLIES };

상수도 각각의 모듈에 반복적으로 삽입하지 말고 하나의 모듈을 만들어 노출시킨다.

import 시키는 방법은 일반 모듈을 import하는 방법과 같다.

Exporting Class Modules with Default Export

flash-message.js>

export default class FlashMessage {
     //...
}
//or
class FlashMessage {
     //...
}
export { FlashMessage }

import할 때 클래스명의 맨 앞글자는 대문자로 표기해야 한다.

app.js>

import FlashMessage from ‘./flash-message.js’;
let flash = new FlashMessage(‘hello’);
//or
import { FlashMessage } from ‘./flash-message.js’;

http://hacks.mozilla.or.kr/2016/05/es6-in-depth-modules/