Internal Package 생성하기

빈 디렉토리 생성하기

패키지를 넣을 디렉토리가 필요합니다. ./packages/math에 하나를 생성해 보겠습니다.

package.json 추가하기

다음으로, 패키지에 대한 package.json을 생성합니다. 이 파일을 추가하면 Internal Package의 두 가지 요구 사항을 충족하여 Turborepo 및 Workspace의 나머지 부분에서 발견 가능하게 됩니다.

{
  "name": "@repo/math",
  "type": "module",
  "scripts": {
    "dev": "tsc --watch",
    "build": "tsc"
  },
  "exports": {
    "./add": {
      "types": "./src/add.ts",
      "default": "./dist/add.js"
    },
    "./subtract": {
      "types": "./src/subtract.ts",
      "default": "./dist/subtract.js"
    }
  },
  "devDependencies": {
    "@repo/typescript-config": "workspace:*",
    "typescript": "latest"
  }
}

이 package.json을 부분별로 분석해 보겠습니다:

• name: 패키지 검색 가능성을 위한 가장 중요한 필드입니다. @repo/math 값은 workspace 전체의 import 문에서 사용되는 정확한 식별자가 됩니다. 이 이름을 변경하면 모든 import 문을 그에 맞게 업데이트해야 합니다.
• scripts: dev 및 build 스크립트는 TypeScript 컴파일러를 사용하여 패키지를 컴파일합니다. dev 스크립트는 소스 코드의 변경 사항을 감시하고 자동으로 패키지를 재컴파일합니다.
• devDependencies: typescript 및 @repo/typescript-config는 @repo/math 패키지에서 해당 패키지를 사용할 수 있도록 devDependencies로 선언되어 있습니다. 실제 패키지에서는 더 많은 devDependencies 및 dependencies가 필요할 수 있지만, 지금은 간단하게 유지하겠습니다.
• exports: 패키지가 다른 패키지에서 사용될 수 있도록 여러 진입점을 정의합니다 (import { add } from '@repo/math/add').

주목할 점은, 이 package.json이 Internal Package인 @repo/typescript-config를 종속성으로 선언한다는 것입니다. Turborepo는 @repo/math를 @repo/typescript-config의 종속 패키지로 인식하여 작업 순서를 정합니다.

tsconfig.json 추가하기

패키지의 루트에 tsconfig.json 파일을 추가하여 이 패키지의 TypeScript 구성을 지정합니다. TypeScript에는 extends 키가 있어 리포지토리 전체에서 기본 구성을 사용하고 필요에 따라 다른 옵션으로 덮어쓸 수 있습니다.

{
  "extends": "@repo/typescript-config/base.json",
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

여기서 네 가지 중요한 작업을 수행했습니다:

• ./packages/typescript-config에 있는 @repo/typescript-config/base.json 구성에는 필요한 모든 구성이 포함되어 있으므로 이를 확장합니다.
• compilerOptions의 outDir 키는 TypeScript에 컴파일된 출력을 어디에 배치할지 알려줍니다. 이는 package.json의 exports에 지정된 디렉토리와 일치합니다.
• compilerOptions의 rootDir 키는 outDir의 출력이 src 디렉토리와 동일한 구조를 사용하도록 보장합니다.
• include 및 exclude 키는 TypeScript 사양에 따라 기본 구성에서 상속되지 않으므로 여기에 포함했습니다.

소스 코드가 포함된 src 디렉토리 추가하기

이제 패키지의 코드를 작성할 수 있습니다. src 디렉토리 내에 두 개의 파일을 생성합니다:

export const add = (a: number, b: number) => a + b;

이 파일들은 잠시 후 turbo build를 실행할 때 tsc에 의해 생성될 출력에 매핑됩니다.

애플리케이션에 패키지 추가하기

이제 애플리케이션에서 새 패키지를 사용할 준비가 되었습니다. web 애플리케이션에 추가해 보겠습니다.

  "dependencies": {
+   "@repo/math": "workspace:*",
    "next": "latest",
    "react": "latest",
    "react-dom": "latest"
  },

이제 @repo/math를 web 애플리케이션에서 사용할 수 있으며, 코드에서 사용할 수 있습니다:

import { add } from '@repo/math/add';
 
function Page() {
  return <div>{add(1, 2)}</div>;
}
 
export default Page;

turbo.json 수정하기

turbo.json의 build 작업에 대한 outputs에 새 @repo/math 라이브러리의 아티팩트를 추가합니다. 이렇게 하면 빌드 출력이 Turborepo에 의해 캐시되어 빌드를 시작할 때 즉시 복원할 수 있습니다.

{
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**", "dist/**"]
    }
  }
}

turbo build 실행하기

turbo를 전역으로 설치한 경우, Workspace의 루트에서 터미널에서 turbo build를 실행합니다. 패키지 매니저로 package.json의 build 스크립트를 실행할 수도 있으며, 이는 turbo run build를 사용합니다.

@repo/math 패키지는 web 애플리케이션이 빌드되기 전에 빌드되므로 ./packages/math/dist의 런타임 코드가 web 애플리케이션이 번들링할 때 사용 가능합니다.