Меню Рубрики

Установка babel для react

Использование Babel и Webpack для настройки React-проекта с нуля

Существует немало инструментов, позволяющих подготовить среду для React-разработки. Например, в наших материалах учебного курса по React используется средство create-react-app, позволяющее создать шаблонный проект, содержащий всё необходимое для разработки React-приложений. Автор статьи, перевод которой мы публикуем сегодня, хочет рассказать о том, как самостоятельно настроить окружение для разработки React-проектов с использованием Babel и Webpack. Эти инструменты используются и в проектах, создаваемых средствами create-react-app, и мы полагаем, что всем, кто изучает React-разработку, интересно будет познакомиться с ними и с методикой создания React-проектов на более глубоком уровне. А именно, речь пойдёт о том, как сконфигурировать Webpack таким образом, чтобы это средство использовало бы Babel для компиляции JSX-кода в JavaScript-код, и как настроить сервер, используемый при разработке React-проектов.

Webpack

Webpack используется для компиляции JavaScript-модулей. Этот инструмент часто называют «бандлером» (от bundler) или «сборщиком модулей». После его установки работать с ним можно, используя интерфейс командной строки или его API. Если вы не знакомы с Webpack — рекомендуется почитать об основных принципах его работы и посмотреть его сравнение с другими сборщиками модулей. Вот как, на высоком уровне, выглядит то, что делает Webpack.

Webpack берёт всё, от чего зависит проект, и преобразует это в статические ресурсы, которые могут быть переданы клиенту. Упаковка приложений — это очень важно, так как большинство браузеров ограничивает возможности по одновременной загрузке ресурсов. Кроме того, это позволяет экономить трафик, отправляя клиенту лишь то, что ему нужно. В частности, Webpack использует внутренний кэш, благодаря чему модули загружаются на клиент лишь один раз, что, в итоге, приводит к ускорению загрузки сайтов.

Babel

Babel — это транспилятор, который, в основном, используется для преобразования конструкций, принятых в свежих версиях стандарта ECMAScript, в вид, понятный как современным, так и не самым новым браузерам и другим средам, в которых может выполняться JavaScript. Babel, кроме того, умеет преобразовывать в JavaScript и JSX-код, используя @babel/preset-react.

Именно благодаря Babel мы, при разработке React-приложений, можем пользоваться JSX. Например, вот код, в котором используется JSX:

Выглядит такой код аккуратно, он понятен, его легко читать и редактировать. Глядя на него, сразу можно понять, что он описывает компонент, возвращающий элемент

, в котором содержится текст Hello world! , выделенный жирным шрифтом. А вот пример кода, делающего то же самое, в котором JSX не используется:

Преимущества первого примера перед вторым очевидны.

Предварительные требования

Для того чтобы настроить проект React-приложения, нам понадобятся следующие npm-модули.

  • react — библиотека React.
  • react-dom — библиотека, которая поможет нам использовать возможности React в браузере.
  • babel/core — транспиляция JSX в JS.
  • babel/preset-env — создание кода, подходящего для старых браузеров.
  • babel/preset-react — настройка транспилятора для работы с React-кодом.
  • babel-loader — настройка Webpack для работы с Babel.
  • css-loader — настройка Webpack для работы с CSS.
  • webpack — сборка модулей.
  • webpack-cli — работа с Webpack из командной строки.
  • style-loader — загрузка всего используемого CSS-кода в заголовке HTML-файла.
  • webpack-dev-server — настройка сервера разработки.

Теперь создадим, в папке react-scratch , новый проект с помощью npm ( npm init ) и установим некоторые из вышеперечисленных пакетов следующей командой:

Точкой входа в программу будет файл index.js , который содержится в папке src , находящейся в корневой директории проекта. Ниже показана структура этого проекта. Некоторые файлы и папки создаются автоматически, некоторые вам нужно будет создать самостоятельно.

Готовый проект, которым мы будем здесь заниматься, можно найти в этом репозитории.

Папка component будет содержать компоненты проекта (в нашем случае тут присутствует лишь один компонент). В папке dist , в файле main.js , будет находиться скомпилированный код, а index.html — это, как уже было сказано, главный HTML-файл нашего приложения.

Настройка Webpack

Webpack можно настраивать разными способами. В частности, настройки этого инструмента могут принимать вид аргументов командной строки или присутствовать в проекте в виде конфигурационного файла с именем webpack.config.js . В нём нужно описать и экспортировать объект, содержащий настройки. Мы начнём настройку этого файла с описания объекта, выглядящего так (мы будем рассматривать его по частям, а ниже приведём его полный код):

Читайте также:  Установка mac os на виртуал

Свойство entry задаёт главный файл с исходным кодом проекта. Значение свойства mode указывает на тип окружения для компиляции (в нашем случае это окружение разработки — development ) и на то, куда нужно поместить скомпилированный файл.

Работа над проектом

Поместим в файл index.html нашего проекта, расположенный в папке dist , следующий код:

Обратите внимание на тег script , присутствующий в этом файле. Он указывает на файл main.js , который будет получен в ходе компиляции проекта. Элемент

с идентификатором root мы будем использовать для вывода React-приложения.

Теперь установим пакеты react и react-dom:

Внесём в index.js следующий код:

Это — стандартный код для подобных файлов React-приложений. Тут мы подключаем библиотеки, подключаем файл компонента и выводим приложение в тег

Вот код файла app.component.js :

Вот код файла app.component.css :

Настройка Babel

Babel — это транспилятор, обладающий огромными возможностями. В частности, он умеет преобразовывать LESS в CSS, JSX в JS, TypeScript в JS. Мы будем использовать с ним лишь две конфигурации — react и env (их ещё называют «пресетами»). Babel можно настраивать по-разному, в частности, речь идёт о средствах командной строки, о специальном файле с настройками, о стандартном файле package.json . Нас устроит последний вариант. Добавим в package.json следующий раздел:

Благодаря этим настройкам Babel будет знать о том, какие пресеты ему нужно использовать. Теперь настроим Webpack на использование Babel.

Настройка Webpack на работу с Babel

Тут мы воспользуемся библиотекой babel-loader, которая позволит использовать Babel с Webpack. Фактически, речь идёт о том, что Babel сможет перехватывать и обрабатывать файлы до их обработки Webpack.

▍JS-файлы

Вот правила, касающиеся работы с JS-файлами (этот код пойдёт в файл webpack.config.js ), они представляют собой одно из свойств объекта с настройками, экспортируемого этим файлом:

В свойстве rules представленного здесь объекта хранится массив правил, в соответствии с которыми должен быть обработан файл, заданный регулярным выражением, описанным в свойстве test . В данном случае правило будет применяться ко всем файлам с расширениями .m и .js , при этом файлы из папок node_modules и bower_components мы транспилировать не хотим. Далее, тут мы указываем, что мы хотим пользоваться babel-loader. После этого наши JS-файлы будут сначала обрабатываться средствами Babel, а потом упаковываться с помощью Webpack.

▍CSS-файлы

Добавим в массив rules объекта module настройки для обработки CSS-файлов:

Задачу обработки CSS-файлов мы будем решать средствами style-loader и css-loader. Свойство use может принимать массив объектов или строк. Загрузчики вызываются, начиная с последнего, поэтому наши файлы сначала будут обработаны с помощью css-loader. Мы настроили это средство, записав в свойство modules объекта options значение true . Благодаря этому CSS-стили будут применяться лишь к тем компонентам, в которые они импортированы. Css-loader разрешит команды импорта в CSS-файлах, после чего style-loader добавит то, что получится, в форме тега style , в разделе страницы:

▍Статические ресурсы

Продолжим работу над объектом настроек module , описав в нём правила обработки статических ресурсов:

Если система встретит файл с расширением PNG, SVG, JPG или GIF, то для обработки такого файла будет использован file-loader. Обработка таких файлов важна для правильной подготовки и оптимизации проекта.

Настройка сервера разработки

Теперь, в файле webpack.config.js , настроим сервер разработки:

Свойство contentBase объекта с настройками devServer указывает на папку, в которой расположены наши ресурсы и файл index.html . Свойство port позволяет задать порт, который будет прослушивать сервер. Свойство watchContentBase позволяет реализовать наблюдение за изменениями файлов в папке, задаваемой свойством contentBase .

Читайте также:  Установка гидронатяжителя газель 406

Вот полный код файла webpack.config.js :

Теперь внесём в package.json , в раздел scripts , команду для запуска сервера разработки и команду для запуска сборки проекта:

Сейчас всё готово к тому, чтобы запустить сервер разработки следующей командой:

Если теперь перейти по адресу http://localhost:9000, можно будет увидеть страницу нашего проекта.

Страница проекта в браузере

Для того чтобы собрать проект воспользуйтесь следующей командой:

После этого можно будет открыть файл index.html в браузере и увидеть то же самое, что можно было видеть, запустив сервер разработки и перейдя по адресу http://localhost:9000.

Итоги

В этом материале приведён обзор настройки Webpack и Babel для их использования в React-проектах. На самом деле, на той базе, которую мы сегодня разобрали, можно создавать гораздо более сложные конфигурации. Например, вместо CSS можно воспользоваться LESS, вместо обычного JS писать на TypeScript. При необходимости можно, например, настроить минификацию файлов и многое другое. Конечно, если сегодня состоялось ваше первое знакомство с процессом самостоятельной настройки React-проектов, вам может показаться, что всё это очень сложно и куда легче воспользоваться готовым шаблоном. Однако после того, как вы немного в этом разберётесь, вы поймёте, что некоторое увеличение сложности настроек даёт вам большую свободу, позволяя настраивать свои проекты именно так, как вам это нужно, не полагаясь полностью на некие «стандартные» решения и снизив свою зависимость от них.

Уважаемые читатели! Какой подход вы чаще всего используете при подготовке рабочей среды для React-проектов?

источник

Как с нуля создать проект на React, используя Webpack 4 и Babel

Недавно я начал изучать React и для создания проектов я использовал create-react-app, чтобы быстро и без особых усилий добиться желаемого результата. Я подозреваю, что вы тоже используете create-react-app или react-slingshot для создания приложений на React. Ничего не имею против этих инструментов — они хорошо справляются с конфигурацией, в то время как у вас есть возможность сосредоточиться на самом React. Но таким ли способом вы хотите изучить React?

Скорее всего нет, иначе вы бы не читали эту статью.

Начало работы:

Перед тем как мы начнем, вам нужно установить менеджер пакетов nmp на свой компьютер. Он входит в состав Node.js, который вы можете скачать отсюда.

Файловая структура:

Файловая структура для приложения на React

Вы можете создать указанные выше каталоги с помощью этих команд:

Инициализация проекта:

Все проекты, которые используют nmp, должны быть инициализированы. Для инициализации проекта — введите следующую команду в терминале:

Это создаст файл package.json

Вам будет предложено ответить на вопросы, касающиеся проекта. Вы можете пропустить их, нажав enter. Если вы хотите пропустить все вопросы разом — добавьте флажок -y:

Теперь файл package.json будет выглядеть примерно так:

Установка Webpack:

Webpack — это модульный сборщик, который позволяет объединять ресурсы и библиотеки, необходимые для проекта, в один файл. Давайте добавим Webpack в наш проект:

Вышеупомянутая команда добавит webpack и webpack-cli в наш проект , в качестве зависимости dev. Мы установили webpack-cli, чтобы у нас появилась возможность использовать webpack в командной строке.

Установка React:

Установим react и react-dom в качестве зависимости.

Установка Babel:

Для того чтобы React работал, необходимо вместе с ним установить Babel. Он поможет в транспайлинге ES6 и JSX в ES5.

Установите babel-core, babel-loader, babel-preset-env, babel-preset-react в качестве зависимости dev.

  • babel-core: Преобразует код ES6 в ES5.
  • babel-loader: Помощник Webpack для транспайлинга кода, задает пресеты.
  • babel-preset-env: Пресет, который помогает babel конвертировать код ES6, ES7 и ES8 в код ES5.
  • babel-preset-react: Пресет, преобразующий JSX в JavaScript.

Index.js:

Создайте файл index.js внутри корневой папки / src папки и добавьте в него следующую строчку кода:

Читайте также:  Установка валов киа спектра

Этот файл будет точкой входа в наше приложение.

Index.html:

Создайте файл index.html внутри корневой папки / src папки и добавьте в него следующий код:

Entry и Output файл:

Создайте webpack.config.js в корневом каталоге проекта, чтобы мы могли определить наши webpack loaders.

Определите точку входа и выходной каталог нашего приложения внутри webpack.config.js

В приведенном выше коде, Webpack объединит все наши JavaScript файлы в файл index-bundle.js внутри каталога /dist.

Webpack Loaders:

Теперь добавьте в этот файл loaders, которые будут ответственны за загрузку и объединение исходных файлов.

Внутри webpack.config.js добавьте следующие строки кода:

Здесь babel-loader используется для загрузки наших JSX/JavaScript файлов, css-loader для загрузки и объединения всех CSS файлов в один, а style-loader добавит все стили внутрь тега документа style.

Прежде чем Webpack сможет использовать css-loader и style-loader, мы должны установить их в качестве зависимости dev:

Имейте в виду, что Webpack выполняет loaders в обратном порядке: с последнего до первого, то есть справа налево.

.babelrc:

Теперь создайте файл .babelrc внутри корневого каталога проекта, со следующим содержимым:

Данный файл сообщит babel, какие из пресетов использовать для транспайлинга кода. Здесь мы используем два пресета:

  • env: Этот пресет используется для транспайлинга кода ES6/ES7/ES8 в ES5.
  • react: Этот пресет используется для транспайлинга кода JSX в ES5.

Компиляция файлов с помощью Webpack:

Добавьте следующие строки кода в объект script файла package.json, как показано ниже:

Здесь я воспользовался флажком watch, поэтому всякий раз, когда происходит изменение исходных файлов, webpack автоматически скомпилирует все исходные файлы.

В Webpack 4 есть два режима: режим production, который создает оптимизированные файлы, готовые к использованию в режиме production и режим development, который создает легко читаемый код. Флажок —mode позволяет выбрать, какой режим использовать.

Теперь вы можете скомпилировать проект, воспользовавшись следующей командой:

После выполнения вышеприведенной команды, вы увидите файл index_bundle.js, созданный в каталоге /dist . Файл будет содержать код ES5 из файла index.js.

App.js

Создайте файл App.js внутри папки components, находящейся в папке src , со следующим содержимым внутри него:

App.css:

Создайте файл App.css внутри папки styles, находящейся в папке src , со следующим содержимым внутри него:

Данный CSS файл используется, чтобы убедиться, что css-loader и style-loader работают корректно.

Измените файл index.js, который мы создали ранее, добавив следующие строки кода:

Установка Html-webpack-plugin:

Теперь нам нужно установить html-webpack-plugin. Этот плагин генерирует HTML файл, затем вставляет в него скрипт и записывает файл на dist/index.html.

Установите html-webpack-plugin, в качестве зависимости dev:

Теперь нам нужно настроить этот плагин внутри файла webpack.config.js,добавив в него следующий код:

В каталоге /dist мы создаем файл шаблона index.html с введенным скриптом.

Установка почти завершена, осталось скомпилировать исходные файлы с помощью webpack. Вы можете запустить проект, используя следующую команду:

Вы получите выходные данные внутри каталога /dist. Откройте index.html в браузере и вы увидите текст “My React App!”.

У этого подхода есть один недостаток: вам нужно каждый раз вручную обновлять веб-страницу, чтобы увидеть сделанные вами изменения. Чтобы webpack обновлял веб-страницу всякий раз, когда какие-либо изменения вступают в силу, мы можем установить webpack-dev-server.

Установка Webpack-dev-server:

Установите webpack-dev-server, в качестве зависимости dev:

И измените скрипт start в файле package.json, как показано ниже:

Я добавил два флажка —open и —hot , которые ответственны за обновление веб-страницы всякий раз, когда происходят какие-либо изменения в компонентах.

Выполните следующую команду в терминале:

Вы должны увидеть окно браузера, в котором будет точно такое же содержимое, как на следующем скриншоте:

Output in a browser window

Вот и все, теперь у нас есть собственный boilerplate (шаблон) React, который мы можем использовать для создания наших проектов на React. Также вы можете скачать данный шаблон с моего Github.

источник

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

Adblock
detector