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