简介
@storybook/addon-devkit 是 storybook 中一个非常有用的插件，它可以帮助我们更便捷地开发 storybook 的插件。
安装
- 首先需要在项目中安装 storybook，如果已经安装了 storybook，则跳过这一步。
npm install @storybook/react --save-dev
- 然后在项目中安装 @storybook/addon-devkit。
npm install @storybook/addon-devkit --save-dev
使用
- 首先需要在
.storybook/main.js中添加该插件。
module.exports = {
stories: ['../stories/**/*.stories.js'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-devkit', // 添加该插件
],
};- 然后在
.storybook/preview.js中注册该插件。
import { register } from '@storybook/addon-devkit';
register();示例
下面给出一个简单的示例，该示例展示了如何在 storybook 中创建自定义面板。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- --------------------
------ - --------- - ---- --------------------------
----- ------- - -- -- -
----- ------ -------- - ---------------------- ---------
----- ------- - -- -- -
--------------------
--
------ -
-----
------ ----------
-------------
------- ----------------------- ------------
------
--
--
----- -------------- - -- -- -
----- -------- ---------- - ----------------------
----- --- - ------------
------------------ -- -
----- ----------- - -- -- -------------------
------------------ -------------
------ -- -- -
------------------- -------------
--
-- ----------
------ ------ - -------- -- - -----
--
--------------------------- -
------ --- -------
------- -- ------ -- -- --------------- --------------- ---
---这段代码实现了一个名为 My Panel 的自定义面板，在面板中有一个文本和一个按钮，点击按钮可以修改文本。同时可以通过 api.emit('my-event') 触发自定义事件，从而展示该面板。
总结
@storybook/addon-devkit 可以帮助我们更便捷地开发 storybook 的插件。在使用过程中注意注册该插件，并遵循其提供的 API，可以很方便地开发出自己的 storybook 插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3157943b0ab45f74a8bd17