如何在 Monorepo 设置中使用 TypeScript

monorepo 设置允许您在单个存储库中管理多个包或项目。使用 TypeScript，此设置对于跨不同包共享类型、接口甚至实用程序特别有用。本指南将引导您了解如何在 monorepo 环境中设置 TypeScript。

1. 设置 Monorepo

要设置 monorepo，您​​可以使用 npm 工作区或 yarn 工作区等工具。这些工具可让您管理同一存储库中的多个软件包，并轻松跨项目共享代码。

1.1 初始化 Monorepo

首先，为您的 monorepo 创建一个新文件夹，并使用 npm 或 yarn 初始化它。

mkdir my-monorepo
cd my-monorepo
npm init -y

然后，在你的 package.json 中配置工作区：

{
  "name": "my-monorepo",
  "version": "1.0.0",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

此设置告诉 npm 或 yarn，所有包都将位于 packages 文件夹中。

2. 将包添加到 Monorepo

在您的 monorepo 中创建两个包。在此示例中，我们将为可重用代码创建一个 shared 包，并为前端应用程序创建一个 web-app 包。

mkdir -p packages/shared
mkdir -p packages/web-app

在每个包内部，初始化一个 package.json：

cd packages/shared
npm init -y

cd ../web-app
npm init -y

3. 将 TypeScript 添加到 Monorepo

接下来，我们将设置 TypeScript。在 monorepo 的根目录下安装 TypeScript 和必要的依赖项：

npm install typescript --save-dev

创建根级 tsconfig.json 来定义整个 monorepo 的 TypeScript 配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["packages/*/src"]
    },
    "composite": true,
    "declaration": true,
    "outDir": "dist",
    "rootDir": ".",
    "skipLibCheck": true,
    "module": "ESNext",
    "target": "ES6",
    "moduleResolution": "node"
  },
  "include": ["packages/*"]
}

这里的关键是 paths 选项，它允许 TypeScript 理解来自 monorepo 中不同包的导入。

4. 在每个包中配置 TypeScript

每个包都需要自己的 tsconfig.json 才能在 monorepo 中正常工作。以下是 shared 包的示例配置：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src"]
}

对于 web-app 包：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src"]
}

现在，可以在每个包中使用 TypeScript，并且从根目录 tsconfig.json 共享配置。

5. 将 TypeScript 代码添加到包中

让我们向这两个包中添加一些示例 TypeScript 代码。在 shared 包中，创建一个 src 文件夹并添加一个 TypeScript 文件：

mkdir -p packages/shared/src
touch packages/shared/src/index.ts

在 index.ts 中，导出一个简单的函数：

export const greet = (name: string): string => {
  return `Hello, ${name}!`;
}

在 web-app 包中，创建一个 src 文件夹和一个 index.ts 文件：

mkdir -p packages/web-app/src
touch packages/web-app/src/index.ts

现在，导入共享函数：

import { greet } from 'shared';

console.log(greet('TypeScript Monorepo'));

6. 构建 Monorepo

要编译 monorepo 中的所有 TypeScript 代码，我们需要使用 TypeScript 编译器。在 monorepo 的根目录中，运行：

npx tsc --build

此命令将按照各自的 tsconfig.json 文件编译所有包。

结论

在本指南中，我们介绍了如何在 monorepo 中设置和使用 TypeScript。通过在 monorepo 结构中组织代码，您可以轻松地在多个软件包之间共享代码，从而使您的开发过程更加高效。借助 TypeScript 的强类型和项目引用，此设置非常适合大型应用程序或共享库。