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

Question

我正在创建自己的 React 组件库。 package.json正在使用 react和 react-dom作为对等依赖项，因为我只想为组件提供代码。然后这个包将用于其他基于 React 的项目，所以我将在这些项目中自己提供 React。
我决定在包中添加 StorybookJS 有两个原因

在开发过程中帮助预览我的组件

创建一个静态故事书网站，我将在某处托管该网站以展示组件

我的项目结构:

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 捆绑到我的库包中，我将其放入 externals webpack 配置如下:

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

这样，React 或 ReactDOM 就不会出现在 bundle 中。该库是 React 组件库，因此无论如何都不能在没有 React 的情况下使用它，您应该提供它。
使 Storybook 工作的最后一步，我添加了 prepare安装包时安装对等依赖项的脚本。这样就为 Storybook 应用程序提供了 React 和 ReactDOM。
这是我的 package.json 中的准备脚本:

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

我用过 install-peers package安装 React 和 ReactDOM。对于较新版本的 NPM 客户端，您将不需要此包和 running npm install should install peer dependencies as well .