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

Да, это не очень хорошо документировано, но на странице загрузки 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.

реакция-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'))
    }
  }

Для сборки на основе 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 tutorial, вы не можете использовать process.env для переключения разработки React насколько я могу судить. Этот пример напрямую ссылается на response.js(см. Index.cshtml), поэтому вам просто нужно выбрать .min.js или неминифицированный вариант путем изменения URL-адреса.

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