Quelle est la bonne façon d'ajouter une dépendance à réagir dans votre forfait.json pour réagir composant

J'ai fait un peu simple réutilisables réagir composants et je voulais savoir la bonne façon d'inclure une dépendance à réagir dans mon paquet.json pour la publication avec des mnp.

Je suis actuellement en train de faire ceci:

En supposant que mon composant utilisent la version la plus récente de réagir et je l'ai testé et il fonctionne avec cette version. par exemple, 0.13.3

"peerDependencies": { 
  "react": "^0.13.3"
},
InformationsquelleAutor svnm | 2015-05-26
  1. 42

    De composants réutilisables:

    1. Mettre un react de dépendance dans les deux peerDependencies et devDependencies.
    2. Jamais mettre un react de la dépendance dans dependencies.

    peerDependencies spécifie la version(s) de Réagir à votre composant réutilisable/supports exige. Lors de l'utilisation de la ngp 2, cela ajoute également Réagir à la liste des modules à installer, mais ce n'est plus le cas avec les mnp 3.

    devDependencies assure le Réagissent sera installé lorsque vous exécutez npm install tout en développant votre composant, ou lors de l'exécution de tests sur Travis ou similaire.

    Mettre react dans dependencies sera la cause de plusieurs versions de Réagir à être installé si quelqu'un utilise votre composant, mais a une version différente de Réagir à leur propre package.json - le fait d'avoir plusieurs versions de Réagir non seulement gonfle la construction, mais aussi les causes des erreurs lors de différentes versions essayez d'interagir.

    • Si vous faites cela, comment peut-il require('react') dans votre composant? Il peut être parce que je suis npm linking dans mon composant, mais webpack ne pouvez pas résoudre mon composant require('react').
    • Ressemble npm link et peerDependencies n'est pas lisse. Commutation de npm pack de test local fonctionne correctement avec webpack est require il me semble.
    • Que diriez -prop-types? J'aurais cru il devrait également être un peerDependency, mais je vois de nombreux exemples où c'est un dependency.
    InformationsquelleAutor Jonny Buchanan
  2. 4

    La réponse sélectionnée est certainement le prescrit approche ici, cependant, je ai commencé à en favorisant l'utilisation de l'inversion de contrôle plutôt que de s'appuyer sur les mnp par les pairs dépendances pour mon dépendances de bibliothèques et sa m'a bien servi.

    Les bibliothèques sont plus faciles si vous construisez fonctionnels. Il semble plus facile de gérer les bibliothèques que l'exportation d'une seule fonction qui prend un objet avec tout le poids de leurs dépendances et de l'exportation d'un objet contenant chacun de vos bibliothèques typique des exportations.

    Bibliothèque "injecté'

    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 }
}

    Consommer De L'Application

    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'))

    Si votre composant ne fonctionne qu'avec une version donnée de réagir ou une autre dépendance, vous pouvez écrire des assertions autour de la version pour Réagir paramètre qui est passé. Dans l'ensemble, la construction de bibliothèques dans ce mode doit être moins sujettes à la construction de nouvelles questions apparaissant à tout moment de la version de Réagir est publié et il est plus important de s'assurer que vous n'êtes pas à l'origine de votre bibliothèque consommateurs de combiner plusieurs versions de Réagir et d'autres bibliothèques. Ce modèle fonctionne bien avec les mnp lien (de manière générale, j'ai 16 ans et+ les bibliothèques de l'exécution de la ngp lien simultanée et connu des problèmes quand je n'ai pas utilisé ce modèle).

    Dans votre application principale je recommande toujours la séparation de réagir, réagir dom, et de toute réagir lib composants que vous utilisez un fournisseur de bundle (webpack) et le marquer comme étant externe à votre faisceau de sorte que vous n'avez pas accidentellement regrouper deux versions.

    InformationsquelleAutor cchamberlain
  3. -3

    Vous pouvez avoir react dans peerDependencies ou dans dependencies. La différence étant que, avec un peerDependencies, react est seulement installé une fois pour le package à l'aide de votre colis. Si vous le mettez dans dependencies, react sera installé deux fois, une fois pour le package à l'aide de votre colis, et une fois le temps de votre colis.

    Réagir lui-même semble favoriser peerDependencies pour une raison quelconque. Manifestement, vous ne voulez pas de deux versions distinctes de react en Javascript de votre bundle (c'est le cas par défaut si vous utilisez dependencies), mais qui est facile à fixer avec npm dedupe.

    Donc il n'y a pas de bonne façon de le faire, à la fois peerDependencies et dependencies travail. À l'aide de dependencies est plus en ligne avec le node/MNP façon, mais en utilisant peerDependencies est plus convivial pour les utilisateurs de votre paquet qui ne savent pas à propos de npm dedupe et pourquoi ils sont nécessaires.

    • ce n'est pas à jour mnp 3, qui ne pour installer les deux versions quand il y a un conflit de version.
    InformationsquelleAutor Anders Ekdahl