[자바스크립트] ES6(ES2015+) 방식 import와 export

import와 export는 모든 브라우저가 지원하는 것이 아니기 때문에 Babel의 "@babel/plugin-transform-modules-commonjs"를 통해 변화시켜서 사용한다. 다음은 모듈 A, B가 있고 각각을 export로 내보는 방식과 그에 따라 어떻게 import로 불러오는지 살펴보자.

• moduleA.js

const A = () => {};
export default A;

• moduleB.js

export const B = () => {};

• index.js

import A from 'moduleA';
import { B } from 'moduleB';

 

• 눈 여겨봐야될 것은 default 유뮤이다. export를 사용할 때는 named export와 default export를 사용할 수 있다.
• default export는 모듈 내에서 한번만 사용할 수 있고 named export는여러 번 사용할 수 있다.
• default export로 내보내면 import 에선 내보낸 이름 그대로 바로 사용할 수 있지만, named export로 내보내면 {}로 묶어서 불러와야 한다.

 

다양한 방법의 모듈 시스템

1. ES6 Modules(ESM) → import
2. CommonJS → require
3. AMD → define - require
4. Browser →

(이 외에도 System.js, Require.js 등의 모듈 로더가 있다.)