库中的框架绑定

在库包中的框架绑定通过直接在库中利用框架的 API，将库的代码更深入地与框架集成。

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

须知：

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

示例

为你要为其创建绑定的依赖项，将 peerDependency 添加到你的库中。

./packages/ui/package.json

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

须知：

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

这将使依赖项在你的库中可用，允许你编写如下代码。请注意 className 属性，它为 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 组件的自定义版本，其属性已预设为你的组织的偏好
./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"）。

此概念可以应用于你想要为其提供绑定的任何数量的框架或其他依赖项。