简介
@croquiscom/storybook-app-mithril-2 是一款基于 mithril 框架的 storybook 应用，它可以帮助前端开发者更好地展示和测试自己的组件库。在本文中，我们将深入探讨如何使用该 npm 包，并提供详细的代码示例。
安装
首先，你需要在你的项目中引入 @croquiscom/storybook-app-mithril-2，你可以在命令行中运行以下命令：
npm install --save-dev @croquiscom/storybook-app-mithril-2
配置
接下来，你需要在你的项目中配置 storybook。在你的项目根目录中创建一个名为 storybook 的目录，并创建一个名为 main.js 的文件。在该文件中，你需要做以下配置：
-- -------------------- ---- -------
----- - ------------ - - ------------------------------
--------------- -- --------- ----
-------------- - -
-------- ---------------------------------
------- -
---------------------------
-------------------------
----------------------------------------------
--
--这里，我们使用了 @storybook/mithril 模块提供的 addDecorator 方法对 stories 进行修饰，使用了 @croquiscom/storybook-app-mithril-2 模块提供的 register 方法来注册 storybook 应用。需要注意的是，需要将 stories 目录下的所有 stories 文件均设置为 .m.js 后缀，以确保 storybook 正确地解析 mithril 文件。
接下来，在项目根目录下创建一个文件夹 .storybook，然后在其中创建一个 addons.js 文件，你需要在该文件中做以下配置：
import '@croquiscom/storybook-app-mithril-2/dist/app.css';
这样，当你启动 storybook 应用时，应用中的样式文件将会被正确加载。
场景
除了配置之外，你还需要编写需要在 storybook 应用中展示的场景（即 stories）。在创建好场景后，你将可以管理和测试你的组件库。你可以在 storybook 目录下的 stories 目录中创建新的 mithril 文件，然后使用以下代码示例进行编写：
-- -------------------- ---- -------
------ - ------ - ---- ---------------------------
------ - ---------- ---- - ---- -------------------------
------ ------ ---- -------------
------ ------- -
------ ---------
---------- -------
----------- ------------
--
------ ----- -------- - -- -- --
----- -- -- -
------- ----------------------------
-------------- ------ ---------
---------
-
---
------ ----- --------- - -- -- --
----- -- -- -
------- ----------------------------
-- -- -- --
---------
-
---这里，我们使用了 @storybook/addon-actions 模块提供的 action 方法来展示按钮被点击的信息，使用了 @storybook/addon-knobs 模块提供的 withKnobs 方法来添加可编辑的 knobs，使用 mithril 组件 Button 来展示组件样式。
启动
现在，你可以在命令行中输入以下命令来启动 storybook 应用：
npm run storybook
到此，你已经可以愉快地对你的组件进行管理和测试了！
结论
总的来说，@croquiscom/storybook-app-mithril-2 对于前端开发者来说是一个相当实用的工具，它提供了一种便捷、快速和易于管理和测试的方式来展示和使用自己的组件库。在本文中，我们学习了如何配置和启动该应用，并提供了详细的代码示例。希望这篇文章能帮助你更好地了解并使用@croquiscom/storybook-app-mithril-2。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/128073