Если вы нативный разработчик iOS или Android, вы не знаете о JavaScript или, возможно, даже не хотите слышать этот термин.
Но что, если ваша компания решила начать изучать React Native? Может быть, вы найдете компанию, более подходящую для вас, или сможете принять вызов и узнать что-то новое.
React Native использует JavaScript и React для создания собственных мобильных приложений. В настоящее время существует два основных подхода: Гринфилд и Браунфилд.
Гринфилд означает использование React Native в целом. Браунфилд, напротив, означает начинать с нативного приложения и постепенно интегрировать компоненты React Native. Какой подход использовать, зависит только от вас, но в обоих случаях вам нужно будет изучить некоторые новые концепции экосистемы React Native, даже если вы используете какой-то волшебный инструмент, такой как Expo или Create React Native App.
Один из них - Вавилон. Babel - это транспилятор. Какие?!? Транспилер - это инструмент, который читает исходный код, написанный на одном языке программирования, и производит эквивалентный код на другом языке.
React Native использует Babel для преобразования синтаксиса React и нового синтаксиса ES5 + в код, который можно запускать в среде JavaScript, не поддерживающей эти функции.
Из коробки Babel ничего не делает. Он в основном анализирует код, а затем снова генерирует тот же код.
Чтобы привнести немного волшебства, вам нужно интегрировать плагины (или пресеты, набор плагинов), чтобы Babel мог что-либо делать.
Плагины и пресеты могут быть установлены как пакеты с помощью yarn (или npm) - менеджера пакетов для JavaScript - объявив их в файле с именем package.json
. Пакеты доступны как зависимости или devDependencies. Разница зависит от их использования. Фактически, в то время как первые требуются во время выполнения, вторые требуются во время разработки.
Типичная конфигурация приложения React Native Brownfield может быть следующей:
Запустив команду yarn install
, yarn загружает все необходимые зависимости в папку с именем node_modules
. Стоит отметить, что ни один из плагинов или пресетов для Babel не был указан, поскольку они были разрешены автоматически.
Очевидно, вы можете столкнуться с ситуацией, когда вам потребуется интегрировать определенный пресет или плагин Babel.
Например, если вы используете много console.log
вызовов в своем приложении React Native, вы можете столкнуться с проблемами производительности. Чтобы исправить это, вы можете установить плагин под названием babel-plugin-transform-remove-console, который удаляет все console.*
вызовы, обнаруженные в вашем коде.
Установить этот плагин так же просто, как ввести следующую команду:
Следующим шагом является настройка Babel, чтобы можно было использовать установленный плагин. Этого можно добиться с помощью файла .babelrc
:
Под капотом Babel читает .babelrc
файл в поисках плагинов (или пресетов), доступных в каталоге node_modules
. Затем он вызывает преобразование (я), предоставляемое плагином (или предустановкой). Преобразования могут выполняться с опциями или без них. Например, если вы хотите исключить console.error
вызовов, вы можете использовать дополнительные параметры, например следующие:
Вот и все! Я надеюсь, что с помощью этой краткой записи я немного подробнее рассказал о темной стороне JavaScript и React Native.
Примечание: React Native обновился до версии 0.57 и теперь использует Babel 7. Если вы хотите узнать больше по этому поводу, я настоятельно рекомендую взглянуть на Обновление до Babel 7 и Обновление до Babel 7. (API) ».
Если у вас есть вопросы или комментарии, давайте обсудим их здесь!