js 모듈 만들기

• common.js 파일을 생성한다.
• 생성한 js에 다른 js파일에서 import하여 사용 할 함수나 Object를 만든다.
• 외부로 내보낼 함수나 Object에 export를 사용한다.

export let UserInfo = {
  name: 'abc',
  age: 18,
};

export let sum = (a, b) => a + b;

모듈 사용하기

• common.js를 사용할 js 파일에 import 후 export 한 Object나 이름을 {} 안에 선언 후 코드 상에서 UserInfo, sum 함수를 사용할 수 있다.

import {UserInfo,sum} from './module/common';

let value=sum(1, 2);
let user=UserInfo; 

• import 할때 as를 사용하여 이름을 변경 할 수도 있다.
• 전체 Object나 함수를 common으로 변경하여 사용한다.

import * as common from './module/common';

let value=common.sum(1, 2);
let user=common.UserInfo; 

모듈 하나만 내보내기(export default)

• export default 선언으로 한파일에 하나의 class,object,함수를 선언하여 사용한다.

• export default 선언한 모듈은 import 시 {} 사용하지 않고 아래와 같이 원하는 이름을 마음대로 지정 할 수 있다 보통은 export default 선언한 이름으로 사용한다.

import Calculator from './module/calculator';
import test from './module/calculator';

• 모듈 소스

export default class Calculator {
  constructor() {
    this.name = 'calculator';
    this.version = 1.0;
  }

  sum(a, b) {
    return a + b;
  }

  minus(a, b) {
    return a - b;
  }
}

• 모듈 사용하기

import Calculator from './module/calculator';

let calculator = new Calculator();
console.log('calculator.name', calculator.name);
console.log('calculator.version', calculator.version);
console.log('calculator.sum()', calculator.sum(2, 3));
console.log('calculator.minus()', calculator.minus(2, 3));