创建内部包

创建一个空目录

¥Create an empty directory

你需要一个用于放置包的目录。让我们在 ./packages/math 上创建一个。

¥You'll need a directory to put the package in. Let's create one at ./packages/math.

添加 package.json 文件

¥Add a package.json

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

¥Next, create the package.json for the package. By adding this file, you'll fulfill the two requirements for an Internal Package, making it discoverable to Turborepo and the rest of your 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：

¥Let's break down this package.json piece-by-piece:

• scripts：dev 和 build 脚本使用 TypeScript 编译器 编译软件包。dev 脚本将监视源代码的更改并自动重新编译软件包。

  ¥scripts: The dev and build script compile the package using the TypeScript compiler. The dev script will watch for changes to source code and automatically recompile the package.

• devDependencies：typescript 和 @repo/typescript-config 都是 devDependencies，因此你可以在 @repo/math 包中使用这些包。在实际软件包中，你可能会有更多 devDependencies 和 dependencies。 - 但我们现在可以保持简单。

  ¥devDependencies: typescript and @repo/typescript-config are devDependencies so you can use those packages in the @repo/math package. In a real-world package, you will likely have more devDependencies and dependencies - but we can keep it simple for now.

• exports：为包定义多个入口点，以便可以在其他包（import { add } from '@repo/math'）中使用。

  ¥exports: Defines multiple entrypoints for the package so it can be used in other packages (import { add } from '@repo/math').

需要注意的是，此 package.json 将内部包 @repo/typescript-config 声明为依赖。Turborepo 会将 @repo/math 识别为 @repo/typescript-config 的依赖，以便对任务进行排序。

¥Notably, this package.json declares an Internal Package, @repo/typescript-config, as a dependency. Turborepo will recognize @repo/math as a dependent of @repo/typescript-config for ordering your tasks.

添加 tsconfig.json

¥Add a tsconfig.json

通过将 tsconfig.json 文件添加到包的根目录来指定此包的 TypeScript 配置。TypeScript 具有 extends 键，允许你在整个代码库中使用基本配置，并根据需要使用不同的选项进行覆盖。

¥Specify the TypeScript configuration for this package by adding a tsconfig.json file to the root of the package. TypeScript has an extends key, allowing you to use a base configuration throughout your repository and overwrite with different options as needed.

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

你在这里完成了四件重要的事情：

¥You've done four important things here:

• ./packages/typescript-config 中的 @repo/typescript-config/base.json 配置包含你需要的所有配置，因此你可以从中扩展。

  ¥The @repo/typescript-config/base.json configuration that lives in ./packages/typescript-config has all the configuration you need so you extend from it.

• compilerOptions 中的 outDir 键 会告诉 TypeScript 将编译输出放在哪里。它与 package.json 中 exports 指定的目录匹配。

  ¥The outDir key in compilerOptions tells TypeScript where to put the compiled output. It matches the directory specified in your exports in package.json.

• compilerOptions 中的 rootDir 键 确保 outDir 中的输出使用与 src 目录相同的结构。

  ¥The rootDir key in compilerOptions ensures that the output in outDir uses the same structure as the src directory.

• include 和 exclude 键并非从基本配置 根据 TypeScript 规范 继承，因此你在此处添加了它们。

  ¥The include and exclude keys are not inherited from the base configuration, according to the TypeScript specification, so you've included them here.

添加包含源代码的 src 目录

¥Add a src directory with source code

你现在可以为你的包编写一些代码。在 src 目录中创建两个文件：

¥You can now write some code for your package. Create two files inside a src directory:

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

这些文件映射到你稍后运行 turbo build 时 tsc 将创建的输出。

¥These files map to the outputs that will be created by tsc when you run turbo build in a moment.

将包添加到应用

¥Add the package to an application

你已准备好在应用中使用新的包。让我们将它添加到 web 应用中。

¥You're ready to use your new package in an application. Let's add it to the web application.

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

@repo/math 现在可在 web 应用中使用，你可以在代码中使用它：

¥@repo/math is now available in the web application, you can use it in your code:

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

Edit turbo.json

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

¥Add the artifacts for the new @repo/math library to the outputs for the build task in turbo.json. This ensures that its build outputs will be cached by Turborepo, so they can be restored instantly when you start running builds.

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

运行 turbo build

¥Run turbo build

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

¥If you've installed turbo globally, run turbo build in your terminal at the root of your Workspace. You can also run the build script from package.json with your package manager, which will use turbo run build.

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

¥The @repo/math package built before the web application built so that the runtime code in ./packages/math/dist is available to the web application when it bundles.