React не «просто работает» из коробки. Он использует ключевые слова и синтаксис, которые нода (начиная с версии 9.3.0, которую мы используем для этого руководства) еще не совсем догнали. Для этого требуется довольно много настроек, которые могут быть громоздкими, и Facebook предоставил опцию, которая упрощает запуск приложения React. Зачем заморачиваться, да?
Дело в том, что create-react-app абстрагирует от вас многое из того, что заставляет приложение React работать — по крайней мере, без его извлечения и необходимости настраивать все параметры вручную. Есть ряд причин, по которым вы можете захотеть сделать свою собственную реализацию или, по крайней мере, иметь некоторое представление о том, что она делает под капотом.
Как я уже упоминал, есть несколько препятствий для запуска приложения React. Во-первых, узел не может обрабатывать весь синтаксис (например, импорт/экспорт и jsx). Во-вторых, вам нужно либо создавать свои файлы, либо каким-то образом обслуживать их во время разработки, чтобы ваше приложение работало. Это особенно важно в последней ситуации.
К счастью, мы можем решить эти проблемы с помощью Babel и Webpack.
Настраивать
Для начала создайте новый каталог для своего приложения React. Затем инициализируйте свой проект с помощью npm init и откройте его в редакторе по вашему выбору. Это также неплохое время для git init. В папке нового проекта создайте следующую структуру:
. +-- public +-- src
Немного подумав, мы в конечном итоге захотим собрать наше приложение и, вероятно, захотим исключить встроенную версию и наши модули узлов из коммитов, поэтому давайте продолжим и добавим файл .gitignore, исключая (как минимум) каталоги node_modules и dist.
Наш каталог public будет обрабатывать любые статические ресурсы и, что наиболее важно, содержит наш файл index.html, который React будет использовать для рендеринга вашего приложения. Следующий код был взят из документации по реакции с некоторыми очень небольшими изменениями. Не стесняйтесь копировать следующую HTML-разметку в новый файл index.html внутри каталога public.
Наиболее важные строки, на которые следует обратить внимание, — это 10, которая является корнем, к которому будет подключаться наше приложение React, и строка 14, которая ссылается на наше (скоро будет) созданное приложение React. Вы можете назвать созданный скрипт как угодно, но я буду использовать bundle.js для этого урока.
Теперь, когда мы настроили нашу HTML-страницу, мы можем приступить к делу. Нам нужно настроить еще несколько вещей. Во-первых, нам нужно убедиться, что код, который мы пишем, может быть скомпилирован, поэтому нам понадобится Babel.
Вавилон
Идите вперед и запустите npm install --save-dev @babel/[email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected].
babel-core — это основной пакет babel. Он нужен для того, чтобы babel выполнял какие-либо преобразования в нашем коде. babel-cli позволяет компилировать файлы из командной строки. preset-react и preset-env — это предустановки, которые преобразуют определенные разновидности кода — в данном случае предустановка env позволяет нам преобразовать ES6+ в более традиционный javascript, а предустановка react делает то же самое, но вместо этого с JSX.
В корне проекта создайте файл с именем .babelrc. Здесь мы сообщаем Babel, что будем использовать пресеты env и react.
У Babel также есть множество доступных плагинов, которые можно использовать, если вам нужно преобразовать только определенные функции или какие-то функции, которые вам нужны, не охватываются env. Мы пока не будем о них беспокоиться, но вы можете ознакомиться с ними здесь.
Вебпак
Теперь нам нужно приобрести и настроить Webpack. Нам понадобится еще несколько пакетов, и вы захотите сохранить их как зависимости для разработчиков: npm install --save-dev [email protected] webpack-cli@3.1.1 webpack-dev-server@3.1.8 style-loader@0.23.0 css-loader@1.0.0 babel-loader@8.0.2.
Webpack использует загрузчики для обработки различных типов файлов для объединения. Он также легко работает вместе с сервером разработки, который мы собираемся использовать для обслуживания нашего проекта React в процессе разработки и перезагрузки страниц браузера при (сохраненных) изменениях в наших компонентах React. Однако, чтобы использовать все это, нам нужно настроить Webpack для использования наших загрузчиков и подготовить сервер разработки.
Создайте новый файл в корне проекта с именем webpack.config.js. Этот файл экспортирует объект с конфигурацией webpack.
Давайте быстро рассмотрим это: entry (строка 5) сообщает Webpack, где запускается наше приложение и где начинать связывать наши файлы. Следующая строка сообщает веб-пакету, что мы работаем в режиме разработки — это избавляет нас от необходимости добавлять флаг режима при запуске сервера разработки.
Объект module помогает определить, как ваши экспортированные модули javascript преобразуются и какие из них включаются в соответствии с заданным массивом rules.
Наше первое правило касается преобразования нашего синтаксиса ES6 и JSX. Свойства test и exclude — это условия для сопоставления файла. В этом случае он будет соответствовать чему угодно за пределами каталогов node_modules и bower_components. Поскольку мы также будем преобразовывать наши файлы .js и .jsx, нам нужно настроить Webpack на использование Babel. Наконец, мы указываем, что хотим использовать пресет env в опциях.
Следующее правило касается обработки CSS. Поскольку мы не обрабатываем наш CSS до или после обработки, нам просто нужно добавить style-loader и css-loader к свойству use. css-loader требует style-loader для работы. loader — это сокращение для свойства use, когда используется только один загрузчик.
Свойство resolve позволяет нам указать, какие расширения будет разрешать Webpack — это позволяет нам импортировать модули без необходимости добавлять их расширения.
Свойство output указывает Webpack, куда поместить наш связанный код. Свойство publicPath указывает, в какой каталог должен помещаться пакет, а также сообщает webpack-dev-server, откуда обслуживать файлы.
Свойство publicPath — это специальное свойство, которое помогает нам с нашим dev-сервером. Он указывает общедоступный URL-адрес каталога — по крайней мере, насколько webpack-dev-server будет знать или заботиться. Если это установлено неправильно, вы получите 404, так как сервер не будет обслуживать ваши файлы из правильного местоположения!
Задаем webpack-dev-server в свойстве devServer. Для наших нужд это не требует многого — просто место, откуда мы обслуживаем статические файлы (например, наш index.html), и порт, на котором мы хотим запустить сервер. Обратите внимание, что devServer также имеет свойство publicPath. Этот publicPath сообщает серверу, где на самом деле находится наш связанный код.
Последнее могло немного сбить с толку. Обратите внимание: output.publicPath и devServer.publicPath разные. Прочтите обе записи. Дважды.
Наконец, поскольку мы хотим использовать Горячую замену модуля, нам не нужно постоянно обновляться, чтобы увидеть наши изменения. Все, что мы делаем для этого с точки зрения этого файла, — это создаем новый экземпляр плагина в свойстве plugins и убеждаемся, что мы установили hotOnly в true в devServer. Однако нам все еще нужно настроить еще одну вещь в React, прежде чем HMR заработает.
Мы закончили с тяжелой настройкой. Теперь давайте заставим React работать!
Реагировать
Для начала нам нужно получить еще два пакета: react@16.5.2 и react-dom@16.5.2. Идите вперед и сохраните их как обычные зависимости.
Нам нужно указать нашему приложению React, где подключиться к DOM (в нашем index.html). Создайте файл с именем index.js в каталоге src. Это очень маленький файл, который много делает с точки зрения вашего приложения React. Проверьте это.
ReactDOM.render — это функция, которая сообщает React, что рендерить и где это рендерить. В этом случае мы рендерим компонент с именем App (который мы скоро создадим), и он рендерится в элементе DOM с корневым идентификатором ( строка 10 из index.html).
Теперь создайте еще один файл в src с именем App.js. Если вы работали с React, используя create-react-app, эта часть должна быть очень знакома. Этот файл является просто компонентом React.
Пока мы здесь, я упомянул, что webpack также обрабатывает CSS (и мы требуем этого нашего компонента). Давайте добавим очень простую таблицу стилей в каталог src.
Ваша окончательная структура проекта должна выглядеть следующим образом, если вы не изменили некоторые имена по пути:
. +-- public | +-- index.html +-- src | +-- App.css | +-- App.js | +-- index.js +-- .babelrc +-- .gitignore +-- package-lock.json +-- package.json +-- webpack.config.js
Теперь у нас есть работающее приложение для реагирования! Мы можем запустить наш сервер разработки, выполнив webpack-dev-server --mode development в терминале. Я бы посоветовал поместить его в свой скрипт start в package.json, чтобы сэкономить целых девять нажатий клавиш.
Отделка ХМР
Если вы сейчас запустите сервер, вы заметите, что ни одно из ваших изменений не приводит к каким-либо изменениям в клиенте. Что дает?
Ну, HMR нужно знать, что на самом деле заменить, и в настоящее время мы ничего не дали ему. Для этого мы воспользуемся пакетом, который нам предоставил один из участников команды реагирования: react-hot-loader@4.3.11.
Вы можете установить это как обычную зависимость — согласно документации
Примечание. Вы можете безопасно установить react-hot-loader как обычную зависимость, а не как зависимость для разработчиков, так как она автоматически гарантирует, что она не будет выполняться в рабочей среде, а занимаемая площадь минимальна.
Теперь импортируйте react-hot-loader в App.js и отметьте экспортированный объект как загруженный в горячем режиме, изменив код следующим образом.
Теперь, когда вы запускаете свое приложение, изменения в коде должны обновлять клиент сразу после сохранения.
Последние подробности
Вы можете заметить кое-что интересное (или, может быть, поразительное) при запуске вашего проекта: встроенные файлы никогда не отображаются в вашем каталоге dist. Видите ли, webpack-dev-server на самом деле обслуживает связанные файлы из памяти — как только сервер останавливается, они исчезают. Чтобы на самом деле создать ваши файлы, мы собираемся использовать собственно webpack — добавьте скрипт с именем build в ваш package.json с помощью следующей команды: webpack --mode development. Вы можете заменить development на production, но если вы полностью опустите --mode, он вернется к последнему и выдаст вам предупреждение.
Это почти охватывает все, что вам нужно, чтобы иметь возможность отображать базовое приложение React, не касаясь create-react-app. Однако есть еще что добавить в реализацию, чтобы сделать ее более полной — например, изображения не настроены для обработки в Webpack, но для этого есть загрузчик. Я оставлю эту реализацию вам. В конце концов, если вам не нужны или вы не хотите обслуживать файлы, это просто раздувание, верно?
Я надеюсь, что эта статья помогла пролить свет на то, что нужно для того, чтобы приложение React заработало, и как работают основы. Я не слишком углублялся в подробности о Babel и Webpack, но, пожалуйста, изучите любую из бесчисленных ссылок, разбросанных по всей статье или непосредственно в их документации. Это потрясающие инструменты, которые на первый взгляд кажутся более пугающими, чем они есть на самом деле, и они могут помочь вывести вашу разработку на новый уровень.
И вот оно! Большое спасибо за упорство до конца этой статьи! Надеюсь, вы нашли это полезным. вы можете подписаться на меня в Medium, Twitter и LinkedIn.
Вы можете поддержать меня, купив мне кофе ☕
Если вам понравилась эта статья, не забудьте хлопнуть в ладоши (совет для профессионалов: это бесплатно)
