책상/JavaScript

[JS] module.exports와 export default의 차이점

dev_neo 2019. 5. 29. 00:00

 

import, export는 es6에서 공식적으로 채택된 모듈화 방식이다.

default는 기본값으로 내보낼 함수, 객체 등이며, 받아올 때(import) 사용자가 원하는 대로 이름을 지정할 수 있다.

// export.js
const a = 1;
const b = 2;

export { a };
export const c = 3;
export default b;

----------------------

// import.js
import d, { a, c as e } from 'export';
console.log(d, a, e); // 2, 1, 3

 

 

Node.js와 이전의 브라우저에서는 commonJS 기반의 require 키워드를 이용해 모듈화를 시킨다.

module 객체에 담아서 내보낸다고 생각하면 이해가 편하다.

 

// export.js
const a = 'a';
const b = 'b';

module.exports = { a, b }

----------------------

// import.js
const alphabet = require('export');

console.log(alphabet); // { a: 'a', b: 'b' }

 

 

* 참고

 

(ECMAScript) ES2015(ES6) 모듈 시스템 - import, export, default

 안녕하세요. 이번 시간에는 모듈 시스템에 대해 알아보겠습니다. ES2015에서 바뀐 것들 중에서 가장 획기적이라고 생각하는 변화입니다. 자바스크립트는 예전부터 리소스 관리가 어려워서 말이 많았습니다. 리소스는 웹 페이지를 구성하는 자원들입니다. 현재 웹에서는

www.zerocho.com

https://d2.naver.com/helloworld/12864