Comment activer / désactiver ReactJS "mode de développement"?

A commencé à utiliser la fonctionnalité de validation prop de ReactJS , qui, comme le disent les docs, ne fonctionne qu'en "mode développement" pour des raisons de performance.

React semble valider les propriétés d'un composant particulier que j'ai annoté, mais je ne me souviens pas avoir explicitement activé le "mode développement".

J'ai essayé de chercher comment déclencher / basculer le mode de développement, mais je n'ai pas eu de chance.

104
demandé sur gdso 2014-03-01 23:02:18

5 réponses

L'autre réponse suppose que vous utilisez des fichiers pré-construits externes de react, et bien que correct, ce n'est pas la façon dont la plupart des gens vont ou devrait consommer React en tant que paquet. De plus, à ce stade, la plupart des bibliothèques et paquets React reposent également sur la même convention pour désactiver les assistants de temps de développement pendant la production. Le simple fait d'utiliser la réaction minifiée laissera également toutes ces optimisations potentielles sur la table.

En fin de compte, la magie se résume à Réagir en intégrant des références à process.env.NODE_ENV dans toute la base de code; ceux-ci agissent comme une bascule de fonctionnalité.

if (process.env.NODE_ENV !== "production")
  // do propType checks

Ce qui précède est le modèle le plus commun, et d'autres bibliothèques le suivent également. Donc, pour" désactiver " ces vérifications, nous devons basculer NODE_ENV à "production"

La bonne façon de désactiver le "mode dev" est par le biais de votre bundler de choix.

Webpack

Utilisez le DefinePlugin dans votre configuration webpack comme ceci: 

new webpack.DefinePlugin({
  "process.env": { 
     NODE_ENV: JSON.stringify("production") 
   }
})

Browserify

Utilisez le Envify transformez et exécutez votre étape de construction browserify avec NODE_ENV=production ("set NODE_ENV=production" sous Windows)

Résultat

Cela produira des faisceaux de sortie qui ont toutes les instances de process.env.NODE_ENV remplacées par le littéral de chaîne: "production"

Bonus

Lorsque vous réduisez le code transformé, Vous pouvez profiter de "L'élimination du code mort". DCE est quand le minifier est assez intelligent pour se rendre compte que: "production" !== "production" est toujours false et supprimera donc tout code dans le bloc if vous économisant octets.

115
répondu monastic-panic 2016-12-20 14:02:42

Ouais, ce n'est pas vraiment bien documenté, mais sur la page de téléchargement de ReactJS Il parle des modes de développement et de production:

Nous fournissons deux versions de React: une version non compressée pour le développement et une version minifiée pour la production. La version de développement inclut des avertissements supplémentaires sur les erreurs courantes, tandis que la version de production inclut des optimisations de performances supplémentaires et supprime tous les messages d'erreur.

Fondamentalement, la version non minifiée de React est le mode "développement", et la version minifiée de React est le mode "production".

Pour être en mode "production", incluez simplement la version minifiée react-0.9.0.min.js

48
répondu Edward M Smith 2014-03-01 19:08:13

J'ai posté ailleurs mais, franchement, ici, serait un meilleur endroit.

En supposant que vous installez React 15.0.1 avec npm, import react from 'react' ou react = require('react') exécuteront ./mode_modules/react/lib/React.js qui est la source brute de React.

Les documents React vous suggèrent d'utiliser ./mode_modules/react/dist/react.js pour le développement et react.min.js pour la production.

Si vous réduisez /lib/React.js ou /dist/react.js pour la production, React affichera un message d'avertissement indiquant que vous avez réduit le code non-production:

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See fb.me/react-minification for more details.

Réagir-dom, redux, réagissent-redux se comporter pareillement. Redux affiche un message d'avertissement. Je crois que react-dom le fait aussi.

Vous êtes donc clairement encouragé à utiliser la version de production de /dist.

Cependant, si vous réduisez les versions /dist, UglifyJsPlugin de webpack se plaindra.

WARNING in ../~/react/dist/react.js Critical dependencies: 4:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. @ ../~/react/dist/react.js 4:478-4851

Vous ne pouvez pas éviter ce message car UglifyJsPlugin ne peut exclure que des morceaux de webpack, pas des fichiers individuels.

J'utilise les versions de développement et de production /dist m'.

  • Webpack a moins de travail à faire et se termine un peu plus tôt. (YRMV)
  • les documents React indiquent que /dist/react.min.js est optimisé pour la production. Je n'ai lu aucune preuve que 'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') } plus uglify fait aussi bon travail que ' / dist / react.min.js". Je n'ai lu aucune preuve que vous obtenez le même code résultant.
  • je reçois 1 message d'avertissement de uglify plutôt que 3 de l'écosystème react/redux.

Vous pouvez avoir webpack utiliser les versions /dist avec: 

resolve: {
    alias: {
      'react$': path.join(__dirname, 'node_modules', 'react','dist',
        (IS_PRODUCTION ? 'react.min.js' : 'react.js')),
      'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist',
        (IS_PRODUCTION ? 'react-dom.min.js' : 'react-dom.js')),
      'redux$': path.join(__dirname, 'node_modules', 'redux','dist',
        (IS_PRODUCTION ? 'redux.min.js' : 'redux.js')),
      'react-redux$': path.join(__dirname, 'node_modules', 'react-redux','dist',
        (IS_PRODUCTION ? 'react-redux.min.js' : 'react-redux.js'))
    }
  }
15
répondu JohnSz 2016-04-18 13:34:42

Pour la construction basée sur webpack, j'avais l'habitude de configurer un webpack séparé.config.js pour DEV et PROD. Pour Prod, résolvez l'alias comme ci-dessous

     alias: {
        'react$': path.join(__dirname, 'node_modules', 'react','dist','react.min.js'),
        'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist','react-dom.min.js')
    }

, Vous pouvez trouver le travail à partir de ici

4
répondu Senthil 2016-06-23 01:27:58

Si vous travaillez à partir de quelque chose comme ça ReactJS.NET / webpack tutorial , vous ne pouvez pas utiliser process.env pour activer/désactiver le mode de développement React autant que je peux le dire. Cet exemple de liens pour réagir.js directement (voir Index.cshtml), il vous suffit donc de choisir .min.js ou la variante non minifiée en changeant L'URL.

Je ne sais pas pourquoi c'est le cas, parce que le webpack de l'échantillon.config.js a un commentaire qui semble impliquer le externals: { react: 'React' } ferait le travail, mais va de l'avant et comprend réagir directement dans la page.

1
répondu Roman Starkov 2016-04-14 12:59:09