NPM : 종속성의 종속성 중 하나를 사용해야합니까, 아니면 루트 수준에서 프로젝트에 명시 적으로 설치해야합니까?

TL; DR 요약

(여기서는 Lodash를 예제로 사용하고 있지만 다른 패키지 일 수 있습니다.)

자체 용도로 Lodash를 사용하는 것 외에도 내 애플리케이션은 내가 만든 NPM 패키지에서 JavaScript를 가져와야합니다. 이 패키지의 JavaScript도 Lodash에 의존합니다. 각 코드베이스가 다른 버전의 Lodash를 설치했을 수 있습니다. 내 응용 프로그램의 JavaScript와 설치된 패키지의 JavaScript가 모두 동일한 Lodash 함수를 가져 오는 경우 동일한 함수의 두 가지 다른 버전을 번들로 묶을 필요가 없습니다. NPM이 종속성을 해결할 수 있고 아무 것도 깨지지 않는다는 것을 알고 있지만 각 코드베이스가 동일한 라이브러리의 서로 다른 버전의 함수를 사용함에 따라 내 애플리케이션의 JavaScript 번들 크기가 계속 커질 것입니다. 버전을 동기화 상태로 유지하는 유일한 방법은 지속적으로 모니터링하고 적절한 경우 수동으로 업그레이드하는 것입니다.package.json. 후자는 나쁜 생각이며 더 좋은 방법은 없습니까?

원래 질문

우리 회사에서는 대부분의 UI 구성 요소 코드를 포함하는 Git 저장소를 만들었습니다. 이 저장소에는 UI 구성 요소 코드를 "리빙 스타일 가이드"웹 사이트로 변환하는 정적 사이트 생성기도 포함되어 있습니다. 이 웹 사이트의 목적은 웹에서 UI 구성 요소를 문서화하고 표시하는 것입니다 ( PatternLab 작동 방식과 유사 ).

또한 NPM을 통해이 코드를 배포하여 여러 프로젝트에서 공유 할 수 있습니다. 각 프로젝트는 NPM 모듈을 종속성으로 설치 한 다음 그 안에 포함 된 SASS 및 JavaScript 파일을 가져옵니다. JavaScript는 ES6로 작성되었으며 번들로 제공되거나 트랜스 파일되지 않았습니다. 우리는 의도적으로 브라우저 지원 코드를 배포하지 않기로 선택했습니다. 대신 각 프로젝트는 자체 SASS를 컴파일하고 자체 JavaScript를 번들 / 트랜스 파일해야합니다.

대부분의 UI 구성 요소 JavaScript는 간단하고 타사 라이브러리에 의존하지 않으므로 프로젝트로 가져 오기가 쉽습니다. 그러나 더 새롭고 복잡한 구성 요소 중 일부는 문제가있는 Lodash와 같은 NPM 패키지에 의존합니다.

분명히 정적 사이트 생성기가 웹 브라우저 내부에서 Lodash에 의존하는 구성 요소를 표시하려면 Lodash를 설치해야합니다. 마찬가지로, NPM 패키지를 사용하는 프로젝트는 이러한 동일한 구성 요소의 인스턴스를 생성하기 위해 Lodash를 설치해야합니다. 이로 인해 Lodash를 두 번 설치해야합니다. UI 구성 요소 프로젝트에 한 번, NPM 패키지를 사용하는 프로젝트에 다시 설치해야합니다. 두 프로젝트가 잠재적으로 서로 다른 버전의 Lodash를 설치하여 호환성 문제를 일으키거나 JavaScript 번들의 크기를 늘릴 수 있기 때문에 문제가됩니다.

내가 발견 한 한 가지 해결책 은 UI 구성 요소 프로젝트에서 dependencies대신 Lodash를 포함하는 것입니다 devDependencies. 이렇게하면 외부 프로젝트가 UI 구성 요소 NPM 모듈을 설치할 때 Lodash가 함께 설치됩니다. 이를 통해 프로젝트 자체를 명시 적으로 설치할 필요없이 Lodash에 "무료"액세스 할 수 있습니다. 이는 NPM이 단일 플랫 디렉토리 계층 구조에 패키지를 설치하기 때문에 가능하므로 프로젝트가 패키지를 직접 설치하는지 또는 종속 항목 중 하나가 패키지를 자체의 종속성으로 노출하는지는 중요하지 않은 것 같습니다 package.json. 이렇게하면 패키지를 두 번 설치할 필요가 없기 때문에 버전 충돌이 제거됩니다.

제 질문은 이것이 NPM 모범 사례를 위반하는 것입니까, 아니면 NPM이 작동하는 방식입니까? NPM 문서와 인터넷 검색을 읽은 후 이것이 문제가되지 않는 것 같습니다. 그러나 내가 제안하는 것이 나쁜 생각이라면 내가하려는 일을 어떻게 수행 할 수 있습니까?

다음은 빠른 시각 자료입니다.

main.js
node_modules/
  lodash/
  foo/
    bar.js
    node_modules/
      lodash/

main.jsLodash를 수입하고 사용합니다. 또한 foo/bar.jsLodash를 사용하지만 잠재적으로 다른 버전을 사용하는 을 가져옵니다 . 두 파일 모두 ES6입니다. main.js브라우저로 전송되기 전에 번들로 제공되고 트랜스 파일됩니다.