web-dev-qa-db-fra.com

Comment activer / désactiver le 'mode de développement' de ReactJS?

Commencé à utiliser fonctionnalité de validation de ReactJS, qui, selon la documentation, ne fonctionne qu'en mode de développement pour des raisons de performances.

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

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

reactjs
115
gdso

L'autre réponse suppose que vous utilisez des fichiers prédéfinis externes provenant de react, et bien que correct, ce n'est pas ce que la plupart des gens vont faire ou devrait consommer React comme un paquet. De plus, à ce stade, la plupart des bibliothèques et packages React reposent également sur et reposent sur la même convention pour désactiver les assistants de développement pendant la production. Le simple fait d’utiliser l’agenda minimisé laissera toutes ces optimisations potentielles sur la table.

En fin de compte, la magie consiste à intégrer dans React des références à process.env.NODE_ENV Dans l'ensemble de la base de code; ceux-ci agissent comme une fonctionnalité bascule.

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

Le modèle ci-dessus est le modèle le plus répandu et d’autres bibliothèques le suivent également. Donc, pour "désactiver" ces vérifications, nous devons basculer NODE_ENV En "production"

Le moyen approprié pour désactiver le "mode dev" consiste à choisir votre bundler.

webpack

Utilisez le DefinePlugin dans la configuration de votre webpack comme suit:

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

Browserify

Utilisez la transformation Envify et exécutez votre étape de construction de browserify avec NODE_ENV=production ("set NODE_ENV=production" Sous Windows).

Résultat

Cela produira des ensembles de sortie dans lesquels toutes les instances de process.env.NODE_ENV Seront remplacées par le littéral de chaîne: "production"

Prime

Lorsque vous réduisez le code transformé, vous pouvez tirer parti de "Dead Code Elimination". DCE est lorsque le minificateur est assez intelligent pour se rendre compte que: "production" !== "production" Est toujours faux et supprime simplement le code du bloc if vous sauver des octets.

124
monastic-panic

Oui, ce n’est pas vraiment bien documenté, mais sur le ReactJS page de téléchargement , il est question de 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 réduite 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 complétée du React est le mode "développement") et la version simplifiée du React est le mode "production".

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

49
Edward M Smith

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

En supposant que vous installiez React 15.0.1 avec npm, import react from 'react' Ou react = require('react') exécutera ./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 minimisez /lib/React.js Ou /dist/react.js Pour la production, React affiche un message d'avertissement indiquant que vous avez minifié le code de 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.

react-dom, redux, react-redux se comportent de la même manière. Redux affiche un message d'avertissement. Je crois que react-dom 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 fragments de Webpack, pas des fichiers individuels.

J'utilise les versions développement et production /dist Moi-même.

  • Webpack a moins de travail à faire et termine un peu plus tôt. (YRMV)
  • Les documents de React disent 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 fasse un aussi bon travail que '/ dist/react.min.js`. Je n'ai lu aucune preuve que vous obteniez le même code résultant.
  • Je reçois un message d'avertissement de uglify plutôt que 3 de l'écosystème de réaction/redux.

Webpack peut 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'))
    }
  }
16
JohnSz

Pour la construction basée sur Webpack, j'avais l'habitude de configurer webpack.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 de ici

4
Senthil

Si vous travaillez à partir de quelque chose comme ceci tutoriel de ReactJS.NET/Webpack , vous ne pouvez pas utiliser process.env pour passer React activé/désactivé aussi loin que possible) Cet exemple renvoie directement à react.js (voir Index.cshtml ), il vous suffit donc de choisir .min.js ou la variante non minifiée en modifiant l’URL.

Je ne sais pas trop pourquoi, car le fichier Webpack.config.js de l'exemple comporte un commentaire qui semble impliquer le externals: { react: 'React' } ferait le travail, mais passerait ensuite à autre et réagirait directement dans la page.

1
Roman Starkov

Pour uniquement utilisateurs de Webpack v4:

En précisant mode: production et mode: development dans votre configuration Webpack définira process.env.NODE_ENV en utilisant le DefinePlugin par défaut. Aucun code supplémentaire nécessaire!

webpack.prod.js (tiré de la documentation)

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
});

Et dans notre JS:

console.log(process.env.NODE_ENV) // --> 'development' or 'production'

Documents Webpack: https://webpack.js.org/guides/production/#specify-the-mode

0
Joe