¿Cómo activar / desactivar el 'modo de desarrollo' de ReactJS?

Comencé a usar la función de validación de prop de ReactJS , que como dicen los documentos solo funciona en 'modo de desarrollo' por razones de rendimiento.

React parece estar validando las propiedades de un componente en particular que he anotado, pero no recuerdo haber activado explícitamente el 'modo de desarrollo'.

Intenté buscar cómo activar / alternar el modo de desarrollo, pero no he tenido suerte.

La otra respuesta asume que está utilizando archivos externos precompilados de React , y aunque es correcto, así no es como la mayoría de la gente va o debería consumir React como un paquete. Además, en este punto, la mayoría de las bibliotecas y paquetes de React también se basan en la misma convención para desactivar los ayudantes de tiempo de desarrollo durante la producción. El solo uso de la reacción minificada también dejará todas esas optimizaciones potenciales sobre la mesa.

En última instancia, la magia se reduce a que React incorpore referencias a process.env.NODE_ENVtodo el código base; actúan como una función de alternancia.

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

El anterior es el patrón más común y otras bibliotecas también lo siguen. Entonces, para "deshabilitar" estas comprobaciones, debemos cambiar NODE_ENVa"production"

La forma correcta de deshabilitar el "modo de desarrollo" es a través del paquete que elija.

paquete web

Use el DefinePluginen la configuración de su paquete web así:

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

Browserify

Use la transformación de Envify y ejecute su paso de compilación de browserify con NODE_ENV=production( "set NODE_ENV=production"en Windows)

Resultado

Esto producirá paquetes de salida que tienen todas las instancias de process.env.NODE_ENVreemplazadas con el literal de cadena:"production"

Prima

Al minimizar el código transformado, puede aprovechar la "Eliminación de código muerto". DCE es cuando el minificador es lo suficientemente inteligente como para darse cuenta de que: siempre"production" !== "production" es falso y, por lo tanto, simplemente eliminará cualquier código en el bloque if que le ahorrará bytes.

Sí, no está muy bien documentado, pero en la página de descarga de ReactJS habla sobre los modos de desarrollo y producción:

Ofrecemos dos versiones de React: una versión sin comprimir para desarrollo y una versión minificada para producción. La versión de desarrollo incluye advertencias adicionales sobre errores comunes, mientras que la versión de producción incluye optimizaciones de rendimiento adicionales y elimina todos los mensajes de error.

Básicamente, la versión no minificada de React es el modo "desarrollo", y la versión minificada de React es el modo "producción".

Para estar en modo "producción", solo incluye la versión reducida react-0.9.0.min.js

Publiqué esto en otro lugar pero, francamente, este sería un lugar mejor.

Suponiendo que instale React 15.0.1 con npm, import react from 'react'o react = require('react')se ejecutará, ./mode_modules/react/lib/React.jsque es la fuente sin procesar de React.

Los documentos de React sugieren que se utilice ./mode_modules/react/dist/react.jspara desarrollo y react.min.jsproducción.

Si minimiza /lib/React.jso /dist/react.jspara producción, React mostrará un mensaje de advertencia de que ha minimizado el código que no es de producción:

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 comportan de manera similar. Redux muestra un mensaje de advertencia. Creo que react-dom también lo hace.

Por tanto, se le anima claramente a utilizar la versión de producción de /dist.

Sin embargo, si minimiza las /distversiones, UglifyJsPlugin de webpack se quejará.

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

No puede evitar este mensaje porque UglifyJsPlugin solo puede excluir fragmentos de paquetes web, no archivos individuales.

Yo mismo utilizo las versiones de desarrollo y producción /dist.

• Webpack tiene menos trabajo que hacer y termina un poco antes. (YRMV)
• Los documentos de React dicen que /dist/react.min.jsestá optimizado para la producción. No he leído ninguna prueba de que 'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') }plus uglify funcione tan bien como '/ dist / react.min.js`. No he leído ninguna prueba de que obtenga el mismo código resultante.
• Recibo 1 mensaje de advertencia de uglify en lugar de 3 del ecosistema react / redux.

Puede hacer que webpack use las /distversiones con:

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

Para la compilación basada en paquetes web, solía configurar webpack.config.js separados para DEV y PROD. Para Prod, resuelva el alias como se muestra a continuación

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

Puedes encontrar el que funciona desde aquí

Si está trabajando desde algo como este tutorial de ReactJS.NET / Webpack , no puede usar process.env para activar / desactivar el modo de desarrollo de React, hasta donde yo sé. Este ejemplo se vincula a react.js directamente (consulte Index.cshtml ), por lo que solo tiene que elegir .min.js o la variante no minimizada cambiando la URL.

No estoy seguro de por qué ese es el caso, porque el webpack.config.js de la muestra tiene un comentario que parece implicar externals: { react: 'React' }que haría el trabajo, pero luego sigue adelante e incluye reaccionar directamente en la página.

Para única usuarios v4 webpack:

Especificar mode: productiony mode: developmenten su configuración de Webpack definirá el process.env.NODE_ENVuso de DefinePlugin por defecto. ¡No se necesita código adicional!

webpack.prod.js (tomado de documentos)

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

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

Y en nuestro JS:

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

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

Utilizo un proceso de compilación manual que se ejecuta a través de Webpack, por lo que fue un proceso de dos pasos para mí:

1. Establezca la variable de entorno de package.json usando el paquete cross-env:

   "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. Cambie el archivo webpack.config.js para usar la variable de entorno (que se pasa a React para determinar si estamos en modo de desarrollo o producción), y deshabilite la minimización del paquete producido si estamos en modo de desarrollo para que podamos ver el nombres reales de nuestros componentes. Necesitamos usar la propiedad de optimización de webpack en nuestro archivo webpack.config.js para esto:

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

paquete web v4.41.5, React v16.9.19, cross-env v7.0.0, nodo v10.16.14