What's in my package.json?

프로젝트들을 시작하면서 CRA나 Vue cli로 간편하게 프로젝트들을 생성해서

package.json의 dependencies, devdependencies를 제외하고 어떤 내용들이 포함되어있는지 제대로 본 적이 없었던 것 같다.

 

이번에 내가 최근까지 했던 saai-peer프로젝트의 package.json과

github에서 vue 레포 지토리중 star 수가 가장 많았던 vue.js의 package.json을 열어보고 안에 어떤 내용이 있는지 보려고 한다.

 

우선 내 프로젝트의 package.json을 먼저 보면 아래와 같은 내용들이 들어있다.

package.json에 lint, prettier를 제외하고 전혀 세팅을 안 해봐서 별로 내용이 없긴 하다...

• name : 프로젝트 이름
• version: 프로젝트 버전
• scripts: 프로젝트 명령어, 항목 별로 키는 이벤트이고, 값은 이벤트를 발생했을 때 동작할 커멘드이다.
• description: 프로젝트 설명
• author: 프로젝트 작성자
• dependencies: production 환경에서 응용프로그램에 필요한 의존성을 담고 있는 부분
• devdependencies: 개발 단계에서 필요한 의존성 모듈을 담고 있는 부분. 테스트 / lint&prettier와 같은 의존성들이 들어있다.
  devdependencies에 설치하기 위해서는 `npm install [ 라이브러리명 ] --save -dev`로 설치한다.

다음은 vue.js의 package.json을 보았다.

exports: 외부에서 요청하여 사용할 모듈을 선언하는 부분, exports에 작성하면 exports에 포함된 모듈만 사용 가능하다.

exports 필드는 객체를 가지며 각 프로퍼티에 모듈 요청의 하위 경로가 포함된다고 한다.

 

sideEffects: Tree Shaking에 사용, sideEffects를 false로 해서 사용하지 않는 exports는 제거해도 된다는 것을 webpack에 알린다.

 

githooks: git 특정 시점에서 특정 작업을 trigger할 수 있다. 보통 lint 검사 / test 코드 실행을 githooks로 자동화한다. githooks를 만들어두면 적절한 시점마다 반복되는 작업을 자동화할 수 있다.

 

lint-staged: 대상 파일을 지정하고 조건에 맞는 파일이 커밋되었을 때 세팅한 명령어를 적용시킨다.

 

• repository: 소스코드가 관리되는 저장소의 위치
• keywords: 문자열 배열을 값으로 가지며, 현재 패키지를 찾을 수 있도록 도와준다.
  `npm search [ 검색어 ]`를 통해 콘솔 / 터미널에서 패키지 검색이 가능하다.
• bugs: 프로젝트의 이슈 / 버그 트래킹을 볼 수 있는 url 또는 이슈 버그를 알릴 수 있는 이메일을 넣어둘 수 있다.

### Reference

Package exports | 웹팩

package.json | npm Docs