[UnJS] [unbuild] javascript 빌드를 위한 시스템

unbuild는 Vue와 Nuxt 생태계에서 자주 사용되는 빌드 도구로, CommonJS(CJS)와 ESM(ES Module) 형식 모두로 출력을 생성할 수 있는 강력하고 유연한 빌드 시스템이다.

unbuild : https://github.com/unjs/unbuild

GitHub - unjs/unbuild: 📦 A unified JavaScript build system

 

사용 상황 예시

1.  라이브러리 개발: 모듈 개발시 여러 환경에서 동작하도록 배포하는 경우

2. ESM/CJS 호환성: 모듈을 다양한 런타임(Node.js, 브라우저)에서 사용할 수 있도록 하기 위해

3. 트리 쉐이킹(Tree-shaking): 코드 크기를 최소화하고 최적화하기 위해.

 

 

 

실행 방법

1. 설치:  프로젝트에 unbuild 설치

npm install -D unbuild

 

2. 구성: unbuild.config.ts 파일을 만들어 빌드 설정

import { defineBuildConfig } from 'unbuild';

export default defineBuildConfig({
  entries: ['./src/index'],
  outDir: 'dist',
  declaration: true, // TypeScript 타입 선언 파일 포함
  rollup: {
    emitCJS: true, // CommonJS 출력 활성화
  },
});

 

 

3. 빌드 실행

npx unbuild

 

이와 같은 과정을 거쳐 모듈을 최적화된 상태로 다양한 형식으로 사용할 수 있도록 구현할 수 있다.

 

---

정말 `emitCJS : true` 만으로 호환성 보장이 완벽하게될까?

 

ESM vs CJS

1. ESM (ES Modules)
   • 목적: 최신 JavaScript 환경(현대 브라우저 및 Node.js의 ESM 지원 환경)에서 동작하도록 모듈을 빌드.
   • 특징:
     • import/export 문법 사용.
     • 트리 쉐이킹(Tree-shaking)을 지원해 번들 크기 최소화.
     • 웹팩, Vite 같은 현대적 빌드 도구와 잘 호환됨.
   • 파일 확장자 예: .mjs
2. CJS (CommonJS)
   • 목적: 기존 Node.js 환경 및 오래된 빌드 시스템(예: Webpack 4)이 지원하도록 빌드.
   • 특징:
     • require/module.exports 문법 사용.
     • 기존 라이브러리나 환경과의 하위 호환성 제공.
   • 파일 확장자 예: .cjs