思惟導圖開發-技術選擇-七種武器（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

  1. 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

  1. 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的步驟大體以下：

  1. 添加依賴
npm install @storybook/react --save-dev
複製代碼

or

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);
複製代碼
  1. 編寫示例 舉個栗子： ../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 />);
複製代碼
  1. 啓動storybook
npm run storybook
複製代碼

打開瀏覽器的localhost:6006能夠看到storybook的主界面。很是的方便。省去了不少本身去搭積木的時間。

storybook.jpg

好的，關於storybook 怎麼使用就介紹完了。

storybook 高級配置

storybook 如何支持typescript , 各類css 預處理器呢？在storybook中也可使用webpack的各類loader。只須要在.storybook目錄下建立一個webpack.config.js， 在裏面寫webpack 的各類配置，支持typescript, css預處理器，以及其餘loader和plugin支持的功能。 具體怎麼配置，能夠參考: github.com/awehook/bli…

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程