package.json 각 fileds와 dependencies devDependencies 차이점

 

package.json은 항상 작업할 때 따라다니는 녀석인데

npm 패키지 저장소로 내가 어떤 모듈 설치했는지,

구동은 어떤 키워드로 하는지 등 dependencies와 devDependencies로 적혀있는 파일 정도로만 알고 있었다.

이 외에도 다양한 필드들이 있어서 이번 기회에 정리를 해보고자 한다.

---

package.json 기본 구성 요소

$npm init -y

{
  "name": "mydirectory",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

 

위 코드가 기본 셋팅이라고 보면된다.

 

특징

"name" , "version" 은 필수적으로 있어야 하는 fileds이다.

없다면 설치되지 않는다.

 

"name" 

- 소문자로 작성되어야 한다.

- 한 단어로 작성 되어야 한다.

- _, - 를 포함 할 수 있다.

 

"version"

- x.x.x 형태로 작성되어야 한다.

 

"description"

- 문자열로 기술한 패키지에 대한 설명을 작성 할 수 있다. 

 

"main"

- root의 상대경로로 지정해야 한다. 지정하지 않는다면 index.js가 기본값이다.

 

"scripts"

- 패키지에서 자주 사용되는 것들을 별칭을 통해 지정해 둘 수 있다.

예시코드는 아래와 같다.

"scripts": {
    "local": "vite --host 0.0.0.0 --port 3000",
    "build": "vite build",
    "preview": "vite preview",
    "format": "prettier . --write"
  }

 

"author"

- 배포한 사람을 위한 fileds이다. 여러 사람을 표시할 땐 "contributors" filed에서 작성해야 한다.

 

"license"

- 권한이나 제한 사항이 있는지 작성해야한다.

 

위 filed를 제외한 다른 것 들은 아래 링크에서 자세하게 찾아볼 수 있다.

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

package.json | npm Docs

 

---

의존성과 관련된 항목들(dependencies, devDependencies)

프로젝트가 어떤 외부 라이브러리에 의존하고 있는지 보여주는 필드이다.

package.json 내 작성 방법은 동일하다.

예시는 다음과 같다.

"dependencies": {
    "vue": "^x.x.x",
    "vue-router": "^x.x.x"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^x.x.x",
    "vite": "^x.x.x"
  }

 

사용하고자 하는 패키지들을 다운로드 받으면 dependencies 필드에 자동으로 install한 패키지명과 버전이 기록된다.

 

devDependencies 필드에 기록하려면 다음과 같은 명령어를 터미널에 적으면된다.

$npm install --save-dev <package>

 

devDependencies는 배포 시에는 필요 없고 개발할 때만 필요한 의존 패키지들을 의미한다.

eslint, prettier, storybook 들을 예로 들어볼 수 있다.

 

 

참고 : https://docs.npmjs.com/cli/v7/configuring-npm/package-json