在您的 package.json 中为反应组件添加依赖项以做出反应的正确方法是啥

Posted 2023-02-22

【中文标题】在您的 package.json 中为反应组件添加依赖项以做出反应的正确方法是啥

【英文标题】：What is the correct way of adding a dependency to react in your package.json for a react component在您的 package.json 中为反应组件添加依赖项以做出反应的正确方法是什么

【发布时间】：2015-08-07 17:09:03

【问题描述】：

我已经制作了一些简单的可重复使用的 react 组件，并且想知道在我的 package.json 中包含依赖项以使用 npm 发布的正确方法。

我目前正在这样做：

假设我的组件将使用最新版本的 react 并且我已经测试并且它适用于该版本。例如0.13.3

"peerDependencies":  
  "react": "^0.13.3"
,

【参考方案1】：

您可以在peerDependencies 或dependencies 中使用react。不同之处在于peerDependencies、react 只为使用您的包的包安装一次。如果你把它放在dependencies，react会被安装两次，一次是为使用你的包的包，一次是为你的包。

出于某种原因，React 本身似乎偏爱peerDependencies。您显然不希望 javascript 包中有两个单独版本的 react（如果您使用 dependencies，默认情况下会发生这种情况），但使用 npm dedupe 很容易解决。

所以没有正确的方法可以做到这一点，peerDependencies 和 dependencies 都可以工作。使用 dependencies 更符合 node/NPM 方式，但使用 peerDependencies 对不了解 npm dedupe 以及为什么需要它的软件包用户更友好。

【讨论】：

这个和npm 3已经过时了，只有在版本冲突的时候才会安装两个版本。

【参考方案2】：

对于可重用组件：

在peerDependencies 和devDependencies 中添加一个react 依赖项。 从不将 react 依赖项放入 dependencies。

---

peerDependencies 指定可重用组件支持/需要的 React 版本。当使用 npm 2 时，这也会将 React 添加到要安装的模块列表中，但 npm 3 不再是这种情况。

devDependencies 确保当您在开发组件时运行 npm install 或在 Travis 或类似设备上运行测试时安装 React。

将react 放入dependencies 将导致安装多个版本的React，如果有人使用您的组件但在他们自己的package.json 中有不同版本的React - 拥有多个版本的React 不仅会使构建膨胀，但也会在不同版本尝试交互时导致错误。

【讨论】：

如果你这样做，你的组件中的require('react') 是如何工作的？可能是因为我现在在我的组件中 npm linking，但是 webpack 无法解析我的组件的 require('react')。

看起来 npm link 和 peerDependencies 不流畅。切换到 npm pack 进行本地测试似乎可以与 webpack 的 require 正常工作。

prop-types 怎么样？我原以为它也应该是peerDependency，但我看到很多例子都是dependency。

【参考方案3】：

选择的答案绝对是这里规定的方法，但是我开始支持使用控制反转，而不是依赖 npm 对等依赖项来处理我的库依赖项，它对我很有帮助。

如果您将它们构建成功能性的库，它们会更容易。维护导出单个函数的库似乎更容易，该函数接收具有所有严重依赖关系的对象并导出包含每个库典型导出的对象。

---

库“注入”

lib/index.js

export default ( React ) => 
  const InjectedComponent = props => (
    <p style=color: props.color>This component has no React npm dependencies.</p>
  )

  /** other stuff */

  return  InjectedComponent 

---

消费应用

app.js

import React from 'react'
import  render  from 'react-dom'

/** Import the default export factory from our library */
import createInjectedComponent from 'injected'

/** Call the factory, passing its dependencies (guaranteed to match what we're bundling) and get back our component */
const  InjectedComponent  = createInjectedComponent( React )

render(<InjectedComponent color="blue" />, document.getElementById('root'))

---

如果您的组件仅适用于给定版本的 react 或其他依赖项，您可以围绕传入的 React 参数的版本编写一些断言。总体而言，以这种方式构建库应该不太容易出现新构建任何时候 React 版本发布都会出现的问题，更重要的是确保您不会导致您的库使用者捆绑多个版本的 React 和其他重型库。此模式适用于 npm 链接（我通常有 16 个以上的库同时从 npm 链接运行，并且在我不使用此模式时遇到问题）。

在您的主应用程序中，我建议始终将react、react dom 和您使用的任何 React lib 组件拆分到供应商包（webpack）中，并将其标记为您的主包中的外部包，这样您就不会无意中捆绑两个版本。