库中的框架绑定

在库包中进行框架绑定，可以通过在库中直接利用框架的 API，从而将库的代码更深入地集成到框架中。

为此，请使用库的 package.json 中的 peerDependencies 字段，这使得框架 API 在您的库中可用，而无需直接在包中安装它。

须知：

在本页中，我们将使用 Next.js 作为示例，但以下概念适用于任何框架或其他依赖项。

示例

为要为其创建绑定的依赖项，向您的库添加一个 peerDependency。

./packages/ui/package.json

{
  "name": "@repo/ui",
  "peerDependencies": {
    "next": "*"
  }
}

须知：

在上面的示例中，next 的 peerDependency 接受任何版本。您可能需要根据需要指定一个范围（例如，">=15"）。此外，对于旧的包管理器，您可能需要通过配置来指示您的包管理器安装对等依赖项，或者作为一种变通方法将依赖项添加到 devDependencies 中。

这将使依赖项在您的库中可用，允许您编写如下代码。请注意 className prop，它为 monorepo 中的此组件设置了默认样式，并且可以在 props 对象中覆盖。

./packages/ui/src/link.tsx

import Link from 'next/link';
import type { ComponentProps } from 'react';
 
type CustomLinkProps = ComponentProps<typeof Link>;
 
export function CustomLink({ children, ...props }: CustomLinkProps) {
  return (
    <Link className="text-underline hover:text-green-400" {...props}>
      {children}
    </Link>
  );
}

将为包解析的 next 版本将来自库的消费者。例如，如果您的应用程序中安装了 Next.js 15，那么 next 的 TypeScript 类型和 API 也将是 Next.js 15。

使用入口点拆分框架绑定

使用导出路径将包拆分为特定于框架的入口点，是在旨在支持多个框架的库中添加绑定的最简单方法。通过拆分入口点，打包器更容易理解您要定位的框架，并且您不太可能遇到奇怪的打包错误。

下面的示例展示了一个具有两个入口点的库，每个入口点代表一种不同类型的链接组件。这些抽象很可能包含您自己的样式、API 以及它们包装的元素的其他调整。

./link：一个带有您设计系统默认样式的 <a> HTML 标签
./next-js/link：Next.js Link 组件的自定义版本，具有预设为您组织偏好的 props
./svelte/link：一个带有预设的Svelte 的 a 标签的自定义版本。

./packages/ui/package.json

{
  "exports": {
    "./link": "./dist/link.js",
    "./next-js/link": "./dist/next-js/link.js"
  },
  "peerDependencies": {
    "next": "*"
  }
}

须知：

在上面的示例中，next 的 peerDependency 接受任何版本。您可能需要根据需要指定一个范围（例如，">=15"）。

这一概念可以应用于您想要提供绑定的任意数量的框架或其他依赖项。