Pure ESM이란?

• CommonJS fallback을 가지지 않고, ESM으로만 취급되는 라이브러리를 지칭함
• ESM임을 명시적으로 나타내기 위해서 .mjs 확장자를 사용하는 경우도 있음(vs .cjs 파일)
• package.json에 아래와 같이 명시됨

{
	"name": "my-package",
	"type": "module",
	"main": "index.js",
	"exports": "./index.js"
}

• cf. ESM & CommonJS 동시지원

// ./node_modules/pkg/package.json
{
  "type": "module",
  "main": "./index.cjs",
  "exports": {
    "import": "./wrapper.mjs",
    "require": "./index.cjs"
  }
}

• CommonJS에서 ESM을 require() 하는 것은 허용되지 않음

https://nodejs.org/api/esm.html#require

• import()는 ESM과 CommonJS를 대상으로 모두 사용가능

  • CommonJS를 대상으로 하는 경우, module.exports를 default export로 판정함
  • Webpack에서는 CommonJS 등 Dynamic Module을 import 하는 경우에는 default import만 허용하고 있음 (= named import 불가)

  import swiper from 'swiper-commonjs'; // 가능
  import { swiperCore, Pagination } frmo 'swiper-commonjs' // 불가
  

Pure ESM의 장점 & ESM, CommnJS 동시지원의 단점

• Dual package hazard를 피할 수 있음
  • 하나의 프로젝트에서 동일한 패키지의 ESM 버전과 CommonJS이 동시에 로드되는 상황이 발생할 수 있음
  • ex.) 서비스 코드에서는 import 사용, 하위 패키지에서 require 사용
• 빌드 시스템에서 ESM, CommonJS 동시 지원으로 인한 복잡성 해결

Create React App과의 관계

• React는 아직 CommonJS로 만들어져 있으며 당분간 ESM 지원 예정이 없음
• Create React App은 webpack에서 .mjs 파일에 대해서 모듈 처리를 설정하지 않았기 때문에, webpack에서 javascript/esm으로 처리함
  • .mjs 파일에 대해서 javascript/auto로 처리해주어야 에러가 발생하지 않음

Pure ESM으로 전환한 패키지들

Migration Guide to Swiper 7