Storybook 5 迁移指南
轻快地跃入美好的全新开发者体验
这份逐步指南将引导您迁移到 Storybook 5.0 (SB5)。
如果您是 Storybook 的活跃用户，在仅仅几个月前将您的 Storybook 升级到 4.0 之后，您可能会不耐烦。
我很高兴地告诉您，与之前相比，5.0 版本的升级简直是小菜一碟。您最大的转变将是习惯 Storybook 华丽而实用的新设计。完全值得。
本指南将带您了解
- 升级 Storybook 包
- 处理重大更改
- 适应新的 UI
步骤 1：包升级
首先要做的是升级您的 Storybook 包，@storybook/*。
注意： 如果您是从 3.x 版本升级，我建议您先按照 Storybook 4 升级指南 进行操作，然后再回到这里。Storybook 4 包含了对 Babel 和 Webpack 的重大升级，这是一个相当具有破坏性的更改。一旦您完成了这些，5.x 版本的升级应该会一帆风顺。
所以从现在开始，我假设您是从 4.x 版本升级。
如果您使用 yarn，您可以像这样交互式升级
yarn upgrade-interactive --latest或者如果您使用 npm，这将完成任务
npx npm-check-updates '/storybook/' -u && npm install然后尝试运行 Storybook
yarn storybook如果浏览器打开并且看起来大致正常，那么您已经完成了大部分工作，您可以跳到步骤 3。
步骤 2：修复重大更改
如果您没有看到您的 Storybook，那么是时候找出哪些重大更改让您遇到了麻烦。此版本是 semver 主要版本，因此有一些。
查看终端和浏览器控制台中的错误消息应该能给您一些关于哪里出错的线索。
话虽如此，以下是一些您应该了解的更改
✅ 您是否在“完全控制”模式下使用自定义 webpack 配置？如果是，我们简化了 SB5 中的 API，这是一个重大更改。
✅ 您是否在“扩展”模式下使用自定义 webpack 配置？如果是，我们在 5.0.0 版本中意外地更改了行为，然后在 5.0.2 版本中恢复了 4.x 版本的行为并弃用了扩展模式。
✅ 您是否使用主题？我们重新设计了 SB5 中的主题。
✅ 您是否使用 options 插件？我们在 SB5 中弃用了它，转而使用 story 参数（但现在它仍然应该可以工作）。
✅ 您是否使用 backgrounds / viewport / a11y 插件？现在使用参数配置它们（背景 / 视口 / a11y）
✅ 您是否使用键盘快捷键？我们在 SB5 中改进了它们（但键盘快捷键现在是可配置的，所以如果您想念旧的快捷键，您可以使用旧的）。
✅ 您是否依赖 Storybook URL 结构？我们在 SB5 中改进了它（但保持了对 selectedKind/selectedStory 的向后兼容性）。
步骤 3：成功！
您的 Storybook 现在可以工作了吗？那么是时候查看 Storybook 的新功能了。Storybook 5 拥有一个完全重新设计的 UI，具有以下亮点
- 美观的新设计，精心制作了浅色和深色主题
- 新的画布工具栏，可快速直观地访问插件
- 经过改进的导航侧边栏，具有更好的菜单
- 重新设计的插件面板，带有方便的按钮来切换可见性
- 改进的键盘快捷键，也是用户可配置的
在 了解 Storybook 的新设计 中熟悉新的 UI，并在您自己的项目中体验所有新功能。
就这样！
希望此时您已成功升级到 SB5。如果是这样，祝贺您，欢迎体验组件开发体验的史诗级升级！
如果您在完成本指南时遇到问题，或者完成了指南但仍然有问题，请执行以下步骤
- 在我们的 Github issues 中搜索您的问题 — 其他人可能也遇到了同样的问题。
- 创建一个新的 issue 描述您的问题，最好提供一个指向我们可以重现该问题的公共仓库的链接。
- 加入我们的公共 Discord 并在 #support 频道上提问。我们是一个友好的社区，希望帮助您完成升级。
— 来自 Storybook 团队的 ❤️