[Nx] 병합 모노레포 병합 튜토리얼(Integrated Monorepo)

Example repository

새 워크스페이스 생성하기

먼저 새 작업 공간을 만듭니다. 다음 명령을 사용하여 설정할 수 있습니다.

npx create-nx-workspace@latest myorg --preset=ts

파일 구조는 다음과 같아야 합니다:

myorg/
├── packages/
├── tools/
├── nx.json
├── package.json
├── README.md
└── tsconfig.base.json

패키지 생성하기

Nx에는 스캐폴딩 애플리케이션에 도움이 되는 제너레이터가 함께 제공됩니다. 이 제네레이터를 실행하여 is-even이라는 이름의 새 라이브러리를 만듭니다:

npx nx generate @nx/js:library is-even --publishable --importPath @myorg/is-even

이 명령:

• @nx/js 플러그인의 라이브러리 제네레이터를 사용하여 is-even이라는 새 라이브러리를 스캐폴딩합니다.
• --publishable 플래그를 사용하면 package.json을 생성하고 NPM에 게시하기 위해 호출할 수 있는 publish target도 얻을 수 있습니다.
• --importPath를 사용하면 NPM 패키지의 이름을 정의할 수 있습니다.

이제 다음과 같은 구조가 생겼을 것입니다:

packages/
└── is-even/
    ├── src/
    |  └── lib/
    |  |  ├── is-even.spec.ts
    |  |  ├── is-even.ts
    |  └── index.ts
    ├── project.json
    ├── package.json
    ├── ...
    └── tsconfig.json

이 콘텐츠로 is-even.ts를 업데이트하세요:

// packages/is-even/src/lib/is-even.ts
export function isEven(x: number): boolean {
  return x % 2 === 0;
}

Nx 플러그인은 프로젝트 수준의 project.json을 사용하여 특정 프로젝트에 대해 실행할 수 있는 사용 가능한 대상에 대한 메타데이터를 관리합니다. is-even에 대해 생성된 project.json에는 빌드, 게시, 린트 및 테스트 타겟이 포함됩니다:

// packages
{
  "name": "is-even",
  "targets": {
    "build": {
      /* ... */
    },
    "publish": {
      /* ... */
    },
    "lint": {
      /* ... */
    },
    "test": {
      /* ... */
    }
  }
}

다양한 설정을 자세히 살펴보고 패키지 빌드, 게시, 린팅 또는 테스트에 사용되는 옵션을 미세 조정할 수 있습니다. low-level의 세부 사항은 플러그인이 처리합니다.

실행

• npx nx build is-even은 src 파일을 빌드하고 즉시 게시할 수 있는 패키지를 작업 공간의 루트인 dist/packages/is-even에 배치합니다.
• npx nx publish is-even은 dist/packages/is-even에서 게시 스크립트를 실행하여 패키지를 NPM으로 푸시합니다.
• npx nx test is-even은 패키지에 대해 미리 구성된 Jest 테스트를 실행합니다.
• npx nx lint is-even은 패키지에 대해 미리 구성된 ESLint 검사를 실행합니다.

패키지의 로컬 링크

병합 모노레포 스타일로 패키지를 로컬로 링크하는 작업은 tsconfig.base.json 파일의 TypeScript 경로 매핑을 활용하여 Nx에서 자동으로 처리합니다.

이를 설명하기 위해 다른 패키지 is-odd를 생성해 보겠습니다. 이를 위해 생성기를 다시 실행할 수 있습니다:

npx nx generate @nx/js:library is-odd --publishable --importPath @myorg/is-odd

이제 tsconfig.base.json에 두 개의 항목이 있다는 점에 유의하세요:

// tsconfig.base.json
{
  "compileOnSave": false,
  "compilerOptions": {
    ...
    "paths": {
      "@myorg/is-even": ["packages/is-even/src/index.ts"],
      "@myorg/is-odd": ["packages/is-odd/src/index.ts"]
    }
  }
}

is-odd 패키지의 is-odd.ts 구현을 업데이트하여 @myorg/is-even 패키지에서 isEven을 가져오세요:

// packages/is-odd/src/lib/is-odd.ts
import { isEven } from '@myorg/is-even';

export function isOdd(x: number): boolean {
  return !isEven(x);
}

이 작업만 완료하면 됩니다.

Typescript Paths

라이브러리가 생성되면 Nx는 tsconfig.base.json 파일에
새 Typescript 경로를 추가합니다. 에디터 내부에서 실행 중인
타입스크립트 서버 프로세스가 이러한 변경 사항을
인식하지 못하는 경우가 있으므로 가져오기 문에서 인라인 오류를 제거하려면
서버를 다시 시작해야 합니다. 이 작업은 VS 코드에서 타입스크립트 파일을 볼 때
명령 팔레트에서 완료될 수 있습니다. (Command-Shift-P)
"Typescript: Restart TS server"

태스크 종속성

모노레포에서는 패키지 간 종속성뿐만 아니라 태스크 간에도 종속성이 존재합니다.

예를 들어, is-odd를 빌드할 때마다 is-even이 미리 빌드되었는지 확인해야 합니다. Nx는 nx.json에 targetDefaults 속성을 추가하여 이러한 태스크 종속성을 정의할 수 있습니다.

병합 모노레포 스타일에서는 이미 제너레이터에서 이 작업을 처리하고 있습니다. 현재 nx.json 파일에는 이미 즉시 작동하는 기본값이 포함되어 있습니다:

// nx.json
{
  ...
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      ...
    },
    ...
  },
  ...
}

이렇게 하면 패키지 자체의 빌드 타겟이 실행되기 전에 모든 종속 프로젝트의 빌드 타겟을 먼저 실행하도록 Nx에 지시합니다.

작업 영역의 루트에서 기존 dist 폴더를 모두 제거하고 실행합니다:

npx nx build is-odd

그러면 자동으로 npx nx build is-even이 먼저 실행되므로 dist 폴더에 두 패키지가 모두 있어야 합니다. 이전에 is-even을 빌드한 적이 있는 경우 캐시에서 복원됩니다.

빌드 결과 캐시

is-even 패키지를 빌드하려면 실행합니다:

npx nx build is-even

동일한 명령을 두 번 실행하면 빌드 캐시가 사용 중임을 확인할 수 있습니다:

npx nx build is-even

> nx run is-even:build

Compiling TypeScript files for project "is-even"...
Done compiling TypeScript files for project "is-even".

 —————————————————————————————————————————————————————————————————————

 >  NX   Successfully ran target build for project is-even (713ms)

여러 작업 실행

워크스페이스의 모든 패키지에 대해 빌드 타겟을 실행하려면 다음 명령을 사용합니다:

npx nx run-many -t build

얻을 수 있는 것은 다음과 같습니다:

npx nx run-many -t build

    ✔  nx run is-even:build  [existing outputs match the cache, left as is]
    ✔  nx run is-odd:build (906ms)

 —————————————————————————————————————————————————————————————————

 >  NX   Successfully ran target build for 2 projects (914ms)

   Nx read the output from the cache instead of running the command for 1 out of 2 tasks.

is-even:build에서는 빌드를 실행하지 않고 이전에 빌드가 실행되었기 때문에 캐시에서 가져온다는 점에 유의하세요. run-many 명령을 다시 실행하면 모든 빌드가 캐시됩니다.

또한 다음 명령을 사용하여 변경된 패키지에 대해서만 작업을 실행할 수 있습니다.

npx nx affected -t build

더보기

Core Features
Mental Model
Adopting Nx
Integrated Repos vs Package-Based Repos
React Tutorial
Node.js Tutorial

Reference

• Integrated Monorepo | Nx