사용하는 라이브러리의 하위 모듈 버전 고정하기

들어가며

사용하고 있는 외부 라이브러리리가 의존하는 모듈을 특정 버전으로 고정시키고 싶을때가 있다.

예를 들어, vue-cli-service@4.5.9 는 내부적으로 webpack-bundle-analyzer@3.8.0 을 의존하고 있다. 하지만 이 버전은 특정 상황에서 성능이슈가 존재하고, 다음 버전인 4.1.0에서 수정되었다.

이를 해결하기 위해 vue-cli-service가 사용하는 webpack-bundle-analyzer를 4.1.0 버전으로 사용하도록 변경해보자.

Yarn Resolutions

패키지 매니저를 yarn을 쓰고 있다면 Yarn의 Selective dependency resolutions을 사용하면 간단하게 해결할 수 있다.

package.json에 다음과 같이 추가해주도록 하자.

{
  // 생략
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^1.19.1",
    "speed-measure-webpack-plugin": "^1.3.3",
    "vue-template-compiler": "^2.6.11"
  },
  "resolutions": {
    "webpack-bundle-analyzer": "^4.1.0" // here!!!
  }
}

Npm Force Resolutions

패키지 매니저를 yarn이 아닌 npm을 사용하고 있다면 별도의 설정 없이는 불가능하다. npm-force-resolutions 라이브러리를 사용하도록 하자.

위와 동일하게 resolutions에 선언해주고, 추가로 preinstall에서 라이브러리를 돌려주어야 한다.

{
  // 생략
  "scripts": {
    "preinstall": "npx npm-force-resolutions" // here!!!
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  // 생략
  "resolutions": {
    "webpack-bundle-analyzer": "^4.1.0"
  }
}

❗npm7 (node 15) 부터는 package-lock.json 의 포맷이 변경되었고, npm-force-resolutions 라이브러리에서 이를 지원하지 않아 정상적으로 동작하지 않는다.

Package Overrides

우리팀은 npm을 패키지 매니저로 사용하고 있기 때문에, 이 기능을 npm이 지원해주면 좋지 않을까? 하여 찾아봤더니 accepted 상태의 RFC 를 발견할 수 있었다.

accepted 는 되었으나, backlog에 머물고 있는것을 보아 언제 만나볼수 있을지는 모르겠다.

결론

Yarn을 씁시다..?