Как узнать версию react приложения

Обновлено: 23.01.2025

Есть ли способ узнать версию выполнения React в браузере?

Откройте инструменты отладчика, посмотрите на исходные файлы, найдите файл javascript для React и откройте его. Версии библиотек обычно печатаются вверху, даже если они уменьшены. Иногда вы также можете определить версию по имени файла.

3 ответа

React.version - это то, что вы ищете.

Это недокументировано, хотя (насколько я знаю), так что это может быть не стабильная функция (т.е. вряд ли она может исчезнуть или измениться в будущих выпусках).

Очевидно, что если вы импортируете React в качестве модуля, он не будет находиться в глобальной области (то есть в модулях). Сначала вам нужно импортировать его. Например (commonJS):

Я был в состоянии console.log (React.version) в точке входа моей программы, чтобы получить версию @gotofritz Нет? Я только что протестировал с React 16.0.0, и он все еще работал. Какую версию реакции вы используете? Как вы импортируете это? Возможно, это зависит от того, как упаковано приложение. С create-реагировать-приложение не существует глобального объекта React. Нет. React global не существует, если вы импортируете реагировать как модуль. В этом случае вам необходимо сначала импортировать модуль и получить свойство version модуля. @QuentinRoy, я использовал ваш фрагмент в консоли сайтов, использующих ReactJS Не удивительно, что это не сработает, если вы попробуете это, как на производственных сайтах. Второй фрагмент практически никогда не будет работать при непосредственном использовании в браузере (он использует nodeJS require и должен передаваться). Первый может, но многие (если не сказать большинство) веб-сайтов, использующих реагировать, будут инкапсулировать его так, чтобы он не был доступен в глобальном масштабе. То есть вы просто не можете получить к нему доступ, если сами не являетесь разработчиком. Да, я понимаю, что вы говорите, я хотел бы, чтобы был способ получить доступ к версии через окно, используя window.React.VERSION или что-то в этом роде, но с использованием Webpack и я предполагаю, что не иметь его Global - вот и весь смысл ?

Откройте Chrome Dev Tools или аналогичный и запустите require('React').version в консоли.

Это работает на таких сайтах, как Facebook, чтобы узнать, какую версию они используют.

Попробовал . не работает с моим приложением .. беглая версия response-dom v16. Это потому, что сайт, на котором вы его тестируете, не использует requirejs. @JonSchneider @WillHoskings: Интересное наблюдение. Есть ли способ обойти это, или мы застряли? @HoldOffHunger Если я не знаю, если React загрязняет глобальную область действия с помощью глобальной системы «React».

Не исключено, что любые глобальные переменные ECMAScript экспортированы, а html/css не обязательно указывать на React. Итак, посмотрите в .js.

Метод 1: посмотрите в ECMAScript:

Номер версии экспортируется обоими модулями Реакция и реагировать, но эти имена часто удаляются путем группировки, а версия скрыта внутри контекста выполнения, к которому невозможно получить доступ, Умная точка разлома может показать значение напрямую, или вы можете выполнить поиск в ECMAScript:

Загрузите веб-страницу (вы можете попробовать https://www.instagram.com theyre total Coolaiders)
Откройте вкладку Инструменты разработчика Chrome на вкладках Источники (управление + сдвиг + я или команда + сдвиг + i)
- Инструменты Dev открываются на вкладке "Источники".
- Ниже приведено одно или несколько совпадений. Версия - это экспорт, очень близкий к строке поиска, выглядящий как версия: "16.0.0"
- В средней панели появляется ECMAScript
- ECMAScript переформатирован и легче читать.
- Если код не минимизирован, найдите ReactVersion Должно быть 2 удара с одинаковым значением
- Если код минимизирован, найдите либо SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, либо реагировать
- Или найдите наиболее вероятную строку версии: "15. или " 16. или даже "0.15
Метод 2: используйте точку останова DOM:
- Загрузите страницу, созданную с помощью React
- Щелкните правой кнопкой мыши элемент React (что угодно, например поле ввода или поле) и выберите Inspect Element
  - В Chrome Developer Tools отображается панель Elements
  - Примечание. Можно сравнить содержимое вкладки "Элементы" (текущее состояние DOM) с ответом на тот же ресурс на вкладке "Сети". Это может выявить корневой элемент Reacts.
  - Инструменты разработчика Chrome останавливаются в точке останова и отображаются панель Sources
  - если строка кода идет: Объект (u.render) (. , наведите указатель мыши на u
  Версия также вводится в инструменты React dev, но, насколько я знаю, нигде не отображается.
  
  Есть ли способ узнать версию React во время выполнения в браузере?
  
  React.version - это то, что вы ищете.
  
  Хотя он недокументирован (насколько мне известно), поэтому он может быть нестабильным (т.е. маловероятным, он может исчезнуть или измениться в будущих выпусках).
  
  Пример с React , импортированным как скрипт
  
  Пример с React , импортированным как модуль
  
  Очевидно, что если вы импортируете React как модуль, он не будет в глобальной области видимости. Приведенный выше код предназначен для комплектации с остальным приложением, например, используя веб-пакет . Он практически никогда не будет работать, если используется в консоли браузера.
  
  Этот второй подход является рекомендуемым. Большинство сайтов будет использовать его. create-реагировать-приложение делает это (он использует webpack за сценой). В этом случае React инкапсулируется и обычно вообще недоступен вне пакета (например, в консоли браузера).
  
  Откройте Chrome Dev Tools или эквивалентный и запустите require('React').version в консоли.
  
  Это работает и на таких веб-сайтах, как Facebook, чтобы выяснить, какую версию они используют.
  
  Нет уверенности в том, что какие-либо глобальные переменные ECMAScript были экспортированы, и html /css не обязательно указывает React. Так что смотрите в .js.
  
  Метод 1: посмотрите в ECMAScript:
  
  Номер версии экспортируется обоими модулями act-dom и реаги , но эти имена часто удаляются связыванием, а версия скрывается в контексте выполнения, к которому нет доступа. , Умная точка останова может раскрыть значение напрямую, или вы можете искать в ECMAScript:
  1. Загрузите веб-страницу (вы можете попробовать https://www.instagram.com их всего Coolaiders)
  2. Откройте вкладку "Инструменты разработчика Chrome" на вкладке "Источники" (control + shift + i или command + shift + i)
    1. Инструменты разработчика открываются на вкладке "Источники"
    1. Ниже приведены одно или несколько совпадений. Версия является экспортом, очень близким к строке поиска, которая выглядит как версия: "16.0.0" .
    1. ECMAScript отображается в средней панели
    1. ECMAScript переформатируется и его легче читать
    1. Если код не сокращен, выполните поиск по запросу ReactVersion . Там должно быть 2 хита с одинаковым значением
    2. Если код минимизирован, найдите либо SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED , либо response-dom
    3. Или выполните поиск самой вероятной строки версии: "15. или " 16. или даже "0,15 .
    Метод 2. Использование точки останова DOM:
    1. Загрузить страницу, отображаемую React
    2. Щелкните правой кнопкой мыши элемент React (что угодно, например, поле ввода или поле) и выберите Inspect Element
      1. Инструменты разработчика Chrome отображают панель Elements
      1. Примечание. Содержимое вкладки "Элементы" (текущее состояние DOM) можно сравнить с ответом для того же ресурса на вкладке "Сети". Это может раскрыть корневой элемент React
      1. Chrome Developer Tools останавливается на точке останова и отображает панель Sources
      1. если строка кода выглядит следующим образом: Object (u.render) (… , наведите курсор на u
      Версия также внедряется в инструменты разработки React, но, насколько я знаю, нигде не отображается.
      
      Откройте консоль и запустите window.React.version .
      
      Это помогло мне в Safari и Chrome при обновлении формы с 0.12.2 до 16.2.0.
      
      Для приложения, созданного с помощью create-Reaction-app , мне удалось просмотреть версия:
      
      Хотя он недокументирован (насколько мне известно), поэтому он не может быть стабильной функцией (то есть маловероятно, что он может исчезнуть или измениться в будущих выпусках).
      
      Пример с React импортированным как скрипт
      
      Пример с React импортированным как модуль
      
      Очевидно, что если вы импортируете React как модуль, он не будет в глобальной области видимости. Приведенный выше код предназначен для комплектации с остальным приложением, например, используя веб-пакет. Он практически никогда не будет работать, если используется в консоли браузера (он использует пустой ввод).
      
      Этот второй подход является рекомендуемым. Большинство сайтов будут использовать его. create-реагировать-приложение делает это (он использует webpack за сценой). В этом случае React инкапсулируется и, как правило, вообще недоступен за пределами пакета (например, в консоли браузера).
      
      Для приложения, созданного с помощью create-реагировать-приложения, мне удалось увидеть версию:
      1. Открыть Chrome Dev Tools / Firefox Dev Tools,
      2. Найдите и откройте файл main.XXXXXXXX.js, где XXXXXXXX - хеш сборок / может отличаться,
      3. Необязательно: отформатируйте источник, нажав <>, чтобы отобразить отформатированный источник,
      4. Искать как текст внутри источника для Reaction-DOM,
      5. в Хроме было найдено: «реаги-дом»: «^ 16.4.0»,
      6. в Firefox было найдено: 'Reaction-Dom': '^ 16.4.0
      Приложение было развернуто без исходной карты.
      
      В существующем проекте простой способ увидеть версию React - перейти к методу render любого компонента и добавить:
      
      Предполагается, что вы импортируете React следующим образом: import React from 'react'
      
      Откройте Chrome Dev Tools или эквивалентный и запустите require('React').version в консоли.
      
      Это работает на сайтах, таких как Facebook, чтобы узнать, какую версию они используют.
      
      С установленным React Devtools вы можете запустить его из консоли браузера:
      
      Я собираюсь обновить ответную систему, но прежде чем сделать это, мне нужно знать, с какой версии я обновляюсь, чтобы узнать, есть ли какие-либо особые замечания по обновлению с моей версии.
      
      Как мне найти версиюact-native, установленную на моем Mac?
      
      Чтобы увидеть, какая у вас версия на вашем Mac (Window также может запускать этот код.), Запустите react-native -v , и вы должны получить что-то вроде этого:
      
      Если вы хотите узнать, какая версия вашего проекта запущена, посмотрите в /node_modules/react-native/package.json и найдите ключ version :
      
      Вы также можете открыть свой файл package.json в node_modules -> react-native .
      
      Перейдите в корень вашего приложения и выполните следующую команду:
      
      В моем случае это что-то вроде ниже,
      
      Чтобы увидеть локальные пакеты, установленные в вашем проекте, включая их версии и без их зависимостей, выполните команду ниже из корневого каталога проекта. В нативном приложении React это будет включать в себя реактивный пакет.
      
      Сначала убедитесь, что npm установлен в вашей системе. Используйте: [Sudo] npm install npm -g для загрузки и установки.
      
      Просто выполните «аудит npm» в каталоге вашего проекта, а затем перейдите в файл package.json вашего проекта. В файле package.json вы найдете все версии и имена пакетов. Это должно работать независимо от ОС.
      
      Лучшая практика для проверки реагирования на нативную информацию о среде.
      
      который даст информацию
      
      Если вы установили «act-native »глобально, просто откройте инструмент терминала/командной строки и введите react-native -v , и вы получите ответ.
      
      И если вы установили «реактивный» для определенного проекта, откройте инструмент терминала/командной строки, а затем перейдите к своему проекту и введите react-native -v , и вы получите ответ.
      
      Читайте также: