思惟导图开发-技术选择-七种武器（2）之Storybook.js

时间 2019-11-07

标签思惟开发技术选择 storybook.js storybook 栏目 JavaScript 繁體版

原文原文链接

本文将会介绍一个开源库storybook.jscss

在用Javascript 或者 Typescript 开发web组件库（library）的过程当中，若是想写一个使用这个库的示例（demo)。这个demo的代码结构用什么方式来进行组织呢。我看了不少知名开源项目的代码，不一样的项目对于这块代码的组织，我总结了如下，大体上有如下几种：html

demo 代码放在工程中的一个单独的文件夹中，demo代码是直接放在html 中，在demo 的html 中直接引用自身库打包发布后的代码。

比方说facebook 开源的github.com/facebook/dr… 这个项目的example代码中其中的一个demo叫作github.com/facebook/dr…前端

<html>
  <head>
    <meta charset="utf-8" />
    <title>Draft • Link Editor</title>
    <link rel="stylesheet" href="../../../dist/Draft.css" />
  </head>
  <body>
    <div id="target"></div>
    <script src="../../../node_modules/react/umd/react.development.js"></script>
    <script src="../../../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../../../node_modules/immutable/dist/immutable.js"></script>
    <script src="../../../node_modules/es6-shim/es6-shim.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
    <script src="../../../dist/Draft.js"></script>
    <script type="text/babel">
复制代码

demo的代码直接引用项目打包生成的文件node

<script src="../../../dist/Draft.js"></script>
复制代码

demo是一个使用packages.json来组织的项目

这种状况有两种作法：react

demo 代码和库代码放在同一个仓库中

这种状况又有好几种组织方式，下面列举两种常见的方案：webpack

demo代码用一个新的packages.json来组织例如draft.js下的这个示例github.com/facebook/dr…，这是一个用packages.json来组织的demo。 packages.json里面的内容以下：

{
  "name": "playground",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "codemirror": "^5.32.0",
    "draft-convert": "^2.0.1",
    "draft-js": "file:../../..",
    "immutable": "^3.8.2",
    "react": "^16.2.0",
    "react-codemirror2": "^3.0.7",
    "react-dom": "^16.2.0",
    "react-json-tree": "^0.11.0",
    "react-panelgroup": "^1.0.5",
    "react-scripts": "^1.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
复制代码

这里demo对draft.js的依赖使用了这样的写法git

"draft-js": "file:../../..",
复制代码

表示直接经过文件系统的相对路径进行查找，相比较与写版本号，这种写法的好处是库的代码发生了更新以后，只须要从新打包生成，demo代码中就能够看到库发生的变化，而不须要每次都将库推送到npm 仓库里面去。固然也能够经过yarn link 和yarn unlink来实现。es6

demo代码用webpack-dev-server来进行启动这样的话只要在库的工程目录下新建一个用于启动webpack-dev-server的webpack 配置文件, 而后使用webpack-dev-server 来启动示例。这是一种很是常见的作法。例如在开源项目slate github.com/ianstormtay… 中启动示例的方法

"server": "webpack-dev-server --config ./support/webpack/config.js",
复制代码

demo 代码和库代码在不一样的仓库中

这也是一种常见的作法，将库打包生成的代码发布到npm, demo代码依赖库代码。经过版本号，或者yarn link。github

正题

上面说了这么多，然而最深得我心的仍是使用storybook 这个库来启动示例。 storybook 对常见的前端开发框架都作了支持。具体怎么在项目中使用能够查看文档storybook.js.org/docs/basics…web

使用步骤

对于我最熟悉的react框架，使用storybook的步骤大体以下：

添加依赖

npm install @storybook/react --save-dev
复制代码

yarn add @storybook/react --dev
复制代码

确保react, react-dom, @babel/core, babel-loader 这些依赖也添加到了项目中，若是没有，也请添加。 2.添加npm script

{
  "scripts": {
    "storybook": "start-storybook -p 6006"
  }
}
复制代码

-p 指定端口号 3. 建立配置文件建立.storybook/config.js 做为storybook的基础配置

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

function loadStories() {
  require('../stories/index.js');
  // You can require as many stories as you need.
}

configure(loadStories, module);
复制代码

编写示例举个栗子： ../stories/index.js 是示例文件的路径

比方说在个人项目中建立了不少个demo,

import * as React from "react";

import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import { linkTo } from "@storybook/addon-links";

import { Button, Welcome } from "@storybook/react/demo";

import SimpleDemo from "./demo-blink-mind-react/SimpleDemo";
import AutoGenerateDepthForTest from "./demo-blink-mind-react/AutoGenerateDepthForTest";
import DemoScrollApi1 from "./demo-scroll-api/Demo1";
import DemoScrollApi2 from "./demo-scroll-api/Demo2";
import DemoScrollApi3 from "./demo-scroll-api/Demo3";

import DragDropDemo1 from "./demo-drag-drop/Demo1";
import DragDropDemo2 from "./demo-drag-drop/Demo2";
import DragDropDemo3 from "./demo-drag-drop/Demo3";
import DragDropDemo4 from "./demo-drag-drop/Demo4";
import DragDropDemo5 from "./demo-drag-drop/Demo5";
import DragDropDemo6 from "./demo-drag-drop/Demo6";
import DragDropDemo7 from "./demo-drag-drop/Demo7";
import DragDropDemo8 from "./demo-drag-drop/Demo8";

storiesOf("Welcome", module).add("to Storybook", () => (
  <Welcome showApp={linkTo("Button")} />
));

storiesOf("blink-mind-react-demo", module)
  .add("SimpleDemo", () => <SimpleDemo />)
  .add("AutoGenerateDepthForTest", () => <AutoGenerateDepthForTest />);

storiesOf("drag-scroll-demo", module)
  .add("demo1", () => <DemoScrollApi1 />)
  .add("demo2", () => <DemoScrollApi2 />)
  .add("demo3", () => <DemoScrollApi3 />);

storiesOf("drag-drop", module)
  .add("demo1", () => <DragDropDemo1 />)
  .add("demo2", () => <DragDropDemo2 />)
  .add("demo3", () => <DragDropDemo3 />)
  .add("demo4", () => <DragDropDemo4 />)
  .add("demo5", () => <DragDropDemo5 />)
  .add("demo6", () => <DragDropDemo6 />)
  .add("demo7", () => <DragDropDemo7 />)
  .add("demo8", () => <DragDropDemo8 />);
复制代码

能够用这样的代码将demo进行分组

storiesOf("blink-mind-react-demo", module)
  .add("SimpleDemo", () => <SimpleDemo />)
  .add("AutoGenerateDepthForTest", () => <AutoGenerateDepthForTest />);
复制代码

启动storybook

npm run storybook
复制代码

打开浏览器的localhost:6006能够看到storybook的主界面。很是的方便。省去了不少本身去搭积木的时间。

好的，关于storybook 怎么使用就介绍完了。

storybook 高级配置

storybook 如何支持typescript , 各类css 预处理器呢？在storybook中也可使用webpack的各类loader。只须要在.storybook目录下建立一个webpack.config.js，在里面写webpack 的各类配置，支持typescript, css预处理器，以及其余loader和plugin支持的功能。具体怎么配置，能够参考: github.com/awehook/bli…