Как настроить окружение для фронтенд-проекта

~8 минут

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции

Как настроить окружение для фронтенд-проекта главное изображение

Третий проект в программе «Фронтенд-разработчик» — это первое настоящее фронтенд-приложение. Настройка окружения тут немного сложнее, чем в случае первых двух проектов, где надо было написать консольные утилиты.

Настройка проекта
CodeClimate и Eslint
Webpack
Установка плагинов
Запуск локального сервера
Makefile
Установка Bootstrap
Vercel

Хекслет предлагает очень простой способ сделать это. Собственно, когда система подготовит на вашем Гитхабе репозиторий, первый шаг проекта будет заключаться в следующем:

Скопировать в свой проект заготовку из GitHub hexlet-boilerplates/webpack-package
Установить зависимости, выполнив make install
Установить Bootstrap.
Скопировать в index.html верстку из демонстрационного проекта.
«Задеплоить на Vercel» (что бы это ни значило).

Но мне хотелось пройти по всем шагам настройки окружения самостоятельно.

Я разобрался как смог, законспектировал и хочу поделиться тем, как у меня это получилось.

Настройка проекта

Подробнее: первый проект, шаг 1.

Клонируем репозиторий

git clone [адрес проекта]

Инициализируем проект, отвечая на вопросы. В качестве имени пакета указываем @hexlet/code.

npm init

Примечание. Не забудьте про файл .gitignore, куда нужно внести каталоги и файлы, которые не относятся непосредственно к проекту. Например, node_modules

CodeClimate и Eslint

Подробнее: первый проект, шаг 4.

Зарегистрируем репозиторий на сайте CodeClimate. Там в настройках для этого репозитория ищем коды для бейджей. Нам нужен код markdown для бейджа Maintainability. Добавляем этот бейдж в README.md. Тут тоже ничего нового.

Установим линтер Eslint в зависимости для разработки, а для него — базовую конфигурацию airbnb и поддержку импортов

npm install -D eslint eslint-config-airbnb-base eslint-plugin-import

Настроим Eslint, создав файлы .eslintrc.yml. Можно сделать это с нуля, воспользовавшись официальной документацией, можно запустить кофигуратор npm init @eslint/config и ответить на вопросы, а можно подсмотреть в hexlet-boilerplates/webpack-package.

Примечание. Не забудьте про файл .eslintignore, куда нужно внести каталог node_modules с загруженными пакетами, чтобы сконцентрироваться только на ваших файлах

Webpack

Теперь приступим к тому, чего не было в прошлых учебных проектах. Устанавливаем Webpack.

Полезные ссылки:

Инструкция на Хекслете
Официальное руководство
Инструкция, которая покрывает установку Webpack и Bootstrap

Необходимо установить пакеты webpack (собственно он) и webpack-cli (утилиты командной строки). Так как они нужны только на этапе разработки, то устанавливать следует в devDependencies (флаг -D или --save-dev)

npm install -D webpack webpack-cli

Теперь нам нужно создать три файла:

index.html — стартовую веб-страницу. Сюда не нужно добавлять CSS- и JS- файлы. Их будет добавлять сам Webpack при каждой сборке приложения. В этом файле будет располагаться вся верстка RSS-агрегатора. Если вы не сильны в верстке, то можно просто скопировать код из демонстрационного проекта.
src/index.js, содержащий логику приложения. Он будет выполняться при загрузке страницы. Сейчас там достаточно прописать что-то вроде console.log('Hello, World!’), чтобы потом удостоверится, что все работает.
webpack.config.js — конфигурационный файл Webpack. Сюда, в частности, нужно прописать пути до двух файлов.

Содержимое файлов также можно подглядеть в hexlet-boilerplates/webpack-package и разобраться с тем, как они устроены.

Вариант из инструкции по установке Webpack на Хекслете — запустить инициализацию Webpack. Я не рекомендую использовать флаг —force, а ответить на все вопросы (подробнее — в той же инструкции).

npx webpack init

В этом случае предложат установить пакет @webpack-cli/generators. Соглашаемся. Отвечаем на вопросы. Перезаписывать файл package.json не нужно. Вы можете просмотреть, что предлагают там заменить, выбрав ответ d, и увидеть, что перезапишется имя проекта, а еще добавятся скрипты для запуска. Эти скрипты не нужны, так как мы чуть позже создадим Makefile со всеми необходимыми командами. Наш файл README.md тоже не стоит перезаписывать, там бейджи (отвечаем n).

Обратите внимание: в конце работы скрипт покажет список файлов, которые он добавляет или изменяет.

Примечание. После настройки пакет @webpack-cli/generators можно смело удалить командой npm remove @webpack-cli/generators

Установка плагинов

Все плагины для Webpack сначала устанавливаются как пакеты с помощью npm (все как обычно), а потом (это что-то новое) прописываются в файл webpack.config.js. Инструкции к тому, что именно нужно прописывать, можно всегда найти в документациях по плагинам. Например, здесь можно посмотреть, как установить HtmlWebpackPlugin.

В созданном webpack.config.js он уже прописан. Однако сам плагин не установлен. Устанавливаем его в devDependencies.

npm install -D html-webpack-plugin

Стоит изучить webpack.config.js, пройтись по свойствам module.exports:

mode – режим сборки: development или production;
entry – точка входа (src/index.js);
output — каталог, куда собирается проект (dist);
devServer — настройки для локального сервера;
plugins — используемые плагины. Сюда добавляются объекты — экземпляры класса, которые импортируются из плагина (импорт происходит выше). Плюс, здесь прописываются параметры для плагинов. Это все указывается в документации к плагинам;
module — модули, обеспечивающие работу с разными форматами файлов. Свойство rules содержит список объектов с двумя обязательными свойствами:
- test – регулярные выражения, выбирающие необходимые файлы;
- use – массив объектов. Загрузчики (loader) и их опции. Если загрузчики без опций, то можно их просто перечислить в свойстве use в виде массива строк.

Запуск локального сервера

Для этого необходимо установить плагин webpack-dev-server в devDependecies. После попробуем запустить проект.

npx webpack serve

Если все получилось, в консоль будет выведено compiled successfully. Мы увидим окно браузера с файлом index.html из проекта, в который Webpack дописал строку вызова скрипта main.js. Проверив консоль браузера, убедимся, что сработал код из файла src/index.js.

Теперь при внесении изменений в файлы проекта, Webpack будет пересобирать проект на лету. И это очень удобно. А остановить работу локального сервера в консоли можно через стандартное сочетание клавиш Ctrl + C.

Makefile

Теперь можно создать Makefile и добавить команды для удобной работы. Добавьте туда:

npm ci, команду для разворачивания окружения
npx eslint, команду для вызова линтера
npx webpack serve, сборку проекта для разработки
и команды для сборки проекта в режиме production (с максимально сжатым и оптимизированным кодом): rm -rf dist — для начала удалим старую сборку, если она есть NODE_ENV=production npx webpack — и, собственно, сборка

См. пример Makefile в hexlet-boilerplates/webpack-package

Установка Bootstrap

Теперь установим Bootstrap. Вот инструкция.

Так как Bootstrap нужен не только для разработки, но и для работы приложения, его надо устанавливать в обычные dependencies, то есть без флага -D.

npm install bootstrap

Ему потребуются дополнительные пакеты для работы с CSS, их нужно установить в devDependencies. Подглядывая в boilerpalte, я не стал устанавливать autoprefixer

npm install -D css-loader postcss-loader sass sass-loader style-loader

Bootstrap ориентирован на работу с Sass, поэтому будет разумно установить и его тоже. Sass — препроцессор css-файлов, который расширяет их функционал. Файлы, с которым работает препроцессор, имеют расширение .scss и из них генерируются .css в процессе сборки.

Теперь нужно создать собственный файл .scss (например, src/styles.scss), добавить в него импорт стандартных стилей bootstrap, прописав

@import "~bootstrap/scss/bootstrap";

А его, в свою очередь, импортировать в index.js вместе с самим Bootstrap

import  './styles.scss';
import  'bootstrap';

Для корректной работы элементов Bootstrap в html-коде index.html требуется следующий тег: <meta name="viewport" content="width=device-width, initial-scale=1">

Добавляем необходимые записи в конфигурацию webpack.config.js. В свойство modules необходимо прописать обработку файлов .scss (подсмотрите в boilerplate, там это реализовано лаконичнее, чем в инструкции на сайте Bootstrap).

Примечания Если использовать только встроенные стили, возможно, использовать Sass нет смысла, и можно обойтись импортом обычного css, который находится в /node_modules/bootstrap/dist/css/bootstrap.css. Импортировать всю библиотеку Bootstrap — не оправдано (хотя все будет работать корректно), так как она очень большая, а в проекте используются лишь некоторые ее модули. Их можно импортировать выборочно. Подробнее об этом и об оптимизации также можно почитать в документации Bootstrap

На этом начальная настройка окружения окончена. Теперь можно еще раз проверить, что все работает корректно, пройтись линтером отправить все изменения на GitHub.

Vercel

Здесь все очень интуитивно. Необходимо зарегистрироваться на сайте, добавить свой репозиторий из GitHub (можно не все, а только нужное) и нажать Import. Далее сконфигурировать проект, указав команду для сборки, затем каталог, куда она производится, а также команду для установки. Используются команды из Makefile.

Теперь после каждого обновления репозитория на GitHub Vercel будет собирать проект в режиме production и публиковать его.

Dmitry Zhigulin 07 октября 2022