<div id="readability-page-1" class="page"><div>
 <a href="/m/category/FRONTEND/REACTJS">FRONTEND/REACTJS</a><h3>npm 특정 버전의 패키지를 사용하도록 지정하기</h3>
 </div><cite>나를찾는아이</cite>
 2023. 7. 7. 17:42
 <div>
 <figure data-ke-mobilestyle="widthOrigin" data-filename="image-5.png" data-origin-width="1000" data-origin-height="420">
 
 <img src="https://blog.kakaocdn.net/dn/pFSYZ/btsmPAYPfKd/cVKIHVVLfkznWQBuBJKriK/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="image-5.png" data-origin-width="1000" data-origin-height="420">
 
 
</figure>



npm 은 hoisting 알고리즘을 통해 여러버전의 패키지들을 관리하고 있습니다

여러분의 프로젝트에서 관리하고 있는 의존성중에서

특정 패키지의 버전을 다른 버전을 쓰도록 바꾸고 싶을때가 있을수 있습니다

예를 들면 어떤 패키지의 특정버전에서의 보안문제로 인해서 변경을 해야한다던가

다른 fork된 저장소를 쓴다던가 하는 다양한 이유들이 있겠습니다


이럴때 활용할수 있도록 npm에서는 overrides라는 프로퍼티를 제공하고 있습니다

package.json 파일을 다음과 같이 수정합니다

<pre id="code_1688718422107" data-ke-language="typescript" data-ke-type="codeblock"><code>{
 "overrides": {
 "foo": "1.0.0"
 }
}</code></pre>
해당 패키지에서 하위의 foo 패키지의 버전을 1.0.0을 사용하도록 강제로 지정합니다

하위의 뎁스를 좀더 세밀하게 조정할수 있습니다
<pre id="code_1688714166202" data-ke-language="typescript" data-ke-type="codeblock"><code>{
 "overrides": {
 "bar": {
 "foo": "1.0.0"
 }
 }
}</code></pre>

위의 예제는 bar 패키지 하위의 foo 패키지만 1.0.0 버전으로 변경하도록 지정하는것입니다

당연히 2depth 뿐만 아니라 좀더 복잡한 depth에서도 변경 가능합니다

<pre id="code_1688717871175" data-ke-language="typescript" data-ke-type="codeblock"><code>{
 "overrides": {
 "baz": {
 "bar": {
 "foo": "1.0.0"
 }
 }
 }
}</code></pre>


특정 버전의 패키지의 하위 패키지만 변경하는것도 가능합니다
<pre id="code_1688717881855" data-ke-language="typescript" data-ke-type="codeblock"><code>{
 "overrides": {
 "bar@2.0.0": {
 "foo": "1.0.0"
 }
 }
}</code></pre>

버전의 범위를 설정하는것 또한 가능합니다


<pre id="code_1688714131795" data-ke-language="typescript" data-ke-type="codeblock"><code>{
 "dependencies": {
 "foo": "^1.0.0"
 },
 "overrides": {
 // BAD, will throw an EOVERRIDE error
 // "foo": "^2.0.0"
 // GOOD, specs match so override is allowed
 // "foo": "^1.0.0"
 // BEST, the override is defined as a reference to the dependency
 "foo": "$foo",
 // the referenced package does not need to match the overridden one
 "bar": "$foo"
 }
}</code></pre>

하지만 버전을 무작정 바꿀수 있지는 않습니다

해당 패키지에 명시된 버전 범위에 한해서만 변경이 가능합니다

또한 "foo": "$foo" 이렇게 $ 표시를 통해 선언하여 상단의 의존성에 설정된 버전을 참조하도록 설정하는것도 가능합니다


<a href="https://github.com/npm/cli/issues/5850" target="_blank" rel="noopener">https://github.com/npm/cli/issues/5850</a>
<figure id="og_1688718721935" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="object" data-og-title="bug: overrides property only honored when running install the first time · Issue #5850 · npm/cli" data-og-description="Opening a new issue since #4232 is getting crowded with other possibly unreleated bug reports. But this one I have confirmed. From: #4232 (comment) Note that the INITIAL install will abide by the o..." data-og-host="github.com" data-og-source-url="https://github.com/npm/cli/issues/5850" data-og-url="https://github.com/npm/cli/issues/5850" data-og-image="https://scrap.kakaocdn.net/dn/fPYyE/hyTfrWYMXK/ZwZkSkdtwYXU0mIeFOZCLK/img.png?width=1200&amp;height=600&amp;face=991_129_1052_196"><a href="https://github.com/npm/cli/issues/5850" target="_blank" rel="noopener" data-source-url="https://github.com/npm/cli/issues/5850">

<div>
bug: overrides property only honored when running install the first time · Issue #5850 · npm/cli
Opening a new issue since #4232 is getting crowded with other possibly unreleated bug reports. But this one I have confirmed. From: #4232 (comment) Note that the INITIAL install will abide by the o...
github.com
</div>
</a><img src="https://scrap.kakaocdn.net/dn/fPYyE/hyTfrWYMXK/ZwZkSkdtwYXU0mIeFOZCLK/img.png?width=1200&amp;height=600&amp;face=991_129_1052_196"></figure>

그런데 아쉽게도 이 기능에 아직 고쳐지지 않는 버그가 있습니다(2023/7/7 기준)

overrides 프로퍼티는 첫 install 시에만 동작합니다

그래서 기존 프로젝트에 overrides를 적용하고 싶으시다면

프로젝트의 node_modules를 모두 지우고 package-lock.json 파일을 지운다음에

npm install을 설정해야만 overrides 프로퍼티가 적용됩니다... 이럴수가....


<pre id="code_1688719289476" data-ke-language="bash" data-ke-type="codeblock"><code>npm ls react</code></pre>

&nbsp;라는 명령어를 통해 react가 설치된 패키지를 조회해볼수 있는데요

<pre id="code_1688718925149" data-ke-language="typescript" data-ke-type="codeblock"><code>{
 "dependencies": {
 "next": "^13.4.9",
 "nextra": "^2.8.0",
 "nextra-theme-docs": "^2.8.0",
 "react": "^18.2.0",
 "react-dom": "^18.2.0"
 },
 "overrides": {
 "react": "$react",
 "react-dom": "$react-dom"
 }
}</code></pre>

이렇게 하위 패키지의 버전을 재지정하여&nbsp;
<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2023-07-07 오후 5.36.18.png" data-origin-width="1632" data-origin-height="982">
 
 <img src="https://blog.kakaocdn.net/dn/92ixn/btsmPzlYlsh/hhV39g0hKoteTZjVtc7Oq0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2023-07-07 오후 5.36.18.png" data-origin-width="1632" data-origin-height="982">
 
 
</figure>


이렇게 적용전과 적용후에 다른 모습을 볼수 있습니다
 
 
 </div></div>

나를 찾는 아이

Kyoung min, Kim

npm 은 hoisting 알고리즘을 통해 여러버전의 패키지들을 관리하고 있습니다
 
여러분의 프로젝트에서 관리하고 있는 의존성중에서
 
특정 패키지의 버전을 다른 버전을 쓰도록 바꾸고 싶을때가 있을수 있습니다
 
예를 들면 어떤 패키지의 특정버전에서의 보안문제로 인해서 변경을 해야한다던가
 
다른 fork된 저장소를 쓴다던가 하는 다양한 이유들이 있겠습니다
 
 
이럴때 활용할수 있도록 npm에서는 overrides라는 프로퍼티를 제공하고 있습니다
 
package.json 파일을 다음과 같이 수정합니다
 
{
  "overrides": {
    "foo": "1.0.0"
  }
}
해당 패키지에서 하위의 foo 패키지의 버전을 1.0.0을 사용하도록 강제로 지정합니다
 
하위의 뎁스를 좀더 세밀하게 조정할수 있습니다
{
  "overrides": {
    "bar": {
      "foo": "1.0.0"
    }
  }
}
 
위의 예제는 bar 패키지 하위의 foo 패키지만 1.0.0 버전으로 변경하도록 지정하는것입니다
 
당연히 2depth 뿐만 아니라 좀더 복잡한 depth에서도 변경 가능합니다
 
{
  "overrides": {
    "baz": {
      "bar": {
        "foo": "1.0.0"
      }
    }
  }
}
 
 
특정 버전의 패키지의 하위 패키지만 변경하는것도 가능합니다
{
  "overrides": {
    "bar@2.0.0": {
      "foo": "1.0.0"
    }
  }
}
 
버전의 범위를 설정하는것 또한 가능합니다
 
 
{
  "dependencies": {
    "foo": "^1.0.0"
  },
  "overrides": {
    // BAD, will throw an EOVERRIDE error
    // "foo": "^2.0.0"
    // GOOD, specs match so override is allowed
    // "foo": "^1.0.0"
    // BEST, the override is defined as a reference to the dependency
    "foo": "$foo",
    // the referenced package does not need to match the overridden one
    "bar": "$foo"
  }
}
 
하지만 버전을 무작정 바꿀수 있지는 않습니다
 
해당 패키지에 명시된 버전 범위에 한해서만 변경이 가능합니다
 
또한 "foo": "$foo" 이렇게 $ 표시를 통해 선언하여 상단의 의존성에 설정된 버전을 참조하도록 설정하는것도 가능합니다
 
 
https://github.com/npm/cli/issues/5850
 
그런데 아쉽게도 이 기능에 아직 고쳐지지 않는 버그가 있습니다(2023/7/7 기준)
 
overrides 프로퍼티는 첫 install 시에만 동작합니다
 
그래서 기존 프로젝트에 overrides를 적용하고 싶으시다면
 
프로젝트의 node_modules를 모두 지우고 package-lock.json 파일을 지운다음에
 
npm install을 설정해야만 overrides 프로퍼티가 적용됩니다... 이럴수가....
 
 
npm ls react
 
 라는 명령어를 통해 react가 설치된 패키지를 조회해볼수 있는데요
 
{
  "dependencies": {
    "next": "^13.4.9",
    "nextra": "^2.8.0",
    "nextra-theme-docs": "^2.8.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "overrides": {
    "react": "$react",
    "react-dom": "$react-dom"
  }
}
 
이렇게 하위 패키지의 버전을 재지정하여 
 
 
이렇게 적용전과 적용후에 다른 모습을 볼수 있습니다

npm 특정 버전의 패키지를 사용하도록 지정하기

댓글