web-dev-qa-db-fra.com

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

J'ai créé quelques composants réactifs simples et réutilisables et je voulais savoir comment inclure une dépendance pour réagir dans mon package.json pour la publication avec npm.

Je fais actuellement ceci:

En supposant que mon composant utilisera la version la plus récente de react et que j'ai testé et que cela fonctionne avec cette version. par exemple. 0.13.3

"peerDependencies": { 
  "react": "^0.13.3"
},
node.jsnpmreactjs
23
svnm

Pour les composants réutilisables:

  1. Placez une dépendance react dans peerDependencies et devDependencies.
  2. Jamais mettez une dépendance react dans dependencies.

peerDependencies spécifie la ou les versions de React que votre composant réutilisable prend en charge/nécessite. Lorsque vous utilisez npm 2, cela ajoute également React à la liste) de modules à installer, mais ce n'est plus le cas avec npm 3.

devDependencies garantit que React sera installé lorsque vous exécuterez npm install lors du développement de votre composant, ou lors de l'exécution de tests sur Travis ou similaire.

Mettre react dans dependencies provoquera l'installation de plusieurs versions de React si quelqu'un utilise votre composant mais a une version différente de React dans leur propre package.json - avoir plusieurs versions de React non seulement gonfle la construction, mais provoque également des erreurs lorsque différentes versions tentent d'interagir.

46
Jonny Buchanan

La réponse choisie est certainement l'approche prescrite ici, mais j'ai commencé à favoriser l'utilisation de l'inversion de contrôle plutôt que de compter sur les dépendances npm pour mes dépendances de bibliothèques et cela m'a bien servi.

Les bibliothèques sont plus faciles si vous les créez fonctionnelles. Il semble plus facile de gérer des bibliothèques qui exportent une seule fonction qui prend un objet avec toutes leurs fortes dépendances et exporte un objet contenant chacune de vos bibliothèques d'exportations typiques.

Bibliothèque "injectée"

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

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

Si votre composant ne fonctionne qu'avec une version donnée de react ou une autre dépendance, vous pouvez écrire des assertions autour de la version pour le paramètre React transmis). Globalement, la création de bibliothèques de cette manière devrait être moins sujet aux nouveaux problèmes de construction apparaissant à chaque fois que la version de React est publiée et assurera plus important que vous n'obligez pas les consommateurs de votre bibliothèque à regrouper plusieurs versions de React = et d'autres bibliothèques lourdes. Ce modèle fonctionne bien avec npm link (j'ai généralement plus de 16 bibliothèques fonctionnant à partir de npm link simultanément et j'ai rencontré des problèmes lorsque je n'utilisais pas ce modèle).

Dans votre application principale, je recommande de toujours séparer React, Rea Dom et tous les composants React Lib que vous utilisez dans un bundle fournisseur (webpack) et de le marquer comme externe dans votre bundle principal afin de ne pas regrouper involontairement deux versions.

4
cchamberlain