Storybook package.json 插件

显示与故事文件最接近的 `package.json` 文件。主要用于 Lerna 与 Storybook 联用。

让我们来看这个例子

.
├── .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 加载器

使用此钩子来创建自定义 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>);

你可以同时使用自定义装饰器和加载器——如果两者都被使用，则将优先使用装饰器中的 `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")
          }
        ]
      }
    ]
  }
};