Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Третий проект в программе "<a>Фронтенд-разработчик</a>" - это первое настоящее фронтенд-приложение. Настройка окружения тут немного сложнее, чем в случае первых двух проектов, где надо было написать консольные утилиты.

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

3 <ol><li>Скопировать в свой проект заготовку из GitHub<a>hexlet-boilerplates/webpack-package</a></li>

4 <li>Установить зависимости, выполнив make install</li>

5 <li>Установить Bootstrap.</li>

6 <li>Скопировать в index.html верстку из демонстрационного проекта.</li>

7 <li>"Задеплоить на Vercel" (что бы это ни значило).</li>

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

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

10 <h3>Настройка проекта</h3>

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

12 </blockquote>Клонируем репозиторий

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

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

15 npm init

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

17 </blockquote><h3>CodeClimate и Eslint</h3>

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

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

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

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

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

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

24 </blockquote><h3>Webpack</h3>

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

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

27 <ul><li><a>Инструкция на Хекслете</a></li>

28 <li><a>Официальное руководство</a></li>

29 <li>Инструкция, которая покрывает<a>установку Webpack и Bootstrap</a></li>

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

31 npm install -D webpack webpack-cli

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

33 <ul><li>index.html- стартовую веб-страницу. Сюда не нужно добавлять CSS- и JS- файлы. Их будет добавлять сам Webpack при каждой сборке приложения. В этом файле будет располагаться вся верстка RSS-агрегатора. Если вы не сильны в верстке, то можно просто скопировать код из демонстрационного проекта.</li>

34 <li>src/index.js, содержащий логику приложения. Он будет выполняться при загрузке страницы. Сейчас там достаточно прописать что-то вроде console.log('Hello, World!’), чтобы потом удостоверится, что все работает.</li>

35 <li>webpack.config.js- конфигурационный файл Webpack. Сюда, в частности, нужно прописать пути до двух файлов.</li>

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

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

38 npx webpack init

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

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

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

42 </blockquote><h3>Установка плагинов</h3>

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

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

45 npm install -D html-webpack-plugin

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

47 <ul><li>mode- режим сборки:developmentилиproduction;</li>

48 <li>entry- точка входа (src/index.js);</li>

49 <li>output- каталог, куда собирается проект (dist);</li>

50 <li>devServer- настройки для локального сервера;</li>

51 <li>plugins- используемые плагины. Сюда добавляются объекты - экземпляры класса, которые импортируются из плагина (импорт происходит выше). Плюс, здесь прописываются параметры для плагинов. Это все указывается в документации к плагинам;</li>

52 <li>module- модули, обеспечивающие работу с разными форматами файлов. Свойство rules содержит список объектов с двумя обязательными свойствами:<ul><li>test- регулярные выражения, выбирающие необходимые файлы;</li>

53 <li>use- массив объектов. Загрузчики (loader) и их опции. Если загрузчики без опций, то можно их просто перечислить в свойствеuseв виде массива строк.</li>

54 </ul></li>

55 </ul><h3>Запуск локального сервера</h3>

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

57 npx webpack serve

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

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

60 <h3>Makefile</h3>

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

62 <ul><li>npm ci, команду для разворачивания окружения</li>

63 <li>npx eslint, команду для вызова линтера</li>

64 <li>npx webpack serve, сборку проекта для разработки</li>

65 <li>и команды для сборки проекта в режиме production (с максимально сжатым и оптимизированным кодом): rm -rf dist - для начала удалим старую сборку, если она есть NODE_ENV=production npx webpack - и, собственно, сборка</li>

66 </ul><blockquote>См. пример Makefile в<a>hexlet-boilerplates/webpack-package</a>

67 </blockquote><h3>Установка Bootstrap</h3>

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

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

70 npm install bootstrap

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

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

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

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

75 @import "~bootstrap/scss/bootstrap";

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

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

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

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

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

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

82 <h3>Vercel</h3>

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

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