[JS] Module

모듈(Module)을 생성하고 호출하는 방법은 실행환경마다 다르다.

 

1. Node.js

CommonJS 문법에서는 module객체를 이용하여 모듈을 생성하고 require함수를 이용하여 모듈을 호출한다.

// myModule.js (CommonJS)
let data1 = "java";
let data2 = "python";
module.exports = { data1, data2 };

// app.js (CommonJS)
let myModule = require("./myModule");
console.log(myModule);

ES6 문법에서 export, import 문장을 이용하여 모듈(ESM)을 생성할 수 있는데, 파일의 확장자를 'mjs'로 설정해야 한다.

// myModule.mjs (ES6)
let data1 = "python";
let data2 = function () { console.log("log python"); };
let data3 = "java";
let data4 = function () { console.log("log java"); };
let data5 = { data3, data4 };

let prop1 = { data1, data2 };

export default prop1; // default 한번만 사용이 가능하다.
export const prop2 = data5;
export function prop3() {
    console.log("prop3 is function.");
};

// export { data1, data5 } // 한번에 작성가능

// app.mjs (ES6)
import * as myModule from './myModule.mjs';
console.log(myModule);      // 모듈 전체를 가지고 온다.
console.log(myModule.default);

import defProp from './myModule.mjs';
console.log(defProp);       // 모듈의 default로 선언된 속성을 가지고 온다.

import { prop2, prop3 } from './myModule.mjs';
console.log(prop2);
console.log(prop3());

CommonJS 문법으로 작성된 모듈도 import 문장으로 호출이 가능하다. app.mjs의 실행명령은 아래와 같다.

node --experimental-modules app.mjs

esm(npm 모듈)을 사용하여 ES6 문법을 사용할 수도 있다. app.js의 실행명령은 아래와 같다.

npm install esm
node -r esm app.js

 

2. Browser

브라우저에서 모듈을 생성하고 호출하기 위해서는 HTML 파일의 script 태그의 type의 속성값으로 "module"을 지정하면 된다.

<script type="module" src="myModule.js"></script>
<script type="module" src="index.js"></script>

// myModule.js (ES6)
let data = "javascript";
export default data;

// index.js (ES6)
import data from './myModule.js';
console.log(data);