Storybook 擴充套件 Storybook backpack 版本切換器

切換 backpack 版本

開發腳本

• yarn start 以監看模式執行 babel 並啟動 Storybook
• yarn build 建置並打包您的擴充套件程式碼

從 TypeScript 切換至 JavaScript

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

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

包含什麼？

擴充套件程式碼位於 src 中。它示範了所有核心擴充套件相關的概念。三種 UI 範例

• src/Tool.tsx
• src/Panel.tsx
• src/Tab.tsx

它們與擴充套件本身一起在 src/manager.ts 中註冊。

管理狀態和與故事互動

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

您的擴充套件可能會使用其中一個或多個模式。您可以自由刪除未使用的程式碼。請相應地更新 src/manager.ts 和 src/preview.ts。

最後，請在 src/constants.ts 中設定您的擴充套件名稱。

中繼資料

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

發布管理

設定

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

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

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

• name
• author
• repository

本機

若要在本機使用 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，已設定為在有人推送到您的儲存庫時發布您的擴充套件。

前往 Settings > Secrets，按一下 New repository secret，並新增您的 NPM_TOKEN。

建立發行版本

若要在本機建立發行版本，您可以執行以下命令，否則 GitHub Action 會為您建立發行版本。

yarn release

這將會

• 建置並打包擴充套件程式碼
• 提升版本
• 將發行版本推送到 GitHub 和 npm
• 將變更日誌推送到 GitHub