TypeScript 프로젝트, ESM 모듈 도입 삽질기
by DD
4년 전
조회수 18
Pure ESM 모듈 도입으로 인해 기존 CommonJS 기반 프로젝트에서 import 에러 발생
TypeScript 환경에서 ESM 모듈 사용을 위해 tsconfig.json 설정 및 dynamic import 활용
ESM 전환 과정에서 __dirname 문제, REPL 미작동 등 여러 문제 발생, 최종적으로 tsimportlib 라이브러리 활용
ESM과 CommonJS의 충돌: 근본 원인 분석
ESM은 최상위 레벨 await 지원 등 CommonJS의 한계를 극복하기 위해 등장했다. 구체적으로 .mjs 확장자 사용, `package.json`의 `type: module` 설정, dynamic import를 통해 ESM 모듈을 사용할 수 있다. 따라서, 기존 CommonJS 환경에서는 Pure ESM 모듈과의 호환성 문제가 발생한다.
TypeScript 환경에서의 ESM 도입: 트레이드오프
TypeScript에서 ESM 모듈을 사용하려면 tsconfig.json의 `module` 설정을 변경해야 한다. 반면, require 구문과의 혼용은 어려움이 따른다. 구체적으로, __dirname 문제, REPL 미작동 등 여러 문제 발생 가능성이 있다. 따라서, dynamic import 또는 tsimportlib 라이브러리 활용을 고려해야 한다.
실전 적용 가이드: ESM 전환의 단계별 접근
ESM 전환은 점진적으로 진행하는 것이 안전하다. 구체적으로, dynamic import를 활용하여 ESM 모듈을 먼저 도입하고, 점차적으로 전체 프로젝트를 ESM으로 전환한다. 따라서, tsimportlib와 같은 라이브러리를 활용하여 CommonJS와 ESM 간의 호환성을 확보하는 것이 중요하다.
