[webpack] package.json package-lock.json 차이

package.json

package.json 역할

• 애플리케이션이 필요로하는 패키지 목록 나열
• 다른 개발자와 같은 빌드환경 구성. (의존성이 달라 발생하는 문제 예방)

package.json은 크게 2가지로 나눠집니다.

1. 프로젝트 정보
   1. name, version 등
2. 패키지 정보
   1. 어플리케이션 내부에 직접 포함되는 모듈 (dependencies)
   2. 개발 과정에 필요한 모듈(devDependencies)

어플리케이션 내부에 직접 포함되는 모듈 (dependencies)

• 애플리케이션 내부에 직접 포함되는 모듈 정보를 담습니다. 의존성을 규정하는 것은 패키지 이름과 해당 패키지의 범위를 지정한 객체를 통해 이뤄집니다.

"dependencies": {
    "@chakra-ui/react": "^1.7.4",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
}

뭐 이런식 입니다.

• dependencies에는 axios, Jquery등 애플리케이션 내부에서 직접 동작하는 모듈들이 포함됩니다.
• npm을 통해 설치하는 모듈이 dependencies에 기록돼야 할 때는 옵션으로 --save 를 사용합니다.

npm5 부터는 --save 가 default option이므로 생략해도 됩니다.

개발 과정에 필요한 모듈(devDependencies)

• 테스트 관련 모듈이나 트랜스 파일러 관련 모듈 등 개발 과정에 필요한 모듈등을 나타냅니다.
• npm을 통해 설치하는 모듈이 devDependencies에 기록돼야할 때는 옵션으로 --save-dev 를 사용합니다.
• —save-dev의 약어인 -D 옵션을 사용해도 무방합니다.

즉 쉽게말해 둘의 차이는 개발자가 필요한 것 (컴파일 or 빌드 에 필요한 것)은 devDependencies에 런타인에 계속 쓰이면 dependencies에 설치하면 넣으면 됩니다.

항목

• name : 패키지의 이름입니다. name과 version을 통해 고유성을 식별합니다. package를 npm에 공유할게 아니면 없어도 무방합니다.
• version : 패키지 공유에 있어서 name과 더불어 가장 중요한 필드입니다. name과 version을 통해 패키지의 고유성을 판별합니다. 만약 내용을 변경하려면 version을 변경해야합니다.
• private : true로 설정할 경우 공개되지 않습니다.
• description : 패키지에 대한 설명입니다.
• license : 패키지의 라이선스를 나타냅니다. 공개된 패키지를 이용할 때 참고해야합니다.
• scripts : npm run 명령어와 함께 사용할 수 있는 스크립트입니다.
• jest : jest 테스트를 위한 환경 구성 옵션입니다. NestJS는 기본으로 Jest를 이용한 테스트를 제공합니다.

---

• dependencies : 패키지가 의존하고 있는 다른 패키지를 기술합니다.
• devDependencies : dependencies와 같은 기능을 합니다. dependencies에는 프로덕션 환경에 필요한 주요 패키지만 선언하는 반면, 개발 환경 또는 테스트 환경에만 필요한 패키지는 devDependencies에 선언합니다. 실 사용 서비스에는 불필요한 패키지를 포함하지 않기 위함입니다.

package-lock.json

프로젝트의 root 디렉토리에서 npm install 을 수행하면 node_modules 디렉토리와 package-lock.json 파일이 생성됨.node_moudules - 프로젝트가 필요로하는 패키지들이 실제로 설치되는 공간

package-lock.json 은 node_modules나 package.json 파일이 바뀌면 npm install 명령 수행할 때 자동으로 수정됩니다.

package.json에 선언된 패키지들이 설치될 때의 정확한 버전과 서로간의 의존성을 표현해서 팀원들간에 정확한 개발환경 공유가 가능함. 그래서 node_modules를 공유해야하는 번거로움을 없애줍니다.

package.json 의 패키지 정보에는 version range가 사용됩니다. 따라서 특정 버전이 아니라 해당 패키지의 버전 범위(^, -)가 기재되어 있습니다.

 

이런 버전 정의(SemVer , 범위지정)에 대해서는 새 문서에서 정리 합니다.

 

아무튼 버전이 범위로 정의 돼 있기 때문에 같은 환경을 구축해도 때에 따라 다른 버전이 깔릴 가능성이 있습니다. 어떤 라이브러리의 새로운 버전이 릴리즈 되면서 두 팀원간의 환경이 달라질 수도 있고 npm의 버전이 달라서 다른 node_modules 트리를 생성하는 문제가 간혹 발생하기 때문에 package-lock.json을 사용합니다.

따라서

// package.json
"dependencies": {
    "@mdx-js/react": "^1.6.22",
            ...
}

// package-lock.json
"node_modules/@mdx-js/react": {
  "version": "1.6.22",
  "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz",
  "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==",
  "funding": {
    "type": "opencollective",
    "url": "https://opencollective.com/unified"
  },
  "peerDependencies": {
    "react": "^16.13.1 || ^17.0.0"
  }
},

이처럼 범위가 아닌 해당 버전을 정확하게 기재한 package-lock.json을 커밋해서 관리합니다.

소스코드 내에 package-lock.json 이 이미 존재한다면 npm install 명령을 수행할 때 이 파일을 기준으로 패키지 설치가 됩니다.

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