Metro Bundler в родном React

React Native — это платформа, на которой мы можем создавать приложения для Android и IOS с единой кодовой базой, и ее сообщество растет день ото дня в геометрической прогрессии. Так что, если вы увлеченный ученик и хотите знать, что происходит за кулисами React Native и какая магия на самом деле заставляет вещи работать на экранах, то вы попали по адресу. (Я)

Если вы когда-нибудь замечали «Running Metro Bundler», написанное во время работы сервера node с помощью «npm start» после сборки приложения через CLI с помощью «react-native run-android» или «react-native run-ion», и задавались вопросом, что это Метро написано в терминале?

Без проблем! продолжайте, и я покажу вам основные функции сборщика Metro и то, как он поддерживает реагирующую нативную структуру.

1*fKVUxr9SYPqcSFOiPhPBtA.png

Что такое Метро?

Metro — это сборщик JavaScript, который принимает параметры, файл ввода и возвращает вам файл JavaScript, включая все файлы JavaScript. Каждый раз, когда вы запускаете нативный проект, компиляция многих файлов javascript выполняется в один файл. Эта компиляция выполняется сборщиком, который называется Metro. Metro запускается вместе с сервером node, который запускается с помощью «npm start», и мы можем видеть BUNDLE, написанный в зеленом поле на изображении выше, которое показывает объединение файлов каждый раз, когда мы запускаем новый проект или перезагружаем текущий.

Как Metro помогает React Native?

Упаковщик делает несколько вещей:

1.) Наиболее важной особенностью Metro является предоставление циклов перезагрузки менее секунды, поскольку они очень быстро добавляют и отлаживают пользовательские интерфейсы приложений за считанные секунды, поэтому вам не нужно ждать, пока все приложение перезапустится и начнет работать. Аналогичная функция интегрирована в библиотеку Flutter, которая также является кроссплатформенным инструментом для создания мобильных приложений.

2.) Еще одна функция — обеспечить быстрый запуск приложения на устройстве/эмуляторе за счет быстрой скорости связывания.

3.) Metro объединяет весь код javascript в один файл и переводит любой код Javascript, который устройство не понимает (например, JSX или какой-либо новый синтаксис javascript)

4.) Metro конвертирует активы (например, файлы PNG) в объекты, которые могут отображаться с помощью ‘Изображение‘ составная часть.

Таким образом, мы можем сказать, что некоторые из наиболее важных и интересных функций, которые обеспечивают разработчикам React Native хороший опыт разработки, связаны с Metro Bundler.

Как работает Metro или как происходит процесс объединения?

В процессе объединения Metro состоит из трех отдельных этапов:
Разрешение
Трансформация
Сериализация

1*1cg1bK2zaksMciAbGsj-5Q.png

Процесс объединения

Разрешение
Metro необходимо построить ориентированный граф всех модулей, которые требуются от точки входа, чтобы начать процесс сборки. Чтобы определить, какой файл требуется из другого файла, Metro использует преобразователь. Например, чтобы лучше понять, если у нас есть приложение с несколькими экранами, библиотеки навигации создают направленную карту экранов в соответствии с их порядком, аналогично тому, как разрешение отображает файлы javascript в порядке.
Как показано на графике выше, этот этап происходит параллельно с этапом трансформации.

Трансформация
Все модули проходят через трансформатор. Преобразователь отвечает за преобразование модуля в формат, понятный целевой платформе (например, React Native). Преобразование модулей происходит параллельно в зависимости от количества имеющихся у вас ядер.

Сериализация
После прохождения процесса трансформации и преобразования модулей в доступный формат они будут сериализованы. Сериализатор объединяет модули для создания одного или нескольких пакетов. Пакет — это буквально набор модулей, объединенных в один файл JavaScript.

Чтобы узнать больше о пакетировании или о том, как работает Metro, посетите их документы и ознакомьтесь с ними. Вы также можете внести свой вклад в их репозиторий Github:

Создавайте и решайте задачи. Веселиться!

Резюме

Metro — отличный упаковщик, используемый нативной библиотекой React, который делает возможным множество интересных вещей за считанные секунды времени выполнения. React Native еще предстоит пройти долгий путь, чтобы достичь вершины этой отрасли с экспоненциально растущей конкуренцией со стороны своего конкурента Flutter.

Развитие и доработки таких библиотек укрепят корни React Native и дадут силы выделиться среди возможных конкурентов, может быть, не сейчас, а когда Ночи будут Темнее и Полны Ужасов!! 😉

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *