npm 包 Storybook 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，组件化已经成为了开发的标配。但是在组件化的过程中，我们也遇到了很多问题，比如组件的可复用性、兼容性等等。而 npm 包 Storybook 就是一个很好地解决了这些问题的工具。

什么是 npm 包 Storybook？

Storybook 是一个开源的 UI 开发环境，它允许我们在开发过程中，随时查看和调试组件库。它提供了一个独立的开发环境，可以实时查看和测试组件的各种状态，方便调试和开发。

安装与使用

在开始使用之前，我们需要首先全局安装 Storybook。步骤如下：

npm install -g @storybook/cli

安装完成后，我们就可以在项目中使用 Storybook 了。我们以 React 为例，先安装 React：

npm install react --save

然后在项目根目录下运行：

getstorybook

这个命令将会在你的项目中创建一个 .storybook 的文件夹，其中包含了一些必要的文件。

打开文件 .storybook/config.js，可以看到如下内容：

import { configure } from '@storybook/react';

function loadStories() {
  require('../stories/index.js');
}

configure(loadStories, module);

这里向你展示了如何配置 Storybook，configure 方法接收一个数组，数组中是一个个 JS 文件路径，这些路径应该是包含了需要展示的组件的。在这里，配置中的 require('../stories/index.js') 将会导入项目中的组件。

好了，现在我们就需要创建 stories 目录，并将需要展示的组件以文件的形式存放在这个目录下。

创建 Stories

在 stories 目录下，我们需要创建一个新的 JS 文件，用于展示组件。以一个 Button 组件为例：

import React from "react";
import { storiesOf } from "@storybook/react";

import Button from "../src/Button";

storiesOf("Button", module)
  .add("with text", () => <Button>Hello Storybook</Button>)
  .add("with emoj", () => <Button>😀 😎 👍 💯</Button>);

storiesOf 函数接受两个参数：展示的组件的名称和一个模块。

在 add 方法中，我们来编写该组件的各个状态。代码示例中，我们展示了一个带有文本的按钮，以及一个带有表情的按钮。

Storybook UI

好了，现在我们已经创建好了所有的 Stories。我们来运行 Storybook，并在浏览器中查看我们的组件吧：

npm run storybook

在浏览器中打开 http://localhost:9001，你会看到现在的一个空白页面。你需要使用导航栏来浏览你的组件：

你可以看到，所有的状态都被展示出来，并且 Storybook 还提供了交互式的组件开发环境。

在项目中使用 Storybook

现在我们已经能够在 Storybook 中完成组件的开发和测试了，但是我们需要如何在项目中使用这些组件呢？

第一步，我们需要将 npm 包中的组件编译成可供使用的文件，比如通过使用 Babel 将 React 代码转换为 ES5：

npm install --save-dev babel-cli babel-preset-react

然后，在根目录下新建 .babelrc，写入如下内容：

{
  "presets": ["babel-preset-react"]
}

现在我们已经为编译 React 组件做好了准备。接下来，我们需要使用 Webpack 来实现组件的打包。

将组件打包为可复用的文件

在 webpack 中，我们要使用 babel-loader 来处理 babel 编译。我们也需要它来将 ES6 转义为 ES5 并允许在我们项目的所有文件中使用 React（和其他一些新颖的 JavaScript 特性）。

npm install --save-dev webpack babel-loader

webpack.config.js 配置：

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

这只是一个简单的示例，仅仅向您展示了如何配置 loaders。

在项目中使用组件

好的，现在，我们已经将组件编译和打包为可复用的文件，它可以作为独立的模块在其他项目中使用。

只需要在你的项目的 package.json 中添加依赖：

    "dependencies": {
        "my-awesome-storybook-components": "1.0.0"
    }

然后在你项目的 JS 文件中使用它：

import { Button } from "my-awesome-storybook-components";

ReactDOM.render(
        <Button>Hello, World!</Button>,
        document.getElementById('root')
);

现在，我们就可以使用 npm 包 Storybook 来提高我们的组件化开发的效率和质量了。

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