С появлением инструмента командной строки Facebook create-react-app большая часть настройки и работы по настройке приложений React.js была абстрагирована. Хотя эта однострочная команда слишком хороша, чтобы быть правдой, она помогает понять некоторые механизмы, происходящие под капотом. Два важных инструмента настройки, которые настраивает приложение create-react-app, - это Babel и Webpack. Что они собой представляют и зачем они нам нужны в наших приложениях React.js?

Вавилон

Babel - это компилятор JavaScript, который переводит новый код ECMAScript 2015+ в код, который старые веб-браузеры могут изначально понимать и читать. Это особенно важно, потому что JavaScript - постоянно развивающийся язык. Например, в ES5 отсутствовали стрелочные функции, let и const, а также синтаксис класса. Смешанность различных версий JavaScript и неспособность некоторых браузеров поддерживать новые языковые функции ES6 сделали Babel популярным.

Специально для разработчиков, работающих с React.js, Babel используется для преобразования синтаксиса JSX в JavaScript с помощью предустановки Babel «react».

Зачем использовать Babel, если большинство современных браузеров уже поддерживают синтаксис ES6 +?

  1. Для удобства. Это позволяет разработчикам писать более короткий код, который затем обрабатывается Babel в совместимый JavaScript, который иначе было бы долго писать. Например, благодаря Babel разработчики могут использовать нестандартный JSX.
  2. Для гибкости. Babel может компилировать синтаксический сахар и языковые функции, которые еще не являются частью ECMAScript. Фактически, он может компилировать функции, которые никогда не могут быть частью ECMAScript. Это возможно благодаря различным плагинам Babel.

Webpack

Webpack - это сборщик модулей и средство выполнения задач. Этот инструмент позволяет нам объединять разные файлы в каталоге нашего проекта, то есть мы можем импортировать код Javascript из одного файла в другой. Webpack упаковывает все файлы и зависимости, то есть все компоненты, модули npm, jQuery и т. Д., Которые необходимо импортировать в один большой файл JavaScript. Это очень удобно, потому что, когда клиент отправляет запрос в наше приложение React, приложение должно передать только один скомпилированный файл. В этом аспекте Webpack - палочка-выручалочка. Он предварительно переваривает множество файлов кода в нашем приложении и объединяет их вместе со всеми зависимостями в один файл.

Babel и Webpack работают под капотом в приложениях React.js, которые настраиваются с помощью команды create-response-app. Хотя приложение create-react-app - удобный и быстрый способ начать проект, вы можете подумать о настройке этих инструментов вручную в соответствии с потребностями вашего проекта.