在package.json中为react组件添加依赖项以进行响应的正确方法是什么?

时间:2015-05-26 06:58:09

标签: node.js npm reactjs

我已经制作了一些简单的可重用反应组件,并希望知道在 package.json 中包含依赖项以在npm中发布的正确方法。

我目前正在这样做:

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

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

3 个答案:

答案 0 :(得分:42)

对于可重复使用的组件:

  1. reactpeerDependencies。{/ li>中加上devDependencies依赖项
  2. 从不react中添加dependencies依赖项。
  3. peerDependencies指定您的可重用组件支持/需要哪些版本的React。当使用npm 2时,这也将React添加到要安装的模块列表中,但是npm 3不再是这种情况。

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

    react放入dependencies会导致安装多个版本的React,如果有人使用您的组件但在自己的package.json中有不同版本的React - 有多个版本的React不仅会破坏构建,还会在不同版本尝试交互时导致错误。

答案 1 :(得分:4)

选择的答案肯定是这里规定的方法,但我开始倾向于使用控制反转,而不是依赖于我的库依赖关系的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

<强> 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链接同时运行并遇到问题)。

在您的主应用程序中,我建议始终将您使用的反应,反应dom和任何反应库组件分解为供应商包(webpack)并在主包中将其标记为外部,以便您不会无意中捆绑两个版本

答案 2 :(得分:-3)

您可以在reactpeerDependencies中拥有dependencies。区别在于peerDependenciesreact仅使用您的包安装一次。如果您将其放在dependencies中,则react将安装两次,一次使用您的包,一次包装。

由于某种原因,React本身似乎赞成peerDependencies。您显然不希望在Javascript包中有两个单独版本的react(默认情况下,如果您使用dependencies),但使用npm dedupe很容易解决。< / p>

因此没有正确的方法,peerDependenciesdependencies都有效。使用dependencies更符合节点/ NPM方式,但使用peerDependencies对您的软件包的用户来说更加友好,因为npm dedupe以及为什么不知道<com.google.android.gms.plus.PlusOneButton xmlns:plus="http://schemas.android.com/apk/lib/com.google.android.gms.plus" android:id="@+id/plus_one_button" android:layout_width="wrap_content" android:layout_height="wrap_content" plus:size="standard" plus:annotation="inline" /> 。需要的。