브라우저에서 런타임에 실행 중인 React 버전을 어떻게 알 수 있습니까?

브라우저에서 런타임에 실행 중인 React 버전을 어떻게 알 수 있습니까?

브라우저에서 React 런타임 버전을 알 수 있는 방법이 있나요?

React.version이치노

다만, 문서화되어 있지 않기 때문에(내가 아는 한), 안정된 기능은 아닐 수 있습니다(즉, 가능성이 낮지만, 장래의 릴리스에서는 없어지거나 변경될 가능성이 있습니다).

「 」의 React( Import)

const REACT_VERSION = React.version;

let root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <div>React version: {REACT_VERSION}</div>
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>

「 」의 React(「Import」)

import { version } from 'react';

console.log(version);

」를 Import 하는 는, 「 」가 .React모듈로서 글로벌 범위에는 포함되지 않습니다.위 코드는 웹 팩을 사용하는 등 앱의 나머지 부분과 함께 제공되도록 제작되었습니다.브라우저 콘솔에서 사용하면 사실상 작동하지 않습니다(맨 Import 사용).

이 두 번째 접근법이 권장됩니다.대부분의 웹사이트에서 이 기능을 사용합니다. create-react-app은 이 기능을 수행합니다(뒤에서 웹 팩을 사용하고 있습니다).이 경우,React는 캡슐화되어 있으며 일반적으로 번들 외부(브라우저 콘솔 등)에서는 전혀 액세스할 수 없습니다.

명령줄에서 다음을 수행합니다.

npm view react version
npm view react-native version

React Devtools가 설치된 경우 브라우저 콘솔에서 다음을 실행할 수 있습니다.

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.forEach(r => console.log(`${r.rendererPackageName}: ${r.version}`))

출력은 다음과 같습니다.

react-dom: 16.12.0

또는 한 도구를 Dev Tools를 실행합니다.require('React').version콘솔로 이동합니다.

페이스북과 같은 웹사이트에서도 어떤 버전을 사용하고 있는지 알 수 있습니다.

글로벌 ECMAScript 변수를 내보냈는지 확실하지 않으며 html/css가 반드시 React를 나타내는 것은 아닙니다.그러니까 .js를 찾아봐

방법 1: ECMAScript:

버전 번호는 react-dom과 react 양쪽 모듈에 의해 내보내지지만 대부분의 경우 이러한 이름은 번들에 의해 삭제되며 액세스할 수 없는 실행 컨텍스트 내에 숨겨져 있습니다.뛰어난 브레이크 포인트는 값을 직접 나타내거나 ECMAScript를 검색할 수 있습니다.

1. 웹 페이지를 로드합니다(https://www.instagram.com를 사용해 보십시오.모두 Coolaiders입니다).
2. 크롬(control+shift+i 명령어+shift+i)
   1. 소스 탭에서 Dev 도구를 엽니다.
3. 상단 메뉴바의 오른쪽 끝에 있는 세로줄임표를 클릭하여 모든 파일 검색을 선택합니다.
4. 대문자 왼쪽 유형 FIRED의 검색 상자에 대/소문자 무시 확인란을 선택 취소하고 Enter를 입력합니다.
   1. 하나 이상의 일치 항목이 아래에 표시됩니다.버전은 버전인 "16.0.0"과 같은 검색 문자열에 매우 가까운 내보내기입니다.
5. 버전 번호가 바로 표시되지 않는 경우: 행 번호로 시작하는 행을 두 번 클릭합니다.
   1. ECMAScript가 가운데 창에 표시됩니다.
6. 버전 번호가 즉시 표시되지 않는 경우: ECMAScript 창 {}의 왼쪽 아래에 있는 두 개의 중괄호를 클릭합니다.
   1. ECMAScript를 다시 포맷하여 읽기 쉬움
7. 버전 번호가 바로 표시되지 않는 경우: 위아래로 몇 줄 스크롤하여 찾거나 다른 검색 키를 사용해 보십시오.
   1. 코드가 최소화되지 않은 경우 ReactVersion을 검색합니다. 같은 값의 히트 수가 2개여야 합니다.
   2. 코드가 최소화된 경우 SECRET_INTERNALS_DO_NOT_USE_OR_ 중 하나를 검색합니다.유_Will_BE_BORED 또는 react-dom
   3. 또는 "15" 또는 "16" 또는 "0.15"와 같이 버전 문자열 자체를 검색합니다.

방법 2: DOM 브레이크 포인트 사용:

1. React에서 렌더링한 페이지 로드
2. 요소 등 의 것를 오른쪽 하여 [React]를 선택합니다.Inspect Element
   1. 에 Chrome Developer Tools가 됩니다.Elements 표시
3. 선택한 요소에서 가능한 한 높은 위치에 있지만 React root 요소(종종 ID root: <div id="root">인 본문 바로 안쪽 div)보다 높지 않은 경우 요소를 마우스 오른쪽 버튼으로 클릭하고 선택합니다.Break On… - subtree modifications
   1. 주의: [Elements]탭의 내용(DOM 의 현재 상태)과 [Networks]탭의 같은 소스에 대한 응답을 비교할 수 있습니다.이를 통해 React의 근본 요소가 드러날 수 있습니다.
4. 주소 표시줄 왼쪽 새로고침을 클릭하여 페이지를 새로고침합니다.
   1. 하고 Chrome Developer Tools가 됩니다.Sources 표시
5. 페인으로, 「 」를 조사합니다.Call Stack
6. 스택의 한 에 " " "가 해야 합니다.renderentry,은 「」, 「」입니다.ReactDOM.render
7. 합니다.render, "Render"를 호출합니다
8. 가운데 페인에 ECMAScript 가 표시되고 .render 가 포함된 식이 강조 표시됩니다.
9. 호출에 위에 . 이 개체 위에 마우스 커서를 놓습니다.react-dommodule exports 객 module
   1. 코드 행이 다음과 같은 경우: Object(u.render)(…, u 위에 마우스를 놓으십시오.
10. 툴팁 창에는 음음음 a a a a a a a a a a a a가 표시됩니다.version: "15.6.2", 「」, 「」에 export 되는 모든 react-dom

리액트 개발 툴에도 버전이 삽입되어 있습니다만, 제가 알기론 어디에도 표시되지 않습니다.

먼저 Install React dev tool이 설치되어 있지 않은 경우 다음 코드를 브라우저 콘솔에서 사용합니다.

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version

할 수 있는 방법은 React로 입니다.render'CHANGE: 'CHANGE: 'CHANGE:

<p>{React.version}</p>

은 다음과 같이 React를 로 하고 있습니다:「Import」라고 하는 것을 전제로 하고 있습니다.import React from 'react'

리액트 DevTools를 사용합니다.window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version

다음은 실제 가동 중인 웹 사이트(nikolovlazar.com)에서 실행한 경우의 출력입니다.

을 실행합니다.window.React.version

Safari와 Chrome에서는 0.12.2에서 16.2.0으로 업그레이드 할 때 사용할 수 있었습니다.

npm 또는 실 중 어느 쪽을 사용하고 있는지에 따라 단말기에서 다음 명령을 실행할 수 있습니다.

npm view react version
or
yarn view react version 

또는 패키지를 열 수도 있습니다.프로젝트의 "dependencies(의존관계)" 체크 아래 json 파일: 세미콜론 뒤에 반응 버전이 표시됩니다.

create-react-app을 사용하여 만든 앱의 경우 버전을 볼 수 있었습니다.

1. Chrome Dev Tools / Firefox Dev Tools를 엽니다.
2. 검색 후 메인 열기.XXXXXXXXX.js 파일(XXXXXXXXX는 빌드 해시 /)은 다를 수 있습니다.
3. 선택 사항: {}을(를) 클릭하여 포맷된 소스를 표시하여 포맷합니다.
4. 소스 내에서 텍스트로 리액트돔을 검색합니다.
5. Chrome에 "react-dom": "^16.4.0",
6. Firefox에 'react-dom'이 있습니다. '^16.4.0'

소스 맵 없이 앱이 배포되었습니다.

index.js 파일에서 App 구성 요소를 "React.version"으로 바꾸기만 하면 됩니다.예.

ReactDOM.render(React.version, document.getElementById('root'));

React v16.8.1에서 확인했습니다.

이 전략은 항상 유효합니다.최종적으로 React는 스크립트 태그를 통해 html의 js 파일에 포함되어야 합니다.파일을 찾아서 React 버전을 찾아보세요.

1. HTML(뷰 소스)에 포함된 모든 스크립트를 확인합니다.
2. 링크 중 하나에는 React 스크립트가 포함되어 있습니다.WebPack은 라이브러리를 공통 xxxx.js 파일로 묶습니다.
3. 스크립트 파일을 열고 Ctrl + f를 사용하여 React를 검색합니다.
4. Presto 버전 번호

웹 팩을 사용한 앱을 이미 배포한 경우.다음 단계에 따라 "react" 및 "react-dom"을 식별할 수 있습니다.

1. 개발자 열기브라우저의 도구
2. 소스 탭으로 이동
3. 해 주세요.appName file.disc 일 .
4. "react" 또는 "react-dom"을 검색하면 다음과 같은 내용을 찾을 수 있습니다.리액트 앱에서 사용하는 버전입니다.

"webpack/sharing/default/default/default?1a9" : () => (loadStrictVersionCheckFallback("기본값", "default", [1,17,0,0],1],/..무엇인가

"webpack/sharing/default/http-dom/http-dom? 8d07" : ( ) = > (loadStrictVersionCheckFallback("default", "http-dom", [1,17,0,0],1],/..무엇인가

또는

registersec-dom", "17.0.2", () // ..뭔가

등록", "17.0.2", ()// ..무엇인가

주의: 배포된 앱에만 적용됩니다.

명령줄 명령을 사용하여 ReactJ 버전을 확인합니다.다음 명령을 실행할 수 있습니다.

npm view react version
          or
yarn view react version 

반응 버전을 확인하려면 패키지를 여십시오.루트 폴더에 있는 json 파일을 검색하여 키워크 반응을 검색합니다.「react」라고 하는 「^16.4.0」이 표시됩니다.

언급URL : https://stackoverflow.com/questions/36994564/how-can-one-tell-the-version-of-react-running-at-runtime-in-the-browser