storybook-addon-user-agent

这个 Storybook 插件将允许您在不同的 user-agent 下查看组件的渲染效果。

入门

首先，安装插件

yarn add -D storybook-addon-user-agent

注册插件

// addons.js
import 'storybook-addon-user-agent/dist/register';

完成！

与 bowser 配合使用

有时我们在项目中会使用 bowser 进行浏览器检测，这依赖于 user-agent 识别。由于我们希望在选择新的 user-agent 后，bowser 能够立即重新解析当前的 user-agent（这在 bowser 当前的主版本 v1.x 中可能无法实现，看起来在 v2 版本中会支持。对此我不太确定，如果我遗漏了什么，请更新我 🙏）。
在这种情况下，您可以使用我们此处提供的 bowser 模块。实际上，它只是一个扩展了原始 bowser 的模块，用于检测您是否正在 storybook 环境中工作，如果是，它会在每次执行时解析 user-agent，如果不是，它将像往常一样工作。

// change
import bowser from 'bowser';
// to
import bowser from 'storybook-addon-user-agent/bowser';

// usage is same as usual
// bowser.mobile, ...