Storybook 插件编号

在 UI 组件旁添加编号

开发脚本

• yarn start 在 watch 模式下运行 babel 并启动 Storybook
• yarn build 构建并打包你的插件代码

从 TypeScript 切换到 JavaScript

不想使用 TypeScript？我们提供一个便捷的 eject 命令： 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 演示使用 channel 进行双向通信。
• src/Tab.js 演示如何使用 useParameter 访问当前 story 的参数。

你的插件可能使用其中一个或多个模式。随意删除未使用的代码。相应地更新 src/preset/manager.js 和 src/preset/preview.js。

最后，在 src/constants.js 中配置你的插件名称。

元数据

Storybook 插件在 catalog 中列出并通过 npm 分发。catalog 通过查询 npm 注册表中的 package.json 中 Storybook 特定的元数据来填充。本项目已配置了示例数据。在 Addon metadata docs 中了解更多可用选项。

发布管理

设置

本项目配置使用 auto 进行版本发布管理。它会生成更新日志并推送到 GitHub 和 npm。因此，你需要配置对两者的访问权限：

• NPM_TOKEN 创建一个具有 读取和发布 权限的 token。
• GH_TOKEN 创建一个具有 repo 范围的 token。

然后打开你的 package.json 并编辑以下字段：

• name
• author
• repository

本地

要在本地使用 auto，在项目根目录下创建一个 .env 文件并添加你的 token。

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

最后，在 GitHub 上创建标签。将来更改包时，你会使用这些标签。

npx auto create-labels

如果你在 GitHub 上查看，现在会看到 auto 希望你使用的标签集。使用这些标签标记未来的 pull request。

GitHub Actions

此模板已配置 GitHub actions，以便在你向仓库推送任何内容时发布你的插件。

转到 Settings > Secrets，点击 New repository secret，然后添加你的 NPM_TOKEN。

创建发布

要在本地创建发布，你可以运行以下命令，否则 GitHub action 会为你创建发布。

yarn release

这将：

• 构建并打包插件代码
• 提升版本号
• 推送发布到 GitHub 和 npm
• 推送更新日志到 GitHub