JavaScript ES Modules(ESM ES6)

JavaScript ES Modules

모듈이란 여러 기능(함수/변수 등)이 모여있는 하나의 파일이다.

1. 모듈화를 통해 유지 보수와 재사용성을 높일 수 있다.
2. ES 모듈은 기본적으로 strict 모드가 적용되며 번들링 시 파일 용량이 커지지 않는다.
3. CJS(CommonJS) 모듈은 직접 strict 모드를 걸어주어야 하고 번들링 시 파일이 커지는 단점이 있다.

 

번들링

자바스크립트를 공부하다 보면서 번들링이라는 단어를 자주 접하게 되었다.

번들이란 단어의 의미는 묶음이다.

번들링의 프로그래밍적 해석은 각 모듈들의 의존성 관계를 파악해 그룹화 시키는 작업이다.

 

 

모듈과 스크립트 구분

- import / export가 있으면 모듈 없으면 스크립트

// 스크립트
<src src="main.js"></src>

// 모듈
exprt ""
import "" from ""

 

ES Modules(ES6)

- import와 export 키워드를 통해 모듈을 가져오거나 내보낸다.

 

import & export

- export "함수/변수명" 내보내고 import {"함수/변수명"} from "파일명" 받는다.

- from "파일명"의 확장자(js or ts)는 필수다.

- 클래스와 함수를 export 할 경우 세미콜론을 붙이지 않는다.

 

 

- import * as 키워드로 불러올 파일을 객체로 만들어 해당 데이터에 접근할 수 있다.

 

 

- export를 생략하고 마지막에 객체로 한 번에 export 할 수 있다.

 

 

export default

- 해당 모듈에 개체가 하나만 있다는 걸 명확히 나타낼 수 있다.

- export default를 가져올 경우 중괄호("{}")는 생략한다.

- 파일 하나에 export default 하나는 컨벤션이다.

 

 

- export와 export default를 동시에 사용할 수 있지만 그러지 않는다.(컨벤션)

- 모듈 하나에 export나 export default 둘 중 하나만 사용한다.

 

 

- 클래스 내보내기

 

 

- 함수 내보내기

- export default 시 특정 이름을 지정하지 않고 넘길 수 있다. 받는 쪽 이름은 임의로 지정한다.

 

 

- 가져올 게 많을 경우 as * "객체" 형태로 특정 코드를 가져올 수 있다.

 

 

tips

- package.json 타입을 ES 모듈로 지정한다.

- 모듈 객체 안에서 createRequire를 불러와 import.meta.url을 넣어준다.

- 한 파일 안에 ES 모듈과 CommonJS 모듈을 동시에 사용할 수 있다.

 

package.json