Storybook 插件 Storybook backpack 版本切换器
在 backpack 版本之间切换
开发脚本
yarn start
在监听模式下运行 babel 并启动 Storybookyarn 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
管理全局状态并修改 Story 的内容。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。因此,您需要配置对两者的访问权限
然后打开您的 package.json
文件并编辑以下字段
名称
作者
仓库
本地
要在本地使用 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