Storybook package.json 插件

显示离故事最近的 package.json 文件。主要在使用 Storybook 和 Lerna 时很有用。

让我们看看这个例子

.
├── .storybook
├── lerna.json
├── package.json
└── packages
    ├── alpha
    │   ├── index.js
    │   ├── alpha.stories.js
    │   └── package.json
    ├── beta
    │   ├── index.js
    │   ├── beta.stories.js
    │   └── package.json
    └── usage
        ├── index.js
        ├── usage.stories.js
        └── package.json

使用这个 storybook-addon-package-json，故事将有一个标签页显示其 package.json 内容

安装和使用

首先，安装插件

npm install -D storybook-addon-package-json

将此行添加到你的 addons.js 文件中

import "storybook-addon-package-json/register";

a) 作为 webpack loader

将此钩子用于自定义 webpack.config。这将在每个故事中生成一个装饰器调用，并自动搜索 package.json

module.exports = {
  module: {
    rules: [
      {
        test: /\.stories\.jsx?$/,
        use: [
          {
            loader: require.resolve("storybook-addon-package-json/loader")
          }
        ]
      }
    ]
  }
};

b) 作为故事中的装饰器

无需配置 storybook-addon-package-json/loader，即可将自定义的 package.json 注入到故事中

import React from "react";
import { storiesOf } from "@storybook/react";
import withPackageJson from "storybook-addon-package-json";
import packageJson from "./package.json";

const stories = storiesOf("Example", module).addDecorator(
  withPackageJson(packageJson)
);
stories.add("default", () => <div>story example</div>);

你始终可以使用自定义装饰器和 loader - 当两者都使用时，将使用来自装饰器的 package.json。

与 @storybook/addon-storysource 的使用

由于此包修改了原始故事源代码，你应该在 storybook-addon-package-json/loader 之前使用 @storybook/addon-storysource/loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.stories\.jsx?$/,
        use: [
          {
            loader: require.resolve("storybook-addon-package-json/loader")
          },
          {
            loader: require.resolve("@storybook/addon-storysource/loader")
          }
        ]
      }
    ]
  }
};