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

начал использовать ReactJS функция проверки опоры, который, как говорят документы, работает только в "режиме разработки" по соображениям производительности.



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



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

804   5  

5 ответов:

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

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

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

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

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

webpack

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

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

Browserify

использовать Envify преобразование и запустить browserify шаг сборки с NODE_ENV=production ("set NODE_ENV=production" в Windows)

результат

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

бонус

при минимизации преобразованного кода Вы можете воспользоваться "мертвым устранением кода". АКД-это когда английское сокращение Cups умный достаточно, чтобы понять, что: "production" !== "production" и всегда false и поэтому просто удалит любой код в блоке if, сохраняя байты.

115  
2016-12-20 16:02:42

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

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

в основном, в unminified версия реагируешь "развитие" режиме, и уменьшенная версия реагируешь "рабочем режиме".

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

48  
2014-03-01 21:08:13

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

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

реагировать-дом, возвращение, реагировать, я полагаю, вести себя аналогично. Redux отображает предупреждающее сообщение. Я считаю, что react-dom тоже.

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

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

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 может исключать только куски webpack, а не отдельный файл.

я использую как разработку, так и производство /dist версий себя.

  • Webpack имеет меньше работы, чтобы сделать и заканчивает немного раньше. (YRMV)
  • реагировать документы говорят /dist/react.min.js оптимизирован для производства. Я не читал никаких доказательств, что 'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') } плюс уродовать делает, как хорошо выполняет свою работу как '/дист/реагировать.минута.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'))
    }
  }
15  
2016-04-18 16:34:42

для сборки на основе webpack я использовал для настройки отдельного webpack.конфиг.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')
    }

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

4  
2016-06-23 04:27:58

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

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

1  
2016-04-14 15:59:09

Comments

    Ничего не найдено.
Click here to cancel reply.