前言
Storybook 是一个 UI 组件开发环境，能够让你在独立的环境中浏览、开发、测试你的组件，而不用考虑组件之间的关系。它支持各种前端框架，如 React、Vue、Angular、Svelte 等。在本文中，我们将着重讲解如何在 Svelte 中使用 Storybook。
安装
安装 npm 包 @storybook/svelte：
npm install @storybook/svelte --save-dev
配置
- 在项目的根目录下创建一个
.storybook的文件夹，然后在该文件夹下创建config.js文件:
-- -------------------- ---- -------
-------------- - -
-------- --------------------------- ----------------------------------------
------- -------------------------- -------------------------------
-- ------ -----
-------------- -
---- -----
--
--- 在项目的
package.json文件中添加以下命令：
{
"scripts": {
"storybook": "start-storybook -p 6006",
"storybook:build": "build-storybook"
}
}storybook: 启动 Storybook 的开发服务器，监听默认端口6006storybook:build: 将 Storybook 编译成静态文件
- 在项目的
rollup.config.js文件中添加 svelte 插件：
-- -------------------- ---- -------
------ ------ ---- -----------------------
------ ------- -
-- ---
-------- -
-- ---
--------
-- ---
---
--
-- ---
-在 svelte 插件中，我们需要传递一些参数来配置项目，具体内容可以参考官方文档。
写一个组件并使用 Storybook 展示
在本文中，我们将以一个 Hello World 组件为例，来讲解如何使用 Storybook。
在项目的 src/components 目录下创建文件 HelloWorld.svelte：
<script>
export let name = 'world';
</script>
<h1>Hello {name}!</h1>接下来在 src/stories 目录下创建文件 HelloWorld.stories.js：
-- -------------------- ---- ------- ------ ---------- ---- ---------------------------------- ------ ------- - ------ -------------- ------- ---------- ----------- -- ----- -------- - -- ------- -- -- -- ---------- ----------- ------ - ------- -- --- ------ ----- ------- - ------------------ ------------ - - ----- ------- -- ------ ----- ---- - ------------------ --------- - - ----- ----- --
在上述代码中，我们通过 Template() 函数完整地组装了一个组件和组件参数，并通过 bind() 函数创建了一个新的组件。然后我们导出两个组件，Default 展示默认情况下的 Hello World，而 ToMe 展示了 Hello You。
最后在 src/main.js 中渲染出 Storybook 组件：
-- -------------------- ---- ------- ------ ----------------------- ------ - --------- - ---- -------------------- ----- -------- - -- -- - -- --------- ----- -- ------------------------------------------------ -- ------------------- --------
现在，我们就可以运行 npm run storybook 命令以启动 Storybook，与此同时，你的 Hello World 组件也被展示在 Storybook 的页面中了。
结束语
通过本文，你应该已经学会了如何在 Svelte 项目中使用 Storybook 了。如果你想要了解更多的 Storybook 相关知识，可以去官网查看更多文档和示例。我们相信，通过 Storybook 的帮助，你将能够更加方便地开发出优秀的 UI 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb594b5cbfe1ea0611457