前言
前端工程化的发展使得我们使用大量的 npm 包来简化开发。storybook 是一个场景复现框架,可以协助开发者在开发阶段中快速调试和开发组件。其中,storybook-addon-source 是其中一个 npm 包,它可以让我们轻松查看组件的原始代码,非常方便。在本篇文章中,我们将为您介绍 storybook-addon-source 的使用方法。
安装
首先,我们需要在项目目录下安装 storybook 和 storybook-addon-source:
--- ------- ---------------- ---------- --- ------- ------------------------ ----------
添加 storybook 引模块和 addon 到 package.json 中:
---------- - ------------ ----------------- -- --------------- - --------------------------- ---------- ------------------- --------- -
使用
启动 storybook:
--- --- ---------
在 .storybook/main.js 中,添加 addon:
-------------- - - ------- - --------------------------- ------------------------- - ----- ------------------------------- -------- - ----- - ----- ------------------- -------- ------------------------ ----------- -- -------------- - --------------- - ----------- --- ------------ ----- -- -- -- -- -- --
在 .storybook/preview.js 中,将文件源代码传递给 addon:
------ - ------------ - ---- ------------------- ------ - ---------- - ---- ------------------------------- -------------------------
然后就可以在 storybook 中使用这个 addon:
------ ----- ---- -------- ------ - --------- - ---- ------------------- ------ - ------ - ---- ----------- ------ - ---------- ----- -------- ------ - ---- ------------------------- ------------------- ------- ------------------------ ---------- ------ -- -- - ------- ----------------------------- -------- -------------- ------ --------- --------- -- - ------- - ----- ----- ----- ------ ---
这里定义了一个带有源代码的组件,当 show 属性设置为 true 时,源代码将被显示。
结论
storybook-addon-source
是一个非常有用的工具,它可以让我们在代码开发过程中更快速的调试和开发组件,尤其是当我们在开发复杂组件时,可以展示组件源代码。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/5eedbba2b5cbfe1ea0611996