Storybook 分支切换器

一个 Storybook 7+ 插件，用于在多个 Git 分支之间导航。它也是一个命令行工具，可以根据您的 Git 工作流程为每个分支自动生成一个实例。

安装

使用 npm 安装以下模块

npm i --save-dev storybook-branch-switcher

或使用 yarn

yarn add -D storybook-branch-switcher

然后，将以下内容添加到 .storybook/main.js 中

module.exports = {
  addons: ["storybook-branch-switcher"],
};

CLI

此包导出一个名为 sb-branch-switcher 的脚本，它将根据您的 Git 工作流程自动为每个分支生成一个 Storybook 实例。（我们支持 Git 子模块，并且任何检出都只会在干净的工作区中运行。）

配置

CLI 默认需要一个位于 .storybook/.branches.json 的配置文件。但您可以在其他位置创建此文件，并使用 --config 或 --c 参数将路径传递给 CLI。

示例：sb-branch-switcher --config libs/storybook-host/.storybook/.branches.json

以下是所有可用选项的说明

键	默认值	描述
from	-	（必填） 构建后 Storybook 实例的所在位置
to	-	（必填） 所有 Storybook 实例将要复制到的位置
directory	当前文件夹	项目所在的绝对路径
script_name	build-storybook	构建 Storybook 的 NPM 脚本名称
default_branch	master	您的默认 Git 分支
default_root	true	将默认分支的实例复制到根文件夹
provider	-	用于检索要处理的分支和提交的配置

使用 Bitbucket（已打开的拉取请求）

此提供程序允许您为 Bitbucket 仓库中每个已打开的 PR 生成一个 Storybook 实例（支持云端和本地服务器）。

键	默认值	描述
type	-	（必填） 必须是 "bitbucket"
project	-	（必填） 要定位的 Bitbucket 项目名称
repository	-	（必填） 要定位的 Bitbucket 仓库名称
url	https://bitbucket.org	要连接的 Bitbucket 主机

授权（可选）

如果 Bitbucket 实例需要授权，您可以使用以下任一环境变量选项。

• 基本登录详情：BITBUCKET_USERNAME 和 BITBUCKET_PASSWORD
• 使用 HTTP Rest API 的访问令牌：BITBUCKET_TOKEN

使用 GitHub（已打开的拉取请求）

此提供程序允许您为 GitHub 仓库中每个已打开的 PR 生成一个 Storybook 实例。

键	默认值	描述
type	-	（必填） 必须是 "github"
owner	-	（必填） GitHub 所有者名称
repository	-	（必填） 要定位的 Github 仓库名称
url	https://api.github.com	要连接的 Github 主机

您必须设置 GITHUB_TOKEN 环境变量才能访问 GitHub.com API。

使用 Gitlab（已打开的合并请求）

此提供程序允许您为 Gitlab 仓库中每个已打开的 MR 生成一个 Storybook 实例。

键	默认值	描述
projectId	-	（必填） 项目的 projectId
url	https://gitlab.com	要连接的 Gitlab 主机

您必须设置 GITLAB_TOKEN 环境变量才能访问 Gitlab.com API。

配置文件示例

{
  "from": "dist/storybook",
  "to": "dist/storybook-bundle",
  "default_branch": "master",
  "default_root": true,
  "provider": {
    "type": "bitbucket",
    "project": "my-project",
    "repository": "my-design-system"
  }
}

常见问题

如何将我的 storybook 托管在子路径中？（例如 GitHub Pages）

此插件开箱即用支持在根路径托管 Storybook，但如果您想将 storybook 托管在子路径中，则需要进行一些额外的设置。

✅ 开箱即用：根路径	🛠️ 需要设置：子路径
http://localhost:6006	http://localhost:6006/some/path
https://sub.example.com	https://your-username.github.io/your-repo

只需在您的 .storybook/preview.js 文件中进行这些更改即可，此示例是发布到 GitHub Pages。

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 6731af8..7587cb6 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,4 +1,5 @@
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
     controls: {
@@ -10,4 +11,18 @@ const preview = {
   },
 };

+/* Any envvar prefixed with STORYBOOK_ will be available in the built storybook, ie. preview.js
+ * See: https://storybook.org.cn/docs/configure/environment-variables
+ *
+ * Set STORYBOOK_PUBLISH_FOR_WEB=true in your build environment, along with the
+ * domain and path you'd like to host from.
+ */
+if (process.env["STORYBOOK_PUBLISH_FOR_WEB"]) {
+  preview.parameters = {
+    branches: {
+      hostname: `your-username.github.io/your-repo`,
+    }
+  }
+}
+
 export default preview;

然后您只需在运行 sb-branch-switcher 命令的任何构建环境中设置 STORYBOOK_PUBLISH_FOR_WEB=true。

本地测试

1. 将 .storybook/preview.js 中的 hostname 设置为 localhost:6006/storybook-bundle，
2. 通过 STORYBOOK_PUBLISH_FOR_WEB=true sb-branch-switcher <其他选项> 进行构建
3. 运行 npx http-server dist 以在更深的子路径中提供本地 storybook。