Понимание пакетов React Webpack

Итак, у меня есть несколько вопросов относительно того, как Webpack обслуживает свои пакеты. У меня есть приложение React, созданное с использованием create-react-app. Когда я проверяю пакеты JS в инструментах разработчика Chrome, я вижу все отдельные файлы js, которые я создал в своем приложении React (например, App.js). Но я также вижу другие пакеты, такие как bundle.js, 0.chunck.js и main.js. Однако на вкладке сети отображаются только файлы пакетов. Это указывает на то, что на самом деле были загружены только пакеты Webpack.

введите здесь описание изображения

Итак, вопрос в том, как эти другие отдельные файлы были доставлены в браузер? Мое приложение использует пакет или эти отдельные файлы? Я считаю, что отдельные файлы JS доступны только в режиме «разработки» Webpack, а не в режиме «производства», но я все же хотел бы это понять.

Кроме того, является ли исходный код React частью этих пакетов или React доступен глобально? Если React является частью пакетов, то как инструменты разработки React распознают, что React присутствует на странице, учитывая, что все пакеты Webpack изолированы от всего остального кода?


person darKnight    schedule 06.10.2020    source источник


Ответы (1)


Как вы упомянули в своем вопросе, по какой-то причине вы все еще можете отлаживать свой связанный и, возможно, минимизированный код, как если бы он не был объединен и минимизирован. Причина, по которой это возможно, называется:

Исходные карты

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


Что касается вашего второго вопроса: инструменты разработчика React распознают React, если установлено window.__REACT_DEVTOOLS_GLOBAL_HOOK__. Это свойство представляет собой специальный объект, обеспечивающий связь с серверной частью инструментов разработчика в браузере или автономном приложении. Поскольку это член глобального объекта window, он доступен везде и поэтому не привязан к одному пакету.

person Peter Lehnhardt    schedule 06.10.2020
comment
Спасибо за Ваш ответ. Я хотел понять еще одну вещь. Если я запускаю две версии React на одной странице, будет ли конфликт в инструментах разработки? - person darKnight; 07.10.2020