Как включить / выключить режим разработки ReactJS?

Начал использовать функцию проверки свойств ReactJS , которая, как сказано в документации, работает только в «режиме разработки» по соображениям производительности.

React, похоже, проверяет свойства конкретного компонента, который я аннотировал, но я не помню, чтобы явно включал «режим разработки».

Я попытался найти, как запустить / переключить режим разработки, но безуспешно.

Другой ответ предполагает, что вы используете внешние предварительно созданные файлы из react, и хотя это правильно, большинство людей собираются или должны использовать React как пакет не так. Более того, на данный момент почти все библиотеки и пакеты React также полагаются на одно и то же соглашение об отключении помощников времени разработки во время производства. Простое использование минимизированной реакции оставит все эти потенциальные оптимизации на столе.

В конечном итоге все волшебство сводится к тому, что React встраивает ссылки на process.env.NODE_ENVвсю кодовую базу; они действуют как переключатель функций.

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

Вышеупомянутый шаблон является наиболее распространенным, и другие библиотеки также следуют ему. Итак, чтобы «отключить» эти проверки, нам нужно переключиться NODE_ENVна"production"

Правильный способ отключить "режим разработчика" - через выбранный вами сборщик.

WebPack

Используйте DefinePluginв своей конфигурации веб-пакета так:

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

Browserify

Используйте преобразование Envify и запустите этап сборки просмотра с помощью NODE_ENV=production( "set NODE_ENV=production"в Windows)

результат

Это приведет к созданию выходных пакетов, в которых все экземпляры process.env.NODE_ENVзаменены строковым литералом:"production"

бонус

При минимизации преобразованного кода вы можете воспользоваться «Исключением мертвого кода». АКД это когда Minifier умна достаточно , чтобы понять , что: "production" !== "production"это всегда ложь , и так будет просто удалить какой - либо код в блоке , если вы экономить байты.

Да, это не очень хорошо документировано, но на странице загрузки ReactJS говорится о режимах разработки и производства:

Мы предоставляем две версии React: несжатую версию для разработки и минифицированную версию для производства. Версия для разработки включает дополнительные предупреждения об общих ошибках, тогда как производственная версия включает дополнительную оптимизацию производительности и удаляет все сообщения об ошибках.

По сути, унифицированная версия React - это режим «разработки», а минимизированная версия React - это «производственный» режим.

Чтобы перейти в рабочий режим, просто включите уменьшенную версию react-0.9.0.min.js

Я разместил это в другом месте, но, честно говоря, здесь было бы лучше.

Предполагая, что вы устанавливаете React 15.0.1 с помощью npm import react from 'react'или react = require('react')запускаете./mode_modules/react/lib/React.js исходный код React.

В документации React предлагается использовать ./mode_modules/react/dist/react.jsдля разработки иreact.min.js для производства.

Если вы минимизировали /lib/React.jsили /dist/react.jsпроизводите, React отобразит предупреждающее сообщение о том, что вы минимизировали непроизводственный код:

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 ведут себя аналогично. Redux отображает предупреждающее сообщение. Я считаю, что react-dom тоже.

Поэтому вам явно рекомендуется использовать производственную версию от /dist .

Однако, если вы /distуменьшите версии, UglifyJsPlugin веб-пакета будет жаловаться.

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

Вы не можете избежать этого сообщения, потому что UglifyJsPlugin может исключать только фрагменты веб-пакета, а не отдельные файлы.

Я сам использую как рабочую, так и рабочую /distверсию.

• У Webpack меньше работы, и он завершается немного раньше. (YRMV)
• В документации React говорится, что /dist/react.min.jsон оптимизирован для производства. Я не читал никаких доказательств того, что 'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') }плюс uglify работает так же хорошо, как / dist / react.min.js. Я не читал доказательств того, что вы получаете тот же результирующий код.
• Я получаю 1 предупреждающее сообщение от uglify, а не 3 от экосистемы react / redux.

Вы можете использовать webpack /distверсии с:

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

Для сборки на основе webpack я использовал отдельный webpack.config.js для DEV и PROD. Для Prod разрешите псевдоним, как показано ниже

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

Вы можете найти рабочий отсюда

Если вы работаете с чем-то вроде этого учебника ReactJS.NET / Webpack , вы не можете использовать process.env для включения / выключения режима разработки React, насколько я могу судить. Этот образец напрямую ссылается на response.js (см. Index.cshtml ), поэтому вам просто нужно выбрать .min.js или неминифицированный вариант, изменив URL-адрес.

Я не уверен, почему это так, потому что в примере webpack.config.js есть комментарий, который, кажется, подразумевает, что externals: { react: 'React' }он выполнит свою работу, но затем идет дальше и включает реакцию непосредственно на страницу.

Для только WebPack пользователей v4:

Указание mode: productionи mode: developmentв вашей конфигурации Webpack определитprocess.env.NODE_ENV по умолчанию использование DefinePlugin. Дополнительный код не требуется!

webpack.prod.js (взято из документации)

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

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

А в нашем JS:

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

Документы Webpack: https://webpack.js.org/guides/production/#specify-the-mode

Я использую процесс сборки вручную, который выполняется через Webpack, поэтому для меня это был двухэтапный процесс:

1. Установите переменную окружения из package.json с помощью пакета 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. Измените файл webpack.config.js, чтобы использовать переменную среды (которая передается в React, чтобы определить, находимся ли мы в режиме разработки или производства), и отключите сворачивание созданного пакета, если мы находимся в режиме разработки, чтобы мы могли видеть фактические названия наших компонентов. Для этого нам нужно использовать свойство оптимизации webpack в нашем файле webpack.config.js :

   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, узел v10.16.14