在组件库包中使用 StorybookJS，并以 React 作为对等依赖

Question

我正在创建自己的 React 组件库。使用和作为对等依赖项package.json，因为我只想仅为组件提供代码。然后这个包将在其他基于 React 的项目中使用，因此我将在这些项目中自己提供 React。reactreact-dom

我决定在包中添加 StorybookJS 有两个原因

1. 在开发过程中帮助预览我的组件
2. 创建一个静态故事书网站，我将在某个地方托管该网站来展示组件

我的项目结构：

package.json
src/
  components/ // contains components
  storybook/ // <-- not part of the package
  index.ts  // <-- this is entry point of the package

然而，这引入了一个问题。由于 StorybookJS 需要react和react-dom才能运行，因此我必须将它们作为库的依赖项包含在内。

我将用来webpack实际仅捆绑组件代码，以便可以分发它。我应该在配置中使用属性来从捆绑包中externals排除react和吗？react-dom我想它会起作用，但仍然package.json会将 React 列为其依赖项（我不想要）。

这里正确的做法是什么？

Answer 1

我最终投入react并react-dom进入，peerDependencies因为我认为这是正确的方法。由于该包文件属于库本身（而不是 Storybook），因此它应该正确声明其依赖项。

为了避免将 React 捆绑到我的库包中，我将其放入externalswebpack 配置中，如下所示：

  externals: {
    react: 'react',
    'react-dom': 'react-dom',
  },

这样，React 或 ReactDOM 就不会出现在捆绑包中。该库是 React 组件库，因此没有 React 就无法使用它，您应该提供它。

让 Storybook 工作的最后一步，我添加了prepare在安装包时安装对等依赖项的脚本。这样就为 Storybook 应用程序提供了 React 和 ReactDOM。

这是我的准备脚本package.json：

"scripts": {
  "prepare": "install-peers && npm run build"
}

我使用install-peerspackage来安装 React 和 ReactDOM。对于较新版本的 NPM 客户端，您将不需要此软件包，并且运行时npm install也应该安装对等依赖项。