创建内部包

创建一个空目录

你需要一个目录来存放这个包。让我们在 ./packages/math 创建一个。

添加一个 package.json

接下来，为这个包创建 package.json。通过添加这个文件，你将满足内部包的两个要求，使其可被 Turborepo 和你的工作区的其余部分发现。

{
  "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 成为在整个工作区导入语句中使用的确切标识符。如果你更改此名称，则必须相应地更新所有导入语句。
• scripts：dev 和 build 脚本使用 TypeScript 编译器来编译包。dev 脚本会监视源代码更改并自动重新编译包。
• devDependencies：typescript 和 @repo/typescript-config 是 devDependencies，这样你就可以在 @repo/math 包中使用这些包。在实际的包中，你可能会有更多的 devDependencies 和 dependencies - 但现在我们可以保持简单。
• exports：定义了包的多个入口点，以便它可以在其他包中使用（import { add } from '@repo/math/add'）。

值得注意的是，此 package.json 将一个内部包 @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 目录相同的结构。
• 根据TypeScript 规范，include 和 exclude 键不会从基础配置继承，所以你在这里包含了它们。

添加一个 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

将新 @repo/math 库的工件添加到 turbo.json 中 build 任务的 outputs 中。这确保了它的构建输出将被 Turborepo 缓存，因此在开始运行构建时可以立即恢复。

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

运行 turbo build

如果你全局安装了 turbo，请在你的工作区根目录的终端中运行 turbo build。你也可以使用包管理器运行 package.json 中的 build 脚本，它将使用 turbo run build。

@repo/math 包在 web 应用程序构建之前构建，以便 ./packages/math/dist 中的运行时代码在 web 应用程序进行打包时可用。