Як увімкнути / вимкнути "режим розвитку" ReactJS?

Розпочато за допомогою функції перевірки реквізиту ReactJS , яка, як кажуть документи, працює лише в «режимі розробки» з міркувань продуктивності.

Здається, React підтверджує властивості певного компонента, який я зазначив, але я не пам’ятаю, щоб явно ввімкнув «режим розробки».

Я намагався шукати, як запустити / увімкнути режим розробки, але не пощастило.

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

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

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

Вищенаведене є найбільш поширеною схемою, і інші бібліотеки також слідують за нею. Отже, щоб "відключити" ці перевірки, нам потрібно переключитиNODE_ENV в"production"

Правильний спосіб відключення "режиму розробки" - це ваш вибір постачальника.

вебпакет

Використовуйте DefinePluginконфігурацію вашого веб-пакета так:

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

Перегляньте

Використовуйте перетворення 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 виводить попереджувальне повідомлення. Я вважаю, що реагує і дом.

Тож вам явно рекомендується використовувати виробничу версію від /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 може виключати лише фрагменти веб-пакету, а не окремі файли.

Я сам використовую і розробку, і /distверсію виробництва .

• Вебпак має менше роботи і закінчується трохи раніше. (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.

Можна використовувати веб-пакет, використовуючи /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.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, наскільки я можу сказати. Цей зразок посилається на react.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