加入直播会话:美国东部时间周四上午 11 点,Storybook 9 发布与 AMA

将您的 Storybook 组件用作联邦模块

在 Github 上查看

storybook-module-federation

将您的 Storybook 组件用作联邦模块

要求

在 Storybook 中使用模块联邦需要使用 Webpack 5。Storybook 在 6.2 版本中添加了对 Webpack 5 的支持。在使用此软件包之前,请按照其指南升级您的 Storybook 应用。

https://storybook.org.cn/blog/storybook-for-webpack-5/

安装

# yarn
yarn add -D storybook-module-federation

# npm
npm install -D storybook-module-federation

用法

// .storybook/main.js

const {
  withStorybookModuleFederation,
} = require('storybook-module-federation');

const storybookConfig = {
  // Your storybook config
  // ...
};

const moduleFederationConfig = {
  name: 'components',
  filename: 'remoteEntry.js',
  exposes: {
    './Button': './components/Button.jsx',
  },
  shared: {
    react: {
      singleton: true,
    },
    'react-dom': {
      singleton: true,
    },
  },
};

module.exports = withStorybookModuleFederation(moduleFederationConfig)(
  storybookConfig
);