JavaScript ESM CJS

JavaScript의 모듈 시스템을 정의하는 두 가지 주요 사양인 ECMAScript와 CommonJS에 대해 설명합니다.

ESM - ECMAScript Modules

export

• export default 문으로 기본 내보내기 설정
• export 문으로 명명 내보내기 설정

import

• 기본 가져오기:

  import myDefaultFunction from './myModule.js'
• 명명 가져오기:

  import { myVariable, myFunction } from './myModule.js'

특징

• 빌드 타임에 분석하고 런타임에 비동기 로드
• 동작을 차단하지 않음
• 정적 분석: 빌드 도구가 종속성을 분석하고 최적화하는 데 유리
• 트리쉐이킹 지원: 번들러가 모듈에서 사용하지 않는 내보내기를 제거
• 브라우저 및 Node.js 환경에서 모두 사용 가능

예시

// myModule.js
export const myVariable = 42
 
export function myFunction() {
  console.log('Hello World')
}
 
export default function () {
  console.log('Hello Default Export')
}
 
// my.js
import myDefaultFunction, { myVariable, myFunction } from './myModule.js'

CJS - CommonJS

export

• module.exports 문으로 기본 내보내기 설정
• exports 문으로 명명 내보내기 설정

require

• 기본 가져오기:

  const myModule = require('./myModule.js')
• 명명 가져오기:

  const myVariable = myModule.myVariable

특징

• 런타임에 모듈을 동기 로드
• 모듈이 모두 로드될 때까지 다른 동작 차단
• 트리쉐이킹을 지원하지 않음
• Node.js 용도로 설계됨

예시

// myModule.js
module.exports = {
  myVariable: 42,
  myFunction: function () {
    console.log('Hello World')
  },
}
 
exports.myVariable = 42
 
exports.myFunction = function () {
  console.log('Hello World')
}
 
// my.js
const myModule = require('./myModule.js')
const myVariable = myModule.myVariable
const myFunction = myModule.myFunction