在包中创建框架绑定

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

要做到这一点，可以在库的 package.json 中使用 peerDependencies 字段，这使得框架 API 可以在你的库中使用，而无需直接在包中安装它。

Good to know:

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

示例

为你打算创建绑定的依赖项向你的库添加 peerDependency。

./packages/ui/package.json

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

Good to know:

在上面的示例中，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": "*"
  }
}

Good to know:

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

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