npm 包 @storybook/polymer 使用教程

在现代前端应用中，构建交互式的 UI 组件库是非常重要的一项任务。而 Storybook 是一个工具，它能够帮助我们构建和展示我们创建的 UI 组件库。@storybook/polymer 是 Storybook 的 Polymer 框架适配器。本文将介绍如何使用 @storybook/polymer 帮助我们开发、测试和展示我们的 Polymer 组件库。

安装

首先，我们需要安装 @storybook/polymer 和其他的依赖项：

npm install --save-dev @storybook/polymer polymer-cli

创建 Storybook 配置文件

接下来，我们需要创建 Storybook 的配置文件。我们可以通过在项目的根目录下创建一个名为 .storybook 的文件夹来实现这一点。然后，在该文件夹内建立一个名为 config.js 的文件，并添加以下代码：

import { configure } from '@storybook/polymer';
configure(require.context('../stories', true, /\.stories\.js$/), module);

然后，我们需要在我们的项目根目录下创建 stories 文件夹，并在其中创建一个名为 Button.stories.js 的文件，以便我们可以为我们的 Button 组件创建一些 Storybook stories。

创建我们的 Polymer 组件

接下来，我们需要创建我们的 Polymer 组件。我们的 Button 组件需要支持一个 label 的属性，并在点击时触发一个自定义事件 button-clicked。以下是一个简单的 Button 组件的例子：

-- -------------------- ---- -------
----- ------------ ---------------------------------------

----------- ---------------
  ----------
    ------- -------------------------- ----- -----------
  -----------

  --------
    ----- -------- ------- --------------- -
      ------ --- ---- - ------ ------------ -

      ------ --- ------------ -
        ------ -
          ------ -
            ----- -------
            ------ ------ ----
          -
        --
      -

      -------------- -
        ---------------------- ----------------------------- - -------- ---- ----
      -
    -

    ---------------------------------- ----------
  ---------
-------------

创建 Storybook stories

现在，我们已经准备好为我们的 Button 组件创建一些 stories 了。在我们的 stories/Button.stories.js 文件中，我们将导出一个名为 default 的 story：

import { storiesOf } from '@storybook/polymer';
import { html } from 'lit-html';
import '../my-button';

storiesOf('Button', module)
  .add('default', () => html`<my-button label="Click me!"></my-button>`);

这里，我们使用了 LitHTML 模板，而不是 Polymer 的模板语法，因为 Storybook 默认支持 LitHTML。

运行我们的 Storybook

现在，我们已经完成了我们的组件和 stories，我们可以运行 Storybook 了。在命令行中运行以下命令：

npm run storybook

然后，你就可以在你的浏览器中运行你的 Storybook 了！看起来像这样：

你可以在左侧的导航栏中看到我们的 Button 组件，并在右侧的窗格中查看我们的 story。

总结

@storybook/polymer 为我们的 Polymer 组件提供了一个方便的方法来构建、测试和展示我们的 UI 组件库。在这篇文章中，我们学习了如何安装 @storybook/polymer，如何创建 Storybook 配置文件，如何创建 Polymer 组件，如何创建 Storybook stories 以及如何运行我们的 Storybook。通过理解这些概念并实践它们，我们可以创建出更好的 UI 组件库，并能更轻松地开发和维护它们。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb593b5cbfe1ea0611454