Como ativar / desativar o 'modo de desenvolvimento' do ReactJS?

Começou a usar o recurso de validação de prop do ReactJS , que, como dizem os documentos, funciona apenas no 'modo de desenvolvimento' por motivos de desempenho.

React parece validar as propriedades de um componente específico que anotei, mas não me lembro de ativar explicitamente o 'modo de desenvolvimento'.

Tentei pesquisar como ativar / alternar o modo de desenvolvimento, mas não tive sorte.

A outra resposta pressupõe que você esteja usando arquivos externos pré-criados do react, e, embora correto, não é assim que a maioria das pessoas está indo ou deve consumir o React como um pacote. Além disso, neste ponto, quase todas as bibliotecas e pacotes do React também contam com a mesma convenção para alternar entre auxiliares de desenvolvimento durante a produção. O simples uso da reação minificada deixará todas essas otimizações em potencial também.

Por fim, a mágica se resume a React incorporando referências a process.env.NODE_ENVtoda a base de código; estes agem como um recurso de alternância.

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

O acima é o padrão mais comum e outras bibliotecas também o seguem. Portanto, para "desativar" essas verificações, precisamos alternar NODE_ENVpara"production"

A maneira correta de desativar o "modo dev" é através do bundler de sua escolha.

webpack

Use o DefinePluginna sua configuração webpack da seguinte maneira:

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

Browserify

Use a transformação Envify e execute a etapa de construção do browserify com NODE_ENV=production( "set NODE_ENV=production"no Windows)

Resultado

Isso produzirá pacotes configuráveis ​​de saída que tiveram todas as instâncias process.env.NODE_ENVsubstituídas pela string literal:"production"

Bônus

Ao minificar o código transformado, você pode aproveitar a "Eliminação de Código Morto". DCE é quando o minificador é inteligente o suficiente para perceber que: "production" !== "production"é sempre falso e, portanto, remove apenas qualquer código no bloco if, economizando bytes.

Sim, não está muito bem documentado, mas na página de download do ReactJS , ele fala sobre os modos de desenvolvimento e produção:

Fornecemos duas versões do React: uma versão não compactada para desenvolvimento e uma versão reduzida para produção. A versão de desenvolvimento inclui avisos extras sobre erros comuns, enquanto a versão de produção inclui otimizações extras de desempenho e remove todas as mensagens de erro.

Basicamente, a versão não compactada do React é o modo "desenvolvimento" e a versão minificada do React é o modo "produção".

Para estar no modo "produção", inclua a versão reduzida react-0.9.0.min.js

Eu postei isso em outro lugar, mas, francamente, aqui seria um lugar melhor.

Supondo que você instale o React 15.0.1 com npm import react from 'react'ou react = require('react')execute, ./mode_modules/react/lib/React.jsque é a fonte bruta do React.

Os documentos do React sugerem que você use ./mode_modules/react/dist/react.jspara desenvolvimento e react.min.jsprodução.

Se você reduzir /lib/React.jsou /dist/react.jsproduzir, o React exibirá uma mensagem de aviso de que você reduziu o código de não produção:

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 comportam de maneira semelhante. Redux exibe uma mensagem de aviso. Eu acredito que a reação também.

Portanto, você é claramente incentivado a usar a versão de produção de /dist.

No entanto, se você reduzir as /distversões, o UglifyJsPlugin do webpack irá reclamar.

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

Você não pode evitar esta mensagem porque o UglifyJsPlugin pode excluir apenas blocos da Webpack, não arquivos individuais.

Eu mesmo uso as versões de desenvolvimento e produção /dist.

• O Webpack tem menos trabalho a fazer e termina um pouco antes. (YRMV)
• Os documentos do React dizem que /dist/react.min.jsestão otimizados para produção. Não li nenhuma prova de que o 'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') }plus uglify faça um trabalho tão bom quanto '/ dist / react.min.js`. Não li nenhuma prova de que você obtenha o mesmo código resultante.
• Recebo 1 mensagem de aviso do uglify em vez de 3 do ecossistema react / redux.

Você pode fazer com que o webpack use as /distversões com:

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 a compilação baseada no webpack, eu costumava configurar o webpack.config.js separado para DEV e PROD. Para Prod, resolva o alias como abaixo

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

Você pode encontrar o que está trabalhando aqui

Se você estiver trabalhando com algo como este tutorial do ReactJS.NET / Webpack , não poderá usar o process.env para ativar / desativar o modo de desenvolvimento do React, tanto quanto eu sei. Este exemplo vincula diretamente o react.js (consulte Index.cshtml ), portanto, basta escolher .min.js ou a variante não minificada alterando o URL.

Não sei por que esse é o caso, porque o webpack.config.js da amostra tem um comentário que parece implicar externals: { react: 'React' }que o trabalho seria feito, mas depois prossegue e inclui reagir diretamente na página.

Apenas para usuários do Webpack v4:

A especificação mode: productione mode: developmentna configuração do Webpack definirá o process.env.NODE_ENVuso do DefinePlugin por padrão. Não é necessário código adicional!

webpack.prod.js (extraído de documentos)

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

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

E no nosso JS:

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

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

Eu uso um processo de criação manual que é executado no Webpack, portanto foi um processo de duas etapas para mim:

1. Defina a variável de ambiente do package.json usando o pacote 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. Altere o arquivo webpack.config.js para usar a variável de ambiente (que é passada para o React para determinar se estamos no modo de desenvolvimento ou produção) e desative a minimização do pacote produzido se estiver no modo de desenvolvimento para que possamos ver o nomes reais de nossos componentes. Precisamos usar a propriedade de otimização do webpack em nosso arquivo webpack.config.js para isso:

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

webpack v4.41.5, React v16.9.19, env-v7.0.0, nó v10.16.14