库中的框架绑定

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

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

示例

为要创建绑定的依赖项向库添加 peerDependency。

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

这将使依赖项在您的库中可用，允许您编写如下代码。 请注意 className prop，它为 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 组件的自定义版本，其 props 预设为您的组织的首选项
• ./svelte/link：Svelte 的 a 标签的自定义版本，带有预设。

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

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