[npm] package.json 주요 옵션 설명

처음보면 난감한. 그러나 하나하나 보면 매우 간단하다.

javascript를 package manager를 이용해서 개발을 하다보면, package.json 이 생성된다.

next.js 나 react.js 프로젝트를 구동시키기 위해서 CNA, CRA를 진행하면, package.json 이 설치되어 있는 것을 볼 수 있다.

여기서 사용되는 주요 옵션들을 알아보자.

package.json 주요 옵션

1. name: 프로젝트의 이름을 정의합니다. 이 이름은 npm 레지스트리에 패키지를 게시할 때 사용되며 프로젝트를 식별하는 데 중요합니다.
2. version: 프로젝트의 버전을 정의합니다. Semantic Versioning (Semver) 규칙을 따르는 것이 일반적입니다.
3. description: 프로젝트에 대한 간단한 설명을 포함합니다.
4. main: 프로젝트의 진입점 파일 (entry point)을 지정합니다. 일반적으로 Node.js 애플리케이션에서 사용됩니다. default 설정은 root에 있는 index.js 파일이 사용됩니다. webpack 같은 번들링 도구를 사용할 경우, build/index.js 와 같은 형태로 경로가 변경됩니다. 현재 ERP개발팀의 Frontend 파트에서는 turbo를 이용해서 번들링 하고 있다.
5. scripts: 자주 사용하는 스크립트 명령어를 설정합니다. 예를 들어, 프로젝트를 실행하거나 테스트할 때 사용하는 명령어를 정의할 수 있습니다.
6. keywords: 프로젝트와 관련된 키워드 목록을 포함합니다. 이것은 npm 레지스트리에서 프로젝트를 검색할 때 사용됩니다.
7. author: 프로젝트의 저자 또는 개발자의 이름을 나타냅니다.

{
  "author": {
    "name": "Yoonjong Park",
    "email": "yj.park@hanssem.com",
    "url": "https://hanssem.com"
  }
}

1. license: 프로젝트의 라이선스를 지정합니다. 일반적인 라이선스는 MIT, Apache 2.0, GPL 등이 있습니다.
2. dependencies: 프로젝트의 런타임 의존성 패키지 목록을 포함합니다. npm install 명령으로 이 패키지들을 설치할 수 있습니다.
3. devDependencies: 프로젝트의 개발 시 의존성 패키지 목록을 포함합니다. 이 패키지들은 주로 프로젝트 개발 및 빌드 시에 사용됩니다.
4. peerDependencies: 프로젝트와 함께 사용할 때 필요한 피어 의존성 패키지 목록을 정의합니다. 예를들어, 아래와 같이 작성하면, 최소한 react의 버전이 16.8이상이여야 한다고 표기한 것입니다.

{
  "peerDependencies": {
    "react": ">=16.8",
    "react-dom": ">=16.8"
  }
}

1. repository: 프로젝트 소스 코드의 저장소 URL을 지정합니다.
2. browserslist: 프로젝트가 지원하는 브라우저 목록을 정의합니다. 주로 CSS, JS, 및 도구 컴파일러 설정에 사용됩니다.
3. private: 이 필드가 true로 설정된 경우, 프로젝트를 npm 레지스트리에 배포하지 않도록 합니다. (필수). - 설정하지 않으면, 실수로 npm package 저장소로 publish 될 수 있음.
4. engines: 프로젝트가 필요로 하는 Node.js 버전을 명시합니다.
5. config: 사용자 정의 설정을 저장하는 데 사용됩니다. 이 설정은 npm 패키지 스크립트에서 사용할 수 있습니다.
6. types : 프로젝트에서 정의하고 있는 타입(type) 정보를 담고 있는 파일의 위치를 지정

{
  "types": "dist/index.d.ts"    // 작성 예시
}

1. 비표준 필드
   1. prettier - prettier 포멧터 설정
   2. eslintConfig - ESlinter
   3. browserslist - transfiling 지원 브라우저 대상 설정

{
  "prettier": {
    "singleQuote": true
  },
  "eslintConfig": {
    "extends": ["react-app", "react-app/jest"]
  },
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

참고:

• https://www.daleseo.com/js-package-json/
• chatGPT