在前端开发中，我们使用 Storybook 来搭建 UI 组件库。而在进行组件库测试的时候，我们经常需要在不同设备上测试 Storybook 页面。在这种情况下，一个简单且可行的方式是使用 QR code 工具。本文将介绍如何使用 npm 包 storybook-qr 实现 Storybook 页面的 QR code 显示。
什么是 Storybook
Storybook 是一个 UI 组件开发环境，为开发者提供了创建、维护和测试 UI 组件的环境。它可以帮助开发者在隔离的环境中开发和测试组件，这样不仅可以减少代码之间的耦合度，而且还可以提高组件的可重用性。另外，Storybook 还提供了插件机制和生命周期钩子函数，使得我们可以方便地扩展功能和集成其他工具。
storybook-qr 是什么
storybook-qr 是一个 Storybook 插件，它可以帮助我们在测试组件时展示 QR code，方便我们在手机上进行调试。
如何使用 storybook-qr
下面是一个使用 storybook-qr 的示例。
1. 安装 storybook-qr
npm install storybook-qr --save-dev
2. 启用 storybook-qr 插件
在 .storybook/main.js 中设置 addons：
module.exports = {
stories: ["../stories/**/*.stories.js"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"storybook-qr/register",
],
};3. 在故事页面中启用 storybook-qr 插件
在 *.stories.js 文件中，如 button.stories.js，添加如下代码：
-- -------------------- ---- ------- ------ - ------ - ---- --------------- ------ -------- ---- ------------- ------ ------- - ------ ----------- ---------- --------- ----------- --------- -- ------ ----- ------- - -- -- --------- --------------------------- ------ ----- --------- - -- -- -------------------------------
4. 运行 Storybook
npm run storybook
在浏览器中打开 Storybook，在右上角可以看到一个二维码按钮。点击该按钮会显示 STORYBOOK 的二维码，我们可以用手机扫描该二维码，然后在手机上查看我们的组件库。
结论
使用 storybook-qr 可以在开发组件库的过程中方便地进行页面调试和展示，提高开发效率。本文介绍了如何使用该插件，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005673481e8991b448e3b7e