package.json의 주요 구조

회사 프로젝트에 기입된 package.json의 주요 필드들만 정리하였다.

아래 사이트에 들어가면 자세히 알 수 있다.

https://docs.npmjs.com/cli/v9/configuring-npm/package-json

package.json | npm Docs

package.json의 주요 구조

npm에서 name과 version은 필수이다.이 필드들이 누락되면 패키지는 설치될 수 없다.

name

패키지 이름이다. 

 

기본 규칙

• must be lowercase, 소문자로 작성되어야 한다.
• must be one word, 한 단어로 작성되어야 한다.
• may contain hyphens and underscore, -(하이픈)이나 _(언더스코어)를 포함할 수 있다.

version 

패키지의 버전이다. sementic versioning guidelines를 따르며, [Major].[Minor].[Patch]의 형태를 따른다.

description

패키지에 대한 설명이다. npm에서 검색되었을 때 리스트에 표시되어 사람들이 패키지를 찾아내고 이해할 수 있는데 도움을 준다.

author

패키지 작성자이다. 배포자 한 사람을 위한 filed로, 다수의 사람을 표기하려면 "contributors" 필드로 작성해야 한다.

private

private:true 이면 아래 npm에 게시를 하지 않는다. 개인 저장소가 실수로 게시되는 것을 방지해준다.

scripts

테스트나 빌드 등 각 반복 작업을 수행할 때 실행해야하는 명령어를 미리 스크립트로 scripts에 설정해두고 콘솔에서 실행할 수 있다.

 

1. "start" 명령어는 npm start로 실행할 수 있다.

터미널에서 npm start를 실행하면 scripts의 "start"에 저장된 npm run dev가 실행된 것을 볼 수 있다.

 

2. "test" 명령어는 npm test로 실행할 수 있다.

 

3. 그 외 명령어는 npm run 명령어 로 실행해야 한다.

예를 들면, 명령어가 "dev" 이면 터미널에서 npm run dev 로 실행할 수 있다.

dependencies

dependencies와 devDependencies는 의존성 관련 항목으로, 프로젝트 개발이 목적이라면 이 두개가 중요하다. 

npm install 명령어를 사용하면 package.json에 있는 dependencies와 devDependencies의 패키지 의존성을 보고 패키지들을 설치한다.

 

패키지의 이름에 해당 패키지의 버전 범위를 매핑한 형태의 객체로 지정한다. 

 

dependencies는 해당 프로젝트가 어떤 패키지들을 가지고 있어야 제대로 구동될 수 있는지 명세되어 있다고 보면 된다.

 

패키지는 npm에서 검색하면 찾을 수 있다.

 

npm install 하면 node_modules에 dependenceis에 패키지가 설치된 것을 확인할 수 있다.

devDependencies

devDependencies는 개발에만 필요한 의존 패키지들을 의미한다.

테스트를 위한 패키지와 같이 배포 시에 필요없는 패키지들을 devDepndencies에 포함시킨다.

 

 

dependencies처럼 npm install 시, node_modules에 설치되어 있는 것을 확인할 수 있다.

engines

패키지가 실행되는 노드 버전을 명시해줄 수 있다. engines를 명시하지 않으면 어떠한 노드 버전도 되는 것으로 간주한다. 

npm의 버전도 명시해줄 수 있다.

browserslist

브라우저를 선택하는 옵션 기능만 따로 뽑아 놓은 도구라 생각하면 된다.

자세한 내용은 아래 블로그 글 참조

https://byul91oh.tistory.com/450

browserslist / browserslistrc 사용법

참고 자료

https://docs.npmjs.com/cli/v9/configuring-npm/package-json

package.json | npm Docs

https://hoya-kim.github.io/2021/09/14/package-json/

알고 쓰자 package.json

https://byul91oh.tistory.com/450

browserslist / browserslistrc 사용법