Как посмотреть программный код, сгенерированный веб-пакетом, для поиска таких строк, как Component, useState или render?

Question

Код, который должен проверить, использует ли веб-страница ReactJS:

if(!!window.React ||
   !!document.querySelector('[data-reactroot], [data-reactid]'))
  console.log('React.js');

, не работает для простого приложения, созданного с помощью npx create-react-app my-app.

Можем ли мы посмотреть в код, сгенерированный webpack, чтобы определить, есть ли в нем код React? Например, правда ли, что даже если код будет запутан, некоторые имена API или свойств / методов останутся там, например Component, render, useState и useEffect? Есть ли способ заглянуть в сгенерированный webpack код программно для поиска этих строк? Можем ли мы сделать это один раз и просто в консоли разработчика, без поиска во всех различных файлах скриптов? Некоторые веб-сайты могут ссылаться на файлы 35 .js.

(и еще лучше, если мы сможем узнать номер версии. В объекте React есть свойство version, но я не являюсь Вы уверены, что это будет запутано - имена свойств, вероятно, не запутаны?)

Answer 1

Вам следует взглянуть на source-map, что позволяет вам включить исходный источник, сопоставленный с «запутанным» кодом веб-пакета. Это позволит вам увидеть исходный код в вашем браузере и упростит отладку.