dependencies

최근에 회사 공통 모듈작업을 하면서 dependencies 관련해서 계속 예상치 못한 이슈가 생겨서 코드 고치고, 빌드 파일 확인하고, 코드 고치고, 빌드 파일 확인하고를 여러번 반복하면서 이제야 완전히 이해한것 같다. 그래서 까먹기 전에 메모..!

dependencies

dependencies는 프로젝트 실행에 필수적인 패키지들을 포함

프로덕션 환경에서도 필요하며, 번들링 시 함께 포함된다. 예를 들어, React나 Vue.js와 같은 프레임워크, 상태 관리 라이브러리인 Redux, 그리고 HTTP 클라이언트인 Axios 등이 여기에 해당할 수 있다.

devDependencies

devDependencies는 개발 과정이나 테스트에서만 필요한 패키지들을 포함

이들은 프로덕션 빌드에는 포함되지 않아 최종 번들 크기를 줄이는 데 도움이 된다.

 

회사에서 국제화(i18n) 적용을 위해 만든 자동화 스크립트 패키지를 만들었는데, 개발할때 스크립트를 돌려 AST를 읽어 새로운 파일로 만들어주는 스크립트라 프로덕션 빌드에 포함될 이유가 없다. 따라서 이 패키지를 사용한다면 devDependencies에 추가할 수 있다.

 

이외에도 Webpack, Babel, ESLint, Jest와 같은 개발 도구들이 devDependencies에 포함될 수 있다.

peerDependencies

peerDependencies는 패키지를 필요로 하지만 직접 포함하지 않고 상위 프로젝트에서 해당 의존성을 설치하도록 요구

회사에서 사용하는 i18n관련 유틸 패키지를 사용할때 i18next, next-i18next 등을 peerDependencies로 지정하면, 이 패키지를 사용하는 프로젝트의 i18next, next-i18next 버전을 사용하게 된다. 만약 해당 패키지를 peerDependencies에 명시하지 않는다면 번들링 파일에 함께 빌드될 것이다. 그리고 상위 프로젝트에서도 i18next, next-i18next를 쓴다면 i18next, next-i18next가 중복으로 빌드되어 빌드 파일 용량이 커지게 된다. 따라서 공용 패키지를 만들때는 peerDependencies를 항상 신경써야한다.

 

빌드 파일을 살펴보면 i18next, next-i18next이 빌드 파일에 포함되지 않고 require(모듈명)으로 모듈을 임포트해서 사용하고 있는것을 알 수 있다.

Vite rollupOptions.external

external은 번들러가 특정 모듈을 번들링 과정에서 제외하도록 지정하는 옵션이다.

(string | RegExp)[] | RegExp | string | (id: string, parentId: string, isResolved: boolean) => boolean

ID 배열이나 정규식에 일치하는지 확인하는 함수 또는 boolean을 반환하는 함수를 넘길 수 있다. peerDependencies에 있는 의존성들을 external에 명시해 함께 번들링 결과물에 포함시키지 않도록 해야한다.