库中的框架绑定

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

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

示例

为你的库添加一个 peerDependency，用于你打算为其创建绑定的依赖项。

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

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

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 标签的自定义版本，带有预设。

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

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