程式庫中的框架綁定

在程式庫套件中的框架綁定，透過直接在程式庫中利用框架的 API，將您的程式庫程式碼與框架更深入地整合。

若要執行此操作，請在程式庫的 package.json 中使用 peerDependencies 欄位，這會使框架 API 可在您的程式庫中使用，而無需直接在套件中安裝它。

範例

將 peerDependency 新增至您的程式庫，以用於您打算建立綁定的相依性。

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

這將使相依性在您的程式庫中可用，讓您可以編寫如下程式碼。請注意 className 屬性，它為單一儲存庫中的此元件設定預設樣式，並且可以在 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": "*"
  }
}

此概念可以應用於您想要提供綁定的任何數量的框架或其他相依性。