在前端开发过程中，我们经常会用到 Storybook 来进行组件的开发和调试。而使用 Storybook 进行组件开发的关键在于如何编写好的 Storybook 配置文件以及 Storybook 中的组件文档。针对这些需求，我们可以使用 npm 包 storysource 来自动生成组件的源代码和文档。
安装
安装 storysource 只需要在终端输入以下命令即可：
npm install @storybook/addon-storysource --save-dev
配置
在项目中，如果使用的是 Vue.js 框架，则可以在 .storybook/main.js 中进行配置：
-- -------------------- ---- -------
-------------- - -
-------- ---------------------------------------------
------- -
------------------------
-
----- -------------------------------
-------- -
----- -
-------- --------------------------------
--
-------------- -
--------------- - ----------- --- ------------ ----- --
--
--
--
--
--上面的配置中，rule.include 表示需要生成 Storybook 文档和源代码文件的文件夹范围。如果需要修改生成的源代码的格式，则可以在 loaderOptions.prettierConfig 中进行配置。
使用
配置好了之后，我们可以在组件的 Story 中添加 source: { excludeDecorators: true }，就可以开启 storysource 插件了。例如，对于如下组件：
-- -------------------- ---- -------
----------
---- -------------- ------------------ ------------------------
-------------
------
-----------
--------
------ ------- -
----- ---------
------ -
----- -
----- -------
-------- ----------
--
--
--------- -
----------- -
------ --------- - ----------
--
--
--
---------
-------
------- -
-------- -------------
-------- -----
-------------- ----
------- --------
---------- -----
------ -----
-
--------------- -
----------------- --------
-
-------------- -
----------------- --------
-
--------我们可以在 Story 中添加 storysource 描述：
-- -------------------- ---- -------
------ ------ ---- ---------------
------ ------- -
------ ---------
---------- -------
--------- -
----- - -------- - ----- -------- -------- ----------- --------- - --
--
----------- -
----- -
------------ -
----------
-- ------ ------ --------- ---- ---- ----- --- -- --------- -- ----------
--
--
------- -
------------------ -----
--
--
--
----- -------- - ------ - -------- -- -- --
----------- - ------ --
------ ----------------------
--------- -------- ---------------- ---------------------------------
-------- -
-------- ------------------
--
---
------ ----- ------- - ------------------
------------ - -
----- ----------
--------- ---------
--上面代码中，我们可以看到 parameters.source.excludeDecorators 设置为 true，这将会排除掉 Story 配置中的 decorator 信息，然后在 Storybook 中展示组件的源代码。
打开 Storybook 可以看到这样的效果：
如上图所示，我们在 Storybook 中可以有效的看到组件的源代码并且进行调试。
除了可以在 Storybook 中展示组件的源代码和文档之外，还可以通过 HTML 或模板语言以下方式引入展示源代码：
<!-- HTML 方式 -->
<iframe src="story://Button--default"></iframe>
<!-- 模板语言方式 -->
<iframe :src="`story://${encodeURIComponent('Button--default')}`"></iframe>总结
使用 npm 包 storysource 可以简化文档和源代码的生成流程，提高前端工程师的开发效率。在本文中，我们详细介绍了 npm 包 storysource 的安装和配置，同时详细讲解了如何在 Storybook 中展示组件源代码，以及其他展示方式。希望这篇文章可以对需要使用 npm 包 storysource 的前端工程师提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822d4a