Вы катаете CRA? Хотите понять основы Webpack и узнать, как настроить среду разработки для React с нуля? Webpack может показаться пугающим, но это не так, и это должно помочь. Есть несколько отличных курсов по Webpack. Это сделано для того, чтобы вы начали.
Если вы новичок в React и только начинаете, я бы посоветовал обратиться к create-react-app или Gatsby. Это предназначено для тех, кто хочет попробовать свои силы и узнать немного больше о Webpack и Babel. Это также предполагает, что вы знакомы с интерфейсом командной строки.
Настраивать
Из интерфейса командной строки создайте новый каталог для вашего нового проекта (например, react-starter)
mkdir react-starter
Поменяйте каталоги в новый проект
cd react-starter
Настройка управления пакетами
Инициализируйте свой проект, запустив yarn init и ответив на вопросы в интерфейсе командной строки. См. Пример package.json.
yarn init
name (react-starter): Нажмите Enter или введите имя вашего проекта
версия (1.0.0): Нажмите Enter или установите версию по вашему выбору
описание: Выбор за вами
точка входа: index.jsx
URL-адрес репозитория: Если возможно, введите URL удаленного репозитория
автор: Это ваша
лицензия (MIT): Нажмите Enter или БЕЗ ЛИЦЕНЗИИ
private : Boolean - истина или ложь
В текущем каталоге будет создан новый package.json файл.
Контроль версий (необязательно)
Теперь давайте инициализируем Git для контроля версий
git init
После инициализации вам нужно создать .gitignore файл в корне проекта и начать с добавления node_modules/ и build/. Вы также можете добавить другие файлы, которые вам не нужны в репозитории (например, .vscode).
Webpack
Во-первых, нам нужно установить некоторые Webpack и связанные / необходимые пакеты.
yarn add -D webpack webpack-command webpack-dev-server webpack-merge html-webpack-plugin path uglifyjs-webpack-plugin extract-text-webpack-plugin@next react-hot-loader file-loader style-loader css-loader
Теперь создайте папку config в корневом каталоге проекта и cd в нее.
mkdir config cd config
Внутри папки config нам нужно создать пять новых файлов. Имена файлов не требуют пояснений.
touch webpack-dev-config.js webpack-prod-config.js webpack-common-config.js webpack-dev-server.js paths.js
Используя ваш любимый текстовый редактор, давайте начнем с конфигурационного файла paths.js. Пути экспортируют некоторые переменные пути, которые мы будем использовать в других файлах конфигурации и сервера Webpack.
Далее идет сервер разработки. Dev-сервер отвечает за локальный запуск вашего проекта. Мы добавим удобные функции, такие как горячая перезагрузка и watchContentBase, для лучшего опыта разработки. Есть много других вариантов, это лишь некоторые из ключевых. См. Встроенные комментарии и официальную документацию.
Теперь создадим наш webpack-common-config.js. Этот файл будет содержать данные конфигурации, которые используются совместно разработанной и производственной сборками. См. Встроенные комментарии.
⚠️ Псевдонимы могут стать немного сложными, когда мы начнем добавлять ESLint, Flow и другие. ESLint будет жаловаться на путь, если он не указан в настройках импорта конфигурации Webpack.
Webpack-dev-config.js содержит данные конфигурации, относящиеся именно к разрабатываемой сборке. См. Встроенные комментарии.
Наконец, производственная конфигурация. Этот файл содержит данные конфигурации, относящиеся к производственной сборке.
Вавилон
Мы используем Babel для транспиляции JavaScript. Добавим необходимые пакеты.
yarn add -D @babel/core @babel/polyfill @babel/preset-env @babel/preset-react babel-loader
Далее нам нужно создать .babelrc файл в корне проекта. В этом файле мы настроим пресеты и плагины babel.
@babel/preset-env - это интеллектуальная предустановка, которая позволяет вам использовать последнюю версию JavaScript без необходимости микроуправления тем, какие синтаксические преобразования необходимы вашей целевой среде.
Если вы собираетесь использовать предлагаемые функции, такие как отдых, распространение и статические свойства класса, вы также захотите добавить сюда эти плагины.
yarn add -D @babel/plugin-proposal-object-rest-spread yarn add -D @babel/plugin-proposal-class-properties
Реагировать
Теперь, когда наша среда разработки настроена, давайте добавим React в проект с помощью Yarn.
yarn add react react-dom
Теперь о некоторых начальных файлах. Давайте создадим новый каталог с именем src в корне проекта. В каталоге src создадим файлы индекса и приложения.
index.html
index.jsx
app.jsx
ℹ️ Мы импортируем нашу таблицу стилейapp.css как «стиль» и используем ее для имени класса как className={style.app}. .app - имя класса, определенное в таблице стилей.
Наконец, давайте добавим немного стартера CSS для тестирования. Создайте другой файл в каталоге src, вызовите app.css и вставьте следующее или что угодно. Просто имейте в виду, что в app.jsx мы ссылаемся на класс .app.
Теперь давайте добавим несколько скриптов в наш файл package.json. Вот полный пример package.json.
На этом этапе мы можем запустить сервер разработки.
yarn start:dev
Вы должны увидеть, что сервер dev работает: http: // localhost: 3000 или любой другой порт, который вы выбрали. Вы также должны увидеть вывод компилятора. Откройте браузер и посмотрите.
Если вы хотите отключить вывод компилятора, установите noInfo: true в файле webpack-dev-server.js .
Готов к строительству
Теперь мы можем просто запустить yarn build, и Webpack поместит код пакета в каталог сборки.
Если вы хотите запустить производственный код локально, установите serve и запустите yarn start:prod
yarn add -D serve yarn start:prod
Это все. Надеюсь, вы нашли это полезным и узнали, как легко использовать Webpack и Babel. Для справки: заполненный код можно найти здесь.
Линтинг?
Чтобы добавить линтинг с помощью ESLint, ознакомьтесь с Линтингом и форматированием Javascript с помощью ESLint, Prettier и Airbnb, который начинается с того места, где мы закончили.
