Storybook 擴充套件 hoge

hoge

開發腳本

• 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 中註冊。

管理狀態並與故事互動

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

您的擴充套件可能會使用其中一種或多種模式。請隨意刪除未使用的程式碼。並相應地更新 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 並編輯下列欄位

• 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