Storybook 擴充功能編號

在 UI 元件旁新增編號

開發指令碼

• yarn start 以監看模式執行 babel 並啟動 Storybook
• yarn build 建置並封裝您的擴充功能程式碼

從 TypeScript 切換到 JavaScript

不想使用 TypeScript？我們提供方便的退出指令：yarn eject-ts

這會將所有程式碼轉換為 JS。這是一個破壞性的過程，因此我們建議您在開始撰寫任何程式碼之前執行此操作。

包含哪些內容？

擴充功能程式碼位於 src 中。它示範了所有核心擴充功能相關的概念。三個 基於 UI 的範例

• src/Tool.js
• src/Panel.js
• src/Tab.js

它們與擴充功能本身一起在 src/preset/manager.js 中註冊。

管理狀態並與 Story 互動

• src/withGlobals.js 和 src/Tool.js 示範如何使用 useGlobals 來管理全域狀態和修改 Story 的內容。
• src/withRoundTrip.js 和 src/Panel.js 示範如何使用頻道進行雙向通訊。
• src/Tab.js 示範如何使用 useParameter 來存取目前 Story 的參數。

您的擴充功能可能會使用其中一種或多種模式。請隨意刪除未使用的程式碼。相應地更新 src/preset/manager.js 和 src/preset/preview.js。

最後，在 src/constants.js 中設定您的擴充功能名稱。

中繼資料

Storybook 擴充功能列在目錄中，並透過 npm 發佈。目錄是透過在 npm 的註冊表中查詢 package.json 中 Storybook 特定的中繼資料來填寫的。此專案已設定範例資料。在 擴充功能中繼資料文件中瞭解更多可用選項。

發佈管理

設定

此專案已設定為使用 auto 進行發佈管理。它會產生變更記錄，並將其推送到 GitHub 和 npm。因此，您需要設定對兩者的存取權限

• NPM_TOKEN 建立一個具有讀取和發佈權限的權杖。
• GH_TOKEN 建立一個具有 repo 範圍的權杖。

然後開啟您的 package.json 並編輯以下欄位

• 名稱
• 作者
• 儲存庫

本地

若要在本地使用 auto，請在專案根目錄建立一個 .env 檔案，並將您的權杖新增至其中

GH_TOKEN=<value you just got from GitHub>
NPM_TOKEN=<value you just got from npm>

最後，在 GitHub 上建立標籤。您將在未來對套件進行變更時使用這些標籤。

npx auto create-labels

如果您在 GitHub 上檢查，您現在會看到一組 auto 希望您使用的標籤。使用這些標籤來標記未來的提取請求。

GitHub Actions

此範本已預先設定 GitHub Actions，可在有人推送到您的儲存庫時發佈您的擴充功能。

前往 設定 > 機密，按一下 新增儲存庫機密，然後新增您的 NPM_TOKEN。

建立發行版本

若要在本地建立發行版本，您可以執行下列命令，否則 GitHub 動作會為您發佈。

yarn release

這將會

• 建置並封裝擴充功能程式碼
• 遞增版本
• 將發行版本推送到 GitHub 和 npm
• 將變更記錄推送到 GitHub