웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > webdevetc

package.json에서 특정 범위의 node 및 npm 버전 설정하기

Last Modified : 2024-01-22 / Created : 2023-08-17
2,757
View Count

웹어플리케이션을 개발할 때는 항상 지원하는 버전에 신경을 써야합니다. 특히 node 및 npm 버전 역시 마찬가지라고 할 수 있습니다. 지원하지 않는 버전에서 앱을 실행하거나 패키지가 설치될 경우 예기치 못한 에러가 발생할 수 있기 때문이죠!

아래는 이런 문제를 해결하기 위하여 package.json에서 node와 npm의 버전을 설정하는 방법에 대하여 알아봅니다.



package.json에서 node 및 npm 버전 설정하는 방법


버전 설정은 일반적으로 v1 부터 v2 등의 범위를 지정하여 사용됩니다. 버전 설정을 위해서는 "engines"를 추가하여 사용할 수 있습니다. 이 때 engines 내부에는 "node"와 "npm"을 각각 나누어서 다른 버전을 설정할 수 있습니다. 아래 예제는 node 버전을 v16 이상에서 v17 미만을 사용할 경우 설정하는 방법입니다. 추가로 npm 버전의 경우 v8 이상에서 v9 이하만 설정하도록 선언하였습니다.

@package.json
{
  "name": "my-project-name",
  "version: "1.0.0",
  "engines": {
    "node":  ">=16.0.0 <17.0.0",
    "npm": ">=8.0.0 <9.0.0"
  },
  dependencies: {
    ...
  }
}

여기까지 설정이 끝났습니다. 다시 설명하면 위에 설정된 package.json은 아래와 같이 각각 node와 nvm 버전을 설정을 의미하게 됩니다.

  • node 버전은 16보다 높거나 같고 17보다 낮다
  • npm 버전은 8보다 높거나 같고 9보다 낮다

이처럼 간단하게 package.json에서 버전을 설정하였습니다.


참고로 위와 같이 설정하였다고 실제 package.json의 script가 동작하지 않는 것은 아닙니다. 즉 만약 앱을 실행하기 위해서 npm start를 실행했다고 가정했을 때 범위에 벗어난 경우 이를 중단하도록 강제하지는 않는다는 뜻입니다. 그렇기 때문에 package.json에 설정된 버전을 확인할 수 있도록 알려주는 역할을 하게 됩니다. 만약 허용하는 범위의 버전이 아니라면? 이때는 nvm 등을 사용해 해당 범위 내의 버전을 설치하고 사용해야되겠죠!


! pnpm 버전 범위 설정하기


요즘은 다양한 패키지 매니저가 사용됩니다. 만약 pnpm을 사용하는 경우 동일하게 범위 설정을 하고 싶다면 동일하게 engines 블록에 선언하여 사용 가능합니다. 예를들어 아래와 같이 기존 코드 하단에 추가하여 사용 가능합니다.
{
  "engines": {
    "node": ">=16.0.0 <17.0.0",
    "npm": ">=8.0.0 <9.0.0"
    "pnpm": ">=6.14.0 <7.0.0"
  },
}

이제 새롭게 pnpm 범위가 설정된 것을 알 수 있습니다. 설정된 값을 통해 다음과 같은 pnpm 범위 정보를 얻을 수 있습니다. 

  • pnpm // 6.14.0보다 같거나 크고 7.0.0보다 작은 범위 사용

이처럼 간단하게 pnpm 범위를 추가할 수 있습니다.


[ 참고 ]
예전 npm v3.0.0 이 전 버전의 경우 engineStrict: true로 추가 설정하여 강제 할 수 있는 방법이 존재하였으나 이 후 버전에서는 해당 설정을 추가하여도 강제되지 않습니다. 이점 참고하시기 바랍니다.


여기까지 pacakge.json에서 node 및 npm 버전 설정 방법을 간략히 알아봤습니다. 마지막으로 위와 같이 패키지 및 노드 범위를 한정하는 이유는 여러 명이 서로 다른 버전을 사용할 경우 서로 나타날 수 있는 이슈 및 예외사항을 최대한 줄이기 위함입니다. 이처럼 버전을 명시하여 동일한 버전을 사용하도록 가이드하는 것이 안전한 방법이라 할 수 있습니다.

Previous

[검색엔진최적화] a 태그의 rel="nofollow" 태그 사용 알아보기

Previous

curl 사용시 header 옵션 사용하는 방법 간략히 알아보기