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

Question

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

我目前正在这样做：

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

"peerDependencies": { 
  "react": "^0.13.3"
},

Answer 1

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

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

所以没有正确的方法，peerDependencies 和 dependencies 都可以。使用 dependencies 更符合 node/NPM 方式，但使用 peerDependencies 对不知道 npm dedupe 以及为什么需要它的用户更友好。

Answer 2

对于可重复使用的组件：

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

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

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

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

Answer 3

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

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

图书馆'injected'

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 link（我通常有 16 个以上的库运行来自 npm link 同时遇到的问题，当我不使用此模式时).

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

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

What is the correct way of adding a dependency to react in your package.json for a react component

node.js

npm

reactjs

图书馆'injected'

使用应用程序