Wie kann ich den ReactJS-Entwicklungsmodus ein- und ausschalten?

120

Begann mit der Prop-Validierungsfunktion von ReactJS , die, wie in den Dokumenten angegeben, aus Leistungsgründen nur im Entwicklungsmodus funktioniert.

React scheint die Eigenschaften einer bestimmten Komponente zu validieren, die ich kommentiert habe, aber ich kann mich nicht erinnern, den Entwicklungsmodus explizit aktiviert zu haben.

Ich habe versucht zu suchen, wie der Entwicklungsmodus ausgelöst / umgeschaltet werden kann, hatte aber kein Glück.

gdso
quelle
große prägnante Erklärung process.envfür Webpack-Benutzer: stackoverflow.com/questions/37311972/…
ptim

Antworten:

128

Die andere Antwort geht davon aus, dass Sie externe vorgefertigte Dateien von react verwenden, und obwohl dies korrekt ist, werden die meisten Leute React nicht als Paket verwenden oder sollten dies auch tun. Darüber hinaus stützt sich zu diesem Zeitpunkt fast jede React-Bibliothek und jedes React-Paket auf dieselbe Konvention, um Entwicklungshelfer während der Produktion auszuschalten. Wenn Sie nur die minimierte Reaktion verwenden, bleiben auch all diese potenziellen Optimierungen auf dem Tisch.

Letztendlich kommt es auf die Reaktion von React an, Verweise auf die process.env.NODE_ENVgesamte Codebasis einzubetten. Diese wirken wie ein Feature-Toggle.

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

Das Obige ist das häufigste Muster, und andere Bibliotheken folgen ihm ebenfalls. So zu „deaktivieren“ diese Kontrollen müssen wir Umschalten NODE_ENVauf"production"

Der richtige Weg, um den "Dev-Modus" zu deaktivieren, ist über den Bundler Ihrer Wahl.

Webpack

Verwenden Sie die DefinePluginin Ihrer Webpack-Konfiguration wie folgt:

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

Browserify

Verwenden Sie die Envify- Transformation und führen Sie Ihren browserify-Erstellungsschritt mit NODE_ENV=production( "set NODE_ENV=production"unter Windows) aus.

Ergebnis

Dadurch werden Ausgabepakete erstellt, bei denen alle Instanzen process.env.NODE_ENVdurch das Zeichenfolgenliteral ersetzt wurden:"production"

Bonus

Wenn Sie den transformierten Code minimieren, können Sie "Dead Code Elimination" nutzen. DCE ist , wenn die minifier intelligent genug, um zu erkennen , dass: "production" !== "production"ist immer falsch und so wird nur jeder Code in dem Block , wenn entfernen Sie sparen Bytes.

Mönchs-Panik
quelle
1
Auf Reaktion Dokumentation erklärt auch facebook.github.io/react/docs/…
asotog
1
Benötigen Sie dort wirklich JSON.stringify ('Produktion')? Oder ist nur "Produktion" genug?
Vlad Nicula
4
@VladNicula muss es '"production"'dh sein. doppelt zitiert, stringify erledigt das für Sie
monastic-panic
1
Sie können es auch verwenden, JSON.stringify(process.env.NODE_ENV)damit es über NODE_ENV=production webpack ...die Befehlszeile umgeschaltet werden kann . Bonus des expliziten Codes hinzugefügt =)
Henry Blyth
2
Ich habe gerade herausgefunden, dass diese DefinePluginVerwendung durchnew webpack.EnvironmentPlugin(['NODE_ENV'])
Henry Blyth
50

Ja, es ist nicht wirklich gut dokumentiert, aber auf der ReactJS- Downloadseite wird über Entwicklungs- und Produktionsmodi gesprochen:

Wir bieten zwei Versionen von React an: eine unkomprimierte Version für die Entwicklung und eine minimierte Version für die Produktion. Die Entwicklungsversion enthält zusätzliche Warnungen zu häufigen Fehlern, während die Produktionsversion zusätzliche Leistungsoptimierungen enthält und alle Fehlermeldungen entfernt.

Grundsätzlich ist die nicht minimierte Version von React der "Entwicklungs" -Modus und die minimierte Version von React der "Produktions" -Modus.

Um im "Produktions" -Modus zu sein, geben Sie einfach die minimierte Version an react-0.9.0.min.js

Edward M Smith
quelle
2
Wenn Ihr Bundler minimiert, wird das Debugging meiner Meinung nach nicht entfernt. Sie müssen die minimierte Version von React in Ihren Produktions-Build aufnehmen - die in der React-Distribution enthaltene - es ist tatsächlich ein anderer Code als die nicht minimierte Version, soweit ich weiß.
Edward M Smith
17
Wenn Sie npmdirekt aus dem Reaktionspaket erstellen, verwenden Sie soemthing wie envify, um NODE_ENV = 'production'die gleichen Überprüfungen durchzuführen . @EdwardMSmith Lassen Sie mich wissen, wo Sie diese Informationen sehen wollten und ich kann sie hinzufügen (oder Sie können einfach eine PR einreichen)!
Sophie Alpert
2
@ BenAlpert - Ich würde eine Seite entweder unter Anleitungen oder Tipps sagen, die die Produktionsbereitstellung beschreibt. Ich werde einen Blick darauf werfen und sehen, was ich mir einfallen lassen kann. Ich habe nicht wirklich getan eine Produktionsumgebung, so dass es einige Änderungen benötigen. Ich werde eine PR einreichen.
Edward M Smith
1
Ich wollte nur hinzufügen, dass in der Addon-Version der Entwicklungsmodus nicht aktiviert zu sein scheint, selbst in der nicht minimierten Version.
KallDrexx
8
Ich denke nicht, dass dies die beste Antwort ist, da einige Leute ihre Reaktion mit browserify aufbauen und eine Antwort, die davon Gebrauch macht, NODE_ENVoben vorhanden sein sollte.
Björn
16

Ich habe das woanders gepostet, aber ehrlich gesagt wäre hier ein besserer Ort.

Angenommen, Sie installieren React 15.0.1 mit npm import react from 'react'oder react = require('react')werden ausgeführt, ./mode_modules/react/lib/React.jswas die Rohquelle von React ist.

Die React-Dokumente schlagen vor, dass Sie sie ./mode_modules/react/dist/react.jsfür die Entwicklung und react.min.jsfür die Produktion verwenden.

Wenn Sie die Produktion minimieren /lib/React.jsoder /dist/react.jsfür die Produktion verwenden, zeigt React eine Warnmeldung an, dass Sie den Nichtproduktionscode minimiert haben:

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 verhalten sich ähnlich. Redux zeigt eine Warnmeldung an. Ich glaube, React-Dom auch.

Sie werden daher ausdrücklich aufgefordert, die Produktionsversion von zu verwenden /dist.

Wenn Sie jedoch die /distVersionen minimieren, wird sich das UglifyJsPlugin des Webpacks beschweren.

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

Sie können diese Meldung nicht vermeiden, da UglifyJsPlugin nur Webpack-Chunks ausschließen kann, nicht einzelne Dateien.

Ich benutze sowohl die Entwicklungs- als auch die Produktionsversion /distselbst.

  • Webpack hat weniger Arbeit zu erledigen und endet etwas früher. (YRMV)
  • React Docs sagen, /dist/react.min.jsist für die Produktion optimiert. Ich habe keinen Beweis dafür gelesen, dass 'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') }plus uglify so gute Arbeit leistet wie '/ dist / react.min.js`. Ich habe keinen Beweis gelesen, dass Sie den gleichen resultierenden Code erhalten.
  • Ich erhalte 1 Warnmeldung von uglify anstatt 3 vom React / Redux-Ökosystem.

Sie können Webpack die /distVersionen verwenden lassen mit:

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'))
    }
  }
JohnSz
quelle
1
Wenn Sie vom Webpack aus Cli ausführen: const IS_PRODUCTION = process.argv.indexOf ('- p')! == -1;
Greg
2
Dies ist nicht die empfohlene Lösung (Quelle: Ich arbeite an React). Die richtigen Lösungen sind hier dokumentiert: reactjs.org/docs/… . Wenn sie für Sie nicht funktionieren, melden Sie ein Problem im React-Repo an, und wir werden versuchen, Ihnen zu helfen.
Dan Abramov
4

Für Webpack-basierte Builds habe ich separate webpack.config.js für DEV und PROD eingerichtet. Lösen Sie für Prod den Alias ​​wie folgt auf

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

Den funktionierenden finden Sie hier

Senthil
quelle
1
Dies ist nicht die empfohlene Lösung (Quelle: Ich arbeite an React). Die richtigen Lösungen sind hier dokumentiert: reactjs.org/docs/… . Wenn sie für Sie nicht funktionieren, melden Sie ein Problem im React-Repo an, und wir werden versuchen, Ihnen zu helfen.
Dan Abramov
1

Wenn Sie mit so etwas wie diesem ReactJS.NET / Webpack-Tutorial arbeiten , können Sie process.env nicht verwenden, um den React-Entwicklungsmodus ein- oder auszuschalten, soweit ich das beurteilen kann. Dieses Beispiel enthält einen direkten Link zu react.js (siehe Index.cshtml ). Sie müssen also nur .min.js oder die nicht minimierte Variante auswählen, indem Sie die URL ändern.

Ich bin mir nicht sicher, warum dies der Fall ist, da die Datei webpack.config.js des Beispiels einen Kommentar enthält, der zu implizieren scheint, dass externals: { react: 'React' }der Job erledigt wird , aber dann vorgeht und direkt auf die Seite reagiert.

Roman Starkov
quelle
Wenn ich es richtig erraten habe, sagen Sie, dass das Bündeln und Minimieren mit ReactJS.Net nicht dazu beiträgt, die Entwicklungsdatei von react.js zu minimieren. Während des Bündelns mit #IF DEBUG-Prüfungen muss die URL explizit in die Produktionsdatei von react.js geändert werden, die auf der Facebook-Downloadseite bereitgestellt wird. Ähnlich verhält es sich mit React-Dom und Redux. Habe ich recht?
Faisal Mq
@FaisalMushtaq Das ist ein Teil davon; Abhängig davon, wie Sie react.js einschließen, müssen Sie möglicherweise explizit zur minimierten Version wechseln. Aber ich wollte wirklich sagen, dass es möglich ist, React so einzurichten, dass die "offizielle" Art, den Entwicklungsmodus einzuschalten, nicht funktioniert.
Roman
0

Für nur Webpack v4 Benutzer:

Wenn Sie mode: productionund mode: developmentin Ihrer Webpack-Konfiguration process.env.NODE_ENVangeben, wird standardmäßig das DefinePlugin verwendet. Kein zusätzlicher Code erforderlich!

webpack.prod.js (aus Dokumenten entnommen)

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

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

Und in unserem JS:

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

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

Joe
quelle
0

Ich verwende einen manuellen Erstellungsprozess, der über Webpack ausgeführt wird. Für mich war dies also ein zweistufiger Prozess:

  1. Legen Sie die Umgebungsvariable aus package.json mithilfe des Cross-Env-Pakets fest:

    "scripts": { "build-dev": "cross-env NODE_ENV=development webpack --config webpack.config.js", "build-prod": "cross-env NODE_ENV=production webpack --config webpack.config.js" }

  2. Ändern Sie die Datei webpack.config.js, um die Umgebungsvariable zu verwenden (die an React weitergeleitet wird, um festzustellen, ob wir uns im Entwicklungs- oder Produktionsmodus befinden), und deaktivieren Sie die Minimierung des produzierten Bundles, wenn wir uns im Entwicklungsmodus befinden, damit wir die sehen können tatsächliche Namen unserer Komponenten. Dazu müssen wir die Optimierungseigenschaft von webpack in unserer Datei webpack.config.js verwenden:

    optimization: { nodeEnv: process.env.NODE_ENV, minimize: process.env.NODE_ENV === 'production' }

webpack v4.41.5, React v16.9.19, cross-env v7.0.0, node v10.16.14

John Galt
quelle