JS Module

모듈

import, export

 

export 

모듈 내보내기

 

Named Export

모듈 밖으로 내보내려는 항목 앞에 export 를 붙인다.

각 항목(function, const 등)은 export 할 때 이름으로 참조되었으며, import 할 때에 이 이름을 참조하여 사용한다.

 

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return {
    length: length,
    x: x,
    y: y,
    color: color
  };
}

여러 항목 내보내기

export { name, draw, reportArea, reportPerimeter };

 

Default expault

모듈이 제공하는 기본 기능을 쉽게 만들 수 있도록 설계되었다. (중괄호 없음) 

함수 앞에 export default 를 추가하고, 익명함수로 선언할 수 있다.

하나의 모듈은 하나의 default export만 허용한다. 

 

square.js

export default randomSquare;

 

default 모듈 가져오기

import randomSquare from './modules/square.js';

 

import

모듈 가져오기

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

import { newFunctionName, anotherNewFunctionName } from './modules/module.js';

 

다른 이름으로 내보내고 가져오기

// inside module.js
export {
  function1 as newFunctionName,
  function2 as anotherNewFunctionName
};

// inside main.js
import { newFunctionName, anotherNewFunctionName } from './modules/module.js';

가져와서 다른 이름으로 사용하기

// inside module.js
export { function1, function2 };

// inside main.js
import { function1 as newFunctionName,
         function2 as anotherNewFunctionName } from './modules/module.js';

 

ie는 지원하지 않는다.

 

developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules#Importing_features_into_your_script

JavaScript modules