我正在创建自己的 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 列为它的依赖项(我不想要)。这里的正确方法是什么?
最佳答案
我最终把 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 .
关于reactjs - 在组件库包中使用 StorybookJS,以 React 作为对等依赖项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65239096/