Question

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

我目前正在这样做：

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

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

Answer 1

对于可重复使用的组件：

在react和peerDependencies。{/ li>中加上devDependencies依赖项
从不在react中添加dependencies依赖项。

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

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

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

Answer 2

选择的答案肯定是这里规定的方法，但我开始倾向于使用控制反转，而不是依赖于我的库依赖关系的npm对等依赖关系，它很适合我。

如果您构建函数库，则库更容易。维护导出单个函数的库似乎更容易，该函数接收具有所有重度依赖关系的对象，并导出包含每个库典型导出的对象。

图书馆＆＃39;注入＆＃39;

<强> 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）并在主包中将其标记为外部，以便您不会无意中捆绑两个版本

Answer 3

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

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

因此没有正确的方法，peerDependencies和dependencies都有效。使用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" />。需要的。

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

3 个答案:

图书馆＆＃39;注入＆＃39;

使用App