webpack 在React作为对等依赖项的组件库包中使用StorybookJS

6ioyuze2 于 2023-03-08 发布在 Webpack

关注(0)|答案(2)|浏览(139)

我正在创建自己的React组件库。package.json使用react和react-dom作为对等依赖项，因为我只想发布组件代码。这个包将用于其他基于React的项目，所以我将在这些项目中提供React。
我决定在包中添加StorybookJS有两个原因
1.在开发过程中帮助预览我的组件
1.创建一个静态的故事书网站，我将主机展示组件的地方
我的项目结构：

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列为其依赖项（我不希望）。
正确的方法是什么？

webpack

来源：https://stackoverflow.com/questions/65239096/using-storybookjs-in-a-component-library-package-with-react-as-peer-dependency

2条答案

按热度按时间

0x6upsns1#

我最终把react和react-dom放进了peerDependencies中，因为在我看来这是正确的方法。因为那个包文件属于库本身（而不是Storybook），所以它应该正确地声明它的依赖关系。
为了避免将React捆绑到我的库包中，我将它放入externals webpack配置中，如下所示：

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-peers package来安装React和ReactDOM。对于较新版本的NPM客户端，您将不需要此包，运行npm install也应该安装对等依赖项。

赞(0）回复(0）举报 2023-03-08

pvcm50d12#

您可以让npm自动在.npmrc中安装对等项：

auto-install-peers: true

我期待.yarnrc.yml有类似的选项...
This alternative已被记住。
我还没有试过，但是通过代码看起来不错。还在考虑用像NPM这样的一个工具来解决这个问题^^

赞(0）回复(0）举报 2023-03-08

我来回答

webpack 在React作为对等依赖项的组件库包中使用StorybookJS

2条答案

相关问题

热门标签

最新问答