모노레포에서 유형 스크립트 라이브러리 공유

모노레포에서 유형 스크립트 라이브러리 공유

라이브러리 코드를 공유하는 3개의 서비스로 모노레포를 설정하려고 합니다.

현재 상황은 다음과 같습니다.

repo: web
pdf/
  package.json
    reference to shared-ts using github url
  tsconfig.json
frontend/
  package.json
    reference to shared-ts using github url
  tsconfig.json

repo: mobile (react-native)
  package.json
    reference to shared-ts using github url
  tsconfig.json

repo: shared-ts
  package.json
  tsconfig.json

이것은 효과가 있지만 헌신하는 것은 고통입니다.shared-ts빌드, 해시 변경package.json그리고 다시 커밋합니다.

이것이 제가 이루고 싶은 목표입니다.

repo: monorepo
pdf/
  package.json
    reference to ../shared-ts
  tsconfig.json
frontend/
  package.json
    reference to ../shared-ts
  tsconfig.json
mobile/
  package.json
    reference to ../shared-ts
  tsconfig.json
shared-ts/
  package.json
  tsconfig.json

지금까지 시도한 것은:

• TypeScript 프로젝트 참조는 있지만 shared-ts 프로젝트에 종속성을 가질 수 있는 방법이 없는 것 같습니다.
• "shared-ts": "../shared-ts"꾸러미로json이지만 각 패키지의 node_modules에 shared-ts를 복사하기 때문에 변경할 때마다 실을 다시 실행해야 합니다.
• yarn link에postinstall:error TS2307: Cannot find module 'shared-ts' or its corresponding type declarations.
• 기호 링크 직접 만들기postinstall와 함께ln -s ../shared-ts/ node_modules/shared-ts/그러나 TypeScript가 모듈을 찾지 못하는 것 같습니다.
• npm link에postinstall가장 유망한 것처럼 보이지만 속도가 너무 느리고 몇 가지 권한 문제 때문에 CI에서 실행하는 데 어려움을 겪고 있습니다.

이것을 하는 좋은 방법이 있습니까?제가 해볼 수 있는 다른 아이디어가 있나요?

솔루션 1:

레르나와 함께

작업 공간 및 Lerna를 사용할 수 있습니다.

yarn workspace & lerna

├── README.md
├── lerna.json
├── package.json
├── packages
│   ├── pdf
│   │   ├── package.json   /*  "shared-ts": "^1.0.0" */
│   │   └──  src
│   ├── frontend
│   │   ├── package.json
│   │   └── src
│   ├── mobile
│   │   ├── package.json
│   │   └── src
│   ├── shared-ts
│   │   ├── package.json
│   │   └──  src
├── tsconfig.json
└── yarn.lock

여기 예문 레포가 있습니다.

여기서 x-cli가 공유 x-core를 얻는 것을 볼 수 있습니다.

솔루션 2:

레르나 없이

당신은 우리가 가시적인 심볼 링크를 만들 수 있는 mtsl 패키지를 사용할 수 있습니다.이 패키지를 전체적으로 설치할 수 있습니다.

npm install -g mtsl

그런 다음 터미널에서 이 세 가지 명령을 분리하기 시작하면 됩니다.

mtsl startwithoutadd -s path_of_project/packages/shared-ts -d path_of_project/packages/pdf/node_modules/shared-ts

mtsl startwithoutadd -s path_of_project/packages/shared-ts -d path_of_project/packages/frontend/node_modules/shared-ts

mtsl startwithoutadd -s path_of_project/packages/shared-ts -d path_of_project/packages/mobile/node_modules/shared-ts

이 세 감시자를 멈추지 마십시오. 테스트 후에, 당신은 다음으로부터 하나의 명령을 만들 수 있습니다.package.json대본

사용 사례는 npm7 워크스페이스를 사용하여 처리할 수 있습니다.간단히 말해서 새로운 모노레포 구조는 다음과 같습니다.

repo: monorepo
package.json // <- here you define the workspaces
pdf/
  package.json
    reference to shared-ts
  tsconfig.json
frontend/
  package.json
    reference to shared-ts
  tsconfig.json
mobile/
  package.json
    reference to shared-ts
  tsconfig.json
shared-ts/
  package.json
  tsconfig.json

루트에 워크스페이스를 나열해야 합니다.package.json아래와 같이 보일 수 있습니다.

{
  "name": "awesome-monorepo",
  "workspaces": [
    "pdf",
    "frontend",
    "mobile",
    "shared-ts"
  ]
}

그렇게 한 후, 모노레포의 어느 곳이든 당신이 사용하기로 결정한 것은shared-ts에 추가할 수 있습니다.dependencies또는devDependencies상대 경로 대신 버전 번호로 간단히 참조할 수 있습니다.

워크스페이스를 포함한 모든 노드 모듈이 루트에 호이스트됩니다.node_modules그렇기 때문에 모듈 해상도는 마찰 없이 작동해야 합니다.

NX를 사용하여 저장소를 유지 관리할 수 있습니다.web그리고.mobilerepos는 당신의 앱이 될 것이고, 그리고.shared-ts그런 자유주의자가 될 것입니다.web그리고.mobile에 의존하는shared-tslib.

공통 패키지가 있습니다.json, 또는 별도의 패키지.각 레포에 대한 json 개별.NX가 제공하는dependencyGraph그리고.affected기능: 공통 리브를 변경하면 완전한 것을 빌드하지 않고도 빌드할 모듈/앱을 파악할 수 있습니다.

코드 구조는 다음과 같습니다.

apps:
  web:
    src
    package.json

  mobile:
    src
    package.json

libs:
   shared-ts:
     src
     package.json

workspace.json

최상의 설정과 옵션을 위해 공식 문서를 검색하는 것이 가장 좋을 것입니다. 하지만 저는 그것이 당신이 원하는 것을 제공한다고 믿습니다.

저는 최근 프로젝트에서 당신이 궁금해하는 것들을 했습니다.레르나와 실 작업 공간을 사용하여 원하는 결과를 얻을 수 있습니다.자세한 내용은 이 링크를 참조하십시오.

위와 같이, 우리는 유형 패키지를 만들 것입니다.다른 패키지에서는 아래와 같은 패키지에서 유형을 가져올 수 있습니다.

import { Post } from "@types";

이런 식으로 하면 패키지를 연결하는 것보다 훨씬 쉽습니다.

용사를 yarn workspace & lerna

여기 모노레포-레포-레포-레포의 예가 있습니다.

언급URL : https://stackoverflow.com/questions/70002116/sharing-a-typescript-library-in-a-monorepo