Storybook 分支切换器

一个 Storybook 7+ 插件，用于在多个 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 的配置文件。但是您可以在其他位置创建此文件，并将路径传递给 CLI，使用 --config 或 --c 参数。

示例：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（已打开的 PR）

此提供程序使您能够为 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（已打开的 PR）

此提供程序使您能够为 GitHub 存储库中的每个已打开的 PR 生成一个 Storybook 实例。

键	默认值	描述
type	-	(必填) 必须为 "github"
owner	-	(必填) GitHub 拥有者的名称
repository	-	(必填) 要定位的 Github 存储库名称

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

使用 Gitlab（已打开的 MR）

此提供程序使您能够为 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，则需要进行一些额外的设置。

✅ 开箱即用：根路径	🛠️ 需要设置：子路径
https://127.0.0.1:6006	https://127.0.0.1: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。