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

Ответ 1

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

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

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

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

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

WebPack

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

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"

Bonus

При преобразовании преобразованного кода вы можете использовать "Dead Code Elimination". DCE - это когда minifier достаточно умен, чтобы понять, что: "production" !== "production" всегда false и поэтому просто удалит любой код в блоке if, сохраняя ваши байты.

Ответ 2

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

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

В принципе, неограниченная версия React - это режим разработки, а миниатюрная версия React - это "производственный" режим.

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

Ответ 3

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

Предполагая, что вы установите 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.

реакция-dom, redux, реакция-редукция ведут себя аналогичным образом. Redux отображает предупреждение. Я считаю, что реакция тоже.

Поэтому вам явно рекомендуется использовать производственную версию от /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 not recommended. Try to require the original source to get better results. @ ../~/react/dist/react.js 4:478-4851

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

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

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

Вы можете использовать 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'))
    }
  }

Ответ 4

Для сборки на основе 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')
    }

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

Ответ 5

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

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

Ответ 6

Только для пользователей 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