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 中无意中改变了行为，然后恢复了 4.x 的行为，并 在 5.0.2 中弃用了扩展模式。
✅ 您是否使用主题？我们在 SB5 中重新设计了主题。
✅ 您是否使用 options 插件？我们在 SB5 中弃用了它，转而使用 story 参数（但目前它应该仍然有效）。
✅ 您是否使用 backgrounds / viewport / a11y 插件？现在使用参数进行配置（backgrounds / viewport / a11y）
✅ 您是否使用键盘快捷键？我们在 SB5 中改进了它们（但键盘快捷键现在是可配置的，所以如果您怀念旧的，可以使用它们）。
✅ 您是否依赖 Storybook 的 URL 结构？我们在 SB5 中对其进行了重新设计（但对 selectedKind/selectedStory 保持了向后兼容性）。
步骤 3：盈利！
您的 Storybook 现在正常工作了吗？那么是时候查看 Storybook 的新功能了。Storybook 5 拥有完全重新设计的 UI，具有以下亮点：
- 精美的新设计，带有精心制作的浅色和深色主题
- 新的画布工具栏，可快速直观地访问插件
- 经过改进的导航侧边栏，带有更好的菜单
- 重新设计的插件面板，带有方便的按钮可切换可见性
- 改进的键盘快捷键，并且用户可配置
在 《Meet Storybook’s new design》 中熟悉新 UI，并在您自己的项目中试用所有新功能。
至此，我们圆满结束！
希望到目前为止您已经成功升级到 SB5。如果是这样，恭喜您，欢迎来到史诗级升级，这将改善您的组件开发体验！
如果你在完成本指南时遇到了问题，或者完成了指南但仍然有问题，请执行以下步骤：
- 在我们的 Github issues 中搜索您的问题 — 也许其他人也遇到了相同的问题。
- 创建一个新问题来描述你的问题，最好附上一个公开仓库的链接，我们可以从中重现这个问题。
- 加入我们的公共 Discord 并在 #support 频道提问。我们是一个友好的社区，希望能帮助您完成升级。
— 来自 Storybook 团队的 ❤️