Настройка VS Code для разработки на JavaScript

Visual Studio Code или просто VS Code – это бесплатный, популярный и имеющий множество дополнений текстовый редактор, который в первую очередь предназначен для создания и отладки современных веб- и облачных приложений.

Разработан он компанией Microsoft и доступен для операционных систем Windows, MacOS и Linux.

Распространяется данная программа бесплатно, исходный код её доступен на GitHub.

VS Code поддерживает большое количество языков программирования, включает в себя отладчик, средства для работы с Git, подсветку синтаксиса, технологию автодополнения IntelliSense, инструменты для рефакторинга, терминал и многое другое.

VS Code является достаточно гибким инструментом, расширяемым с помощью плагинов, доступных на Visual Studio Marketplace. Открыть панель с расширениями в программе можно через комбинацию клавиш Ctrl+Shift+X .

Плагинов для Visual Studio Code очень много, но в рамках этой статьи рассмотрим только наиболее популярные из них. В VS Code уже встроен такой плагин как Emmet. Если вы не знакомы с ним, то он предназначен для быстрого набора кода. Дополнительно его устанавливать не нужно.

Установка VS Code

Для установки VS Code на компьютер необходимо перейти на этот сайт. После этого на странице выбрать вашу операционную систему и нажать на значок «Загрузки». После завершения скачивания программы установить её себе на компьютер.

Чтобы лучше ориентироваться в программе вы можете установить языковый пакет для русского языка. Для этого откройте панель «Расширения» ( Ctrl+Shift+X ) и введите в ней текст «Russian Language Pack for Visual Studio Code». После этого выберите его в результатах поиска и установите его.

В Visual Studio Code имеется огромное количество различных плагинов кроме языковых пакетов. Предназначены они для расширения функциональности этого редактора. Все плагины для этого редактора размещены на Marketplace.

Общая настройка VS Code

VS Code содержит большое количество настроек, с помощью которых вы можете настроить этот редактор под себя.

Изменение настроек в VS Code осуществляется в соответствующем окне. Открыть его можно несколькими способами:

• через комбинацию клавиш Ctrl+, ;
• через пункт меню «Файл -> Настройки -> Параметры» (в версии на английском языке «File -> Preferences -> Settings»);
• нажать на значок шестерёнки и выбрать в открывшемся меню пункт «Параметры» (Settings).

Список параметров, которые пользователи наиболее часто настраивают:

• editor.tabsize — число пробелов при табуляции;
• editor.insertSpaces — вставлять ли пробелы при нажатии Tab ;
• editor.detectIndentation — нужно ли параметры «#editor.tabsize» и «editor.insertSpaces» определять автоматически при открытии файла на основе его содержимого;
• editor.wordWrap — управляет тем, как следует переносить строки;
• editor.fontSize — размер шрифта в пикселях;
• editor.mouseWheelZoom — нужно ли включать изменение размера шрифта в редакторе при нажатой клавише Ctrl и движении колесика мыши;
• editor.minimap.enabled — включает или отключает отображение мини-карты;
• editor.formatOnSave — выполнять ли автоматическое форматирование файла при его сохранении;
• workbench.startupEditor — управляет тем, что будет отображаться при запуске, если содержимое редактора не было восстановлено из предыдущего сеанса;
• files.insertFinalNewline — если этот параметр включен, то при сохранении файла в его конец вставляется пустая строка;
• files.trimFinalNewlines — если этот параметр активен, то при сохранении файла будут удалены все пустые строки, идущие за последней в конце файла;
• files.trimTrailingWhitespace — если этот параметр включен, то при сохранении файла будут удалены все пробельные символы на концах строк;
• files.autoSave — для включения автосохранения файлов;
• terminal.integrated.cwd — позволяет задать путь явного запуска, по которому будет запущен терминал;
• telemetry.enableTelemetry — включает или отключает отправку сведений об использовании и ошибках в веб-службу Майкрософт;
• telemetry.enableCrashReporter — разрешает отправку отчетов о сбоях в веб-службу Майкрософт;

Изменять настройки можно как глобально, так и конкретно для текущего проекта. Изменение глобальных настроек осуществляется в окне «Параметры» на вкладке «Пользователь». Эти настройки сохраняются в файл «settings.json». Открыть его можно нажав на значок «Открыть параметры (JSON)».

Пример файла «settings.json»:

{ "editor.wordWrap": "wordWrapColumn", "editor.wordWrapColumn": 120, "editor.minimap.enabled": false, "editor.formatOnSave": true, "editor.tabSize": 2, "editor.detectIndentation": false, "editor.fontSize": 17, "editor.mouseWheelZoom": true, "workbench.startupEditor": "none", "files.insertFinalNewline": true, "files.trimFinalNewlines": true, "files.trimTrailingWhitespace": true, "telemetry.enableTelemetry": false, "telemetry.enableCrashReporter": false, "files.autoSave": "afterDelay", "files.autoSaveDelay": 10000 }

Кстати, изменять настройки также можно просто посредством редактирования этого файла.

Сохранение настроек для рабочей директории выполняется в специальный файл «settings.json», который будет добавлен в папку «.vscode». Настройка параметров для рабочей директории (проекта) можно также выполнить просто посредством редактирования этого файла.

Настройка VS Code для HTML и CSS

Visual Studio Code обеспечивает базовую поддержку при написании HTML и CSS из коробки. Имеется подсветка синтаксиса, умные дополнения с IntelliSense и настраиваемое форматирование. VS Code также имеет отличную поддержку Emmet.

Зачем нужен Emmet? Он позволяет очень быстро писать код.

Например, Emmet аббревиатура ul>li*3>span.item-$ после нажатии клавиши Tab создаст следующий код:

В CSS аббревиатура Emmet как dn создаст код display: none .

VS Code имеет встроенные средства для форматирования кода. Настроить параметры форматирования можно в настройках. Находятся они в разделах «Расширения -> HTML» и «Расширения -> CSS».

Комбинация клавиш для выполнения форматирования в VS Code: Shift+Alt+F .

Функциональность VS Code при работе с HTML и CSS можно улучшить с помощью расширений.

Вот перечень некоторых из них:

• Auto Rename Tag – автоматически изменяет имя закрывающего тега при переименовывании открывающегося;
• Auto Close Tag – автоматически добавляет закрывающий HTML/XML тег при вводе закрывающей скобки открывающегося тега (кроме HTML, это дополнение добавляет эту возможность в JavaScript и многие другие языки);
• HTMLHint – плагин для статического анализа HTML кода;
• HTML CSS Support — поддержка CSS для документов HTML;
• IntelliSense for CSS class names in HTML — плагин для предложения вариантов завершения имени CSS класса в HTML на основе определений, найденных им в вашем рабочем пространстве;
• Autoprefixer — для автоматического добавления CSS свойств с префиксами;
• CSS Peek — позволяет посмотреть свойства, прикреплённые к классу или идентификатору без переключения на CSS файл, в котором они описаны;
• Prettier — Code formatter — для форматирования кода (HTML, CSS, JavaScript и др.);

VS Code имеет возможность, которая позволяет сворачивать области CSS кода заключенные между /*#region*/ и /*#endregion*/ :

/*#region*/ . /*#endregion*/

Настройка VS Code для разработки на JavaScript

Разработку веб-проекта в Windows 10 можно ввести не только с использованием программ, предназначенных только для этой операционной системы, но и посредством WSL (Linux). Если вам нравится Linux и вы хотите его использовать, то Windows 10 позволяет вам это сделать из коробки (то есть непосредственно из дистрибутива). В следующем разделе приведена инструкция по установке WSL в Windows 10 и настройке Visual Studio Code для её использования в качестве среды разработки.

Кроме этого, ОС Linux в большинстве случаев — это система, которая затем у вас будет установлена на продакшене. А это значит, что вы получите окружение как на сервере или более близкое к этому.

Если вы не хотите использовать WSL в качестве среды разработки или работаете в другой операционной системе, то в этом случае можете сразу же перейти к разделу «Установка и настройка ES Lint».

Как в Windows 10 установить WSL и использовать её в VS Code

Коротко о подсистеме Windows для Linux (WSL). В Windows 10 появилась возможность осуществлять веб-разработку прямо в среде на основе Linux. Для этого вам необходимо просто включить компонент Windows 10 «Подсистема Windows для Linux (WSL)» и установить из Microsoft Store «любимый» дистрибутив Linux (например, Ubuntu 18.04). Подсистема WSL появилась в Windows 10, начиная с обновления «Anniversary Update» (1607), а версия 2004 этой ОС уже включает WSL 2.

Более подробно процесс установки WSL описан в этой статье, а именно в разделах «Включение подсистемы Windows для Linux» и «Установка приложения «Ubuntu». Если вы ещё не читали эту статью, то можете это сделать, перейдя по представленной выше ссылке.

Установка расширения «Remote – WSL» в VS Code. Для использования WSL в качестве среды для полной разработки прямо из VS Code необходимо установить расширение «Remote – WSL».

Это позволит вам ввести веб-разработку прямо в среде на основе Linux, использовать специфичные для неё наборы инструментов и утилит, а также запускать и отлаживать свои приложения в Linux, не выходя при этом из Windows.

Это расширение позволит выполнять команды непосредственно в WSL, а также редактировать файлы, расположенные в WSL или в смонтированной файловой системе Windows (локальные диски находятся в /mnt ) не беспокоясь о проблемах с совместимостью.

После установки расширения и перезагрузки редактора VS Code у вас появится индикатор WSL в нижнем левом углу окна программы.

При нажатии на него вам будут показаны команды Remote-WSL. Используя их, вы можете открыть новое окно VS Code, в котором в качестве среды будет использоваться WSL. При этом команда «Remote-WSL: New Window» выполнит это с использованием дистрибутива Linux, который у вас назначен по умолчанию, а команда «Remote-WSL: New Window using Distro. » — используя конкретный дистрибутив Linux из установленных.

Версия дистрибутива Linux, которая сейчас используется в WSL отображается в индикаторе следующим образом:

Установка и настройка ESLint

ESLint – это инструмент, который крайне желательно установить в систему, если вы разрабатываете код на JavaScript. Он будет показывать вам ошибки в коде, а также направлять вас при его написании так, чтобы он был выдержан в едином стиле.

Перед тем как переходить к установке ESLint сначала инсталлируем в ОС «Node.js v12.x».

В Ubuntu это осуществляется следующим образом:

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - sudo apt-get install -y nodejs

Вводить эти команды будем через терминал VS Code. Открыть его можно посредством комбинации клавиш Ctrl+Shift+` или кликнув в главном меню на пункт «Терминал -> Создать терминал».

Проверить номер установленной версии «Node.js» можно так:

node -v

После установки «Node.js» создадим папку для проекта в файловой системе ОС, а затем откроем её с помощью VS Code.

Создание проекта обычно начинается с его инициализации посредством npm. Этот процесс можно выполнить посредством следующей команды:

npm init -y

В результате выполнения этой команды у вас появится файл «package.json». Этот файл кроме информации о проекте и других вещей, ещё будет содержать набор зависимостей для данного проекта. Имея этот файл, мы сможем при необходимости очень быстро развернуть проект на любом другом компьютере.

Теперь перейдём к установке ESLint и некоторых других npm пакетов в проект:

sudo npm install --save-dev eslint eslint-config-airbnb-base eslint-plugin-import

Ключ —save-dev используется для того чтобы сделать запись об этих пакетах в «package.json». Данный ключ добавит их в секцию devDependencies .

Установка npm пакетов осуществляется в папку «node_modules» этого проекта.

В качестве стиля кода мы будем использовать Airbnb . Это руководство используется многими известными организациями и имеет очень большое количество звёзд на GitHub.

Для того, чтобы можно было использовать Airbnb для расширения базовой конфигурации ESLint мы установили пакеты eslint-config-airbnb-base (без зависимостей от React) и eslint-plugin-import (для поддержки синтаксиса импорта/экспорта ES6+ и предотвращения проблем с неправильным написанием путей к файлам и имен импорта).

После окончания загрузки пакетов приступим к интегрированию ESLint в Visual Studio Code. Осуществляется это посредством установки расширения с одноимённым названием.

Для того чтобы ESLint работал необходимо создать конфигурационный файл. Это можно выполнить как посредством команды ./node_modules/.bin/eslint —init (настройка осуществляется посредством ответов на вопросы мастера), так и самостоятельно.

Конфигурационный файл необходим для задания настроек, в соответствии с которыми ESLint будет осуществлять проверку JavaScript кода.

Чтобы сделать это самостоятельно нам необходимо в корне проекта создать файл .eslintrc и добавить в него, например, следующие данные:

{ "env": { "browser": true, "es6": true }, "extends": "airbnb-base", "parserOptions": { "ecmaVersion": 6 } }

Эти данные будут определять следующие настройки для ESLint:

• env — это свойство определяет среды, в которых JavaScript должен работать. Для фронтенда средой выступает браузер, поэтому добавим в env свойство «browser»: true . Свойство «es6»: true предназначено для автоматического включения синтаксиса ES6.
• extends — предназначен для указания конфигурации, с помощью которой мы хотим расширить общую конфигурацию ESLint. В качестве значения extends укажем конфигурацию airbnb-base (без React). При необходимости можно указать не одну, а несколько конфигурации. В этом случае каждая следующая конфигурация будет расширять предыдущую. Т.е. если мы укажем какую-то конфигурацию после airbnb-base , то она будет уже расширять не общую конфигурацию ESLint, а airbnb-base ;
• parserOptions — позволяет задать параметры языку JavaScript, которые мы хотим поддерживать. В настоящее время рекомендуется использовать при разработке проектов синтаксис ECMAScript 6. Указание поддержки этой версии осуществляется посредством задания ключу ecmaVersion значения 6. При необходимости вы можете указать вместо этой другую версию.

Если вам необходимо дополнительно линтить ошибки кода, размещенного в теге , то установите плагин eslint-plugin-html :

sudo npm install --save-dev eslint-plugin-html

Форматирование кода JavaScript будем выполнять с помощью Prettier. Для правильной совместной работы Prettier и ESLint установим следующие npm пакеты:

sudo npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier

Для того чтобы ESLint не просматривал определённые папки и не выдавал по ним ошибки следует создать файл .eslintignore и прописать их в нём:

/.vscode /.git node_modules

Если у вас включено стандартное форматирование кода в VS Code при сохранении, то чтобы в качестве плагина для форматирования js файлов применялся ESLint, следует в конфигурационный файл «settings.json» добавить следующее:

"editor.formatOnSave": true, // добавить это "[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }, "eslint.format.enable": true

Если вы хотите чтобы при сохранении файлов форматировались только js файлы, то editor.formatOnSave необходимо установить значение false , а true этому ключу только в секции «[javascript]» :

"editor.formatOnSave": false, "[javascript]": { "editor.formatOnSave": true, "editor.defaultFormatter": "dbaeumer.vscode-eslint" }, "eslint.format.enable": true

Теперь, ESlint будет проверять JavaScript код и показывать в нём ошибки и предупреждения. Они будут помечаться с использованием волнистых линий.

Результат проверки JavaScript кода ESLint:

Дополнительная настройка VS Code

Вот ещё некоторый список плагинов для VS Code, которые могут расширить возможности Visual Studio Code для фронтенд разработки и не только:

• Project Manager – для удобного управления вашими проектами, независимо от того, где они расположены;
• LiveServer – локальный сервер с возможностью автоматического обновления страниц в браузере при их изменении (запустить сервер можно посредством нажатия на иконку «Go Live» в строке состояния или выбора пункта «Open with Live Server» в контекстном меню области редактора);
• Debugger for Chrome – применяется для отладки JavaScript кода в среде редактора на основе браузера Chrome или любого другого, который поддерживает протокол Chrome Debugger;
• Settings Sync – плагин для синхронизации настроек VS Code (хранение настроек осуществляется на GitHub);
• Visual Studio IntelliCode – система, которая предназначена для экономии вашего времени, помещая наиболее часто используемые элементы завершения для текущего контекста в верхней части списка;
• TODO HighLight – для выделения TODO, FIXME и другие аннотаций в коде;
• Version Lens – показывает информацию о версии пакета для npm, jspm, dub и dotnet ядра;
• GitLens – расширяет возможности Git встроенного в этот редактор (он позволяет очень просто понять почему и когда были изменены те или иные строки кода, изучить историю и развитие кодовой базы проекта и многое другое).

Sublime Text 3 для верстки сайтов. Настройка внешнего вида и установка плагинов. Руководство для начинающих

Сегодня расскажу о редакторе кода, которым пользуюсь для верстки сайтов уже много лет. Быстрый, удобный и полностью настраиваемый Sublime Text 3.

Мы с нуля настроем его внешний вид, а также применим плагины AutoFileName, BracketHighliter, ColorHighliter, Emmet, GotoCSSDeclaration и Tag, которые существенно помогут нам при верстке сайтов! Ну что ж, от слов к делу!

Внешний вид программы

Первым делом, после установки Sublime Text 3, я настраиваю внешний вид программы.

Боковая панель

Для отображения панели переходим View – Side Bar – Show Open Files. В этой панели будут отображаться наши проекты, то есть папки и файлы нашей верстки. Для наглядности сейчас добавлю один из них. Все что там нужно сделать — это просто перетащить папку с проектом на нашу панель.

Цветовая схема

Далее настраиваю цветовую схему программы и кода, для наглядности открою любой файл, например, с HTML кодом. Для этого два раза кликаю на нужном файле. Теперь перехожу Preferences – Color Scheme, открывается окошко с установленными цветовыми решениями и при выборе той или иной темы внешний вид нашего кода и сама программа будут меняться.

Лично мне не подходит ни один из предустановленных вариантов, поэтому я устанавливаю дополнительную цветовую схему. Огромное их количество можно найти и ознакомиться на сайте с дополнениями к Sublime packagecontrol.io. Я уже знаю какую именно я схему хочу установить, что сейчас и сделаю.

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

Перехожу в меню Tools – Command Palette, либо нажимаю Ctrl+Shift+P. Открывается вот такое окно с поиском, в поле поиска ввожу install пока не увижу пункт Install Package Control, и нажимаю на него. Спустя несколько секунд получаю сообщение о том, что Package Control успешно установлен. Теперь я могу приступить к установке нужной цветовой схемы.

Для этого опять вызываю Command Palette зажимая Ctrl+Shift+P, в поле поиска опять ввожу install пока не увижу пункт Package Control: Install Package (установить пакет дополнения) нажимаю на него. Немного подождав вижу окно со списком всех доступных дополнений к Sublime. Ну, почти всех.

В поле поиска ввожу название того дополнения, которое хочу установить, в данный момент — это цветовая схема под названием Base16 Color Schemes, точнее это целый пакет с множеством цветовых схем. Нажимаю на найденный пункт и ожидаю установки. Индикатор процесса установки можно увидеть на нижней панели программы. Получив там же короткое сообщение о том, что все установлено перехожу к смене схемы. Для этого открываю уже знакомый пункт меню Preferences – Color Scheme и вижу в открывшемся окне уже большое множество разных вариантов. Меня интересует схема Ocean, ввожу название в поиске, их тут есть две: одна более контрастней другой.

Моя любимая цветовая схема установлена, ты конечно же можешь выбрать себе любую другую.

Общий вид программы мне больше нравится темный, поэтому перехожу Preferences – Theme, и переключаюсь на Adaptive.sublime-theme

Сочетание цветов очень важно для работы с кодом, так как это влияет не только на восприятие, но и на усталость и здоровье твоих глаз. Так что подбери себе цветовую схему так, чтобы тебя ничего в ней не напрягало. И помни про перерывы в работе!

Дополнительные настройки

Дополнительно повысить восприятие кода и комфорт при работе с ним мне помогут следующие дополнительные настройки. Переходим Preferences – Settings. Открывается такое окно разделенное на две части. В левой части настройки по умолчанию, их изменить нельзя, а вот в правой части ты можешь эти настройки переназначить, каждая следующая должна идти через запятую. Вот какие настройки использую я:

"margin": 0, // Убирает отступы "font_size": 10, // Размер шрифта по умолчанию "draw_indent_guides": true, // Включает/выключает направляющие линии "draw_white_space": "all", // Отображает непечатаемые символы "tab_size": 3, //Размер табуляции "remeber_open_files": true, // Помнит открытые ранее файлы 

Поясню каждую настройку.

"margin": 0, // Убирает отступы 

Убирает странные отступы в программе между кодом и боковой панелью, что делает общую картину более компактной.

"font_size": 10, // Размер шрифта по умолчанию 

Выставляет размер шрифта по умолчанию.Также быстро изменить размер шрифта, работая с кодом, можно зажав контрол и покрутив колесо мыши.

Если ты вдруг размер изменил случайно, то сбросить его можно перейдя в Preferences – Font — Reset

"draw_indent_guides": true, // Включает/выключает направляющие линии 

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

Лично я отключаю их (false) по двум причинам. Первая — я уже не новичок и без них неплохо справляюсь, вторая причина — это следующая настройка.

"draw_white_space": "all", //Отображает непечатаемые символы 

Отображает невидимые табуляции и пробелы. То есть это не часть кода, а просто разметка для удобства работы. И вот, если включить и draw_indent_guides и draw_white_space то получатеся кашица которая лично меня напрягает. Что из этого использовать, а что нет — решать тебе.

"tab_size": 3, //Размер табуляции 

Размер ширины линии отступа при нажатии Tab. Лично мне нравится 3й размер 🙂

"remember_open_files": true, //Помнит открытые файлы 

Например мы работали работали, а потом неожиданно закрыли программу 🙂 Бывает такое? У меня постоянно, так вот эта настройка включает «память» у Sublime и при следующем открытии программы откроются и все последние файлы. И да, память работает и после перезагрузки компа.

Разделение рабочего окна

Еще более улучшить восприятие кода и ускорить процесс верстки нам поможет разделение рабочего окна.

Поскольку практически всегда приходится работать с несколькими разными файлами, например index.html style.css и какой-то js файл, то дополнительным удобством будет разделение окна с кодом на секторы. Варинтов несколько. Переходим в View – Layout и смотрим что тут у нас есть.

Соответственно Single – это вид без разделений как сейчас, Columns: 2, 3, 4 это разбивка по вертикали. Например нажав на Columns: 2 наш экран с кодом разделится пополам, и мы можем часть файлов переместить в пустую колонку, например CSS слева HTML и JS справа, что делает работу более наглядной и быстрой.

Так же у нас есть варианты поделить экран по горизонтали это Rows: 2 и Rows: 3, нажав например на Rows: 3 получим три горизонтальных окна и можно перекинуть JS файл в третье окно. И последний вариант это Grid: 4 который делит экран пополам как по горизонтали, так и по вертикали. В результате получаются четыре окна. Обрати внимание, что переключаться между режимами можно и с помощью горячих клавиш Alt+Shift+ соответствующая цифра.

Так что у тебя есть широкий выбор по вкусу. Я чаще всего использую одно разделение по вертикали.

Подсветки синтаксиса

Конечной настройкой внешнего вида будет настройка подсветки синтаксиса. Слово страшное, однако на деле все просто.

Подсветки синтаксиса – это особое окрашивание цветом того или иного елемента в коде. Например, в этой цветовой схеме в HTML файле краcным выделен тег, зеленым — название класса, белым — текст и так далее. Это делает восприятие кода намного понятнее. Обрати внимание на правый нижний угол окна программы, в зависимости от того как кой файл у нас сейчас активен, CSS HTML JS и так далее происходит переключение отображения кода этого конкретного файла.

Зачем же тут что-то делать если все и так отлично работает? Дело в том что в начальном пакете Sublime установлены пакеты подсветки синтаксиса далеко не для всех форматов.

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

Так вот, в таких случаях я дополнительно устанавливаю нужный пакет.

Открываем наш привычный Commаnd Palette перейдя Tools – Command Palette, либо нажимаем Ctrl+Shift+P набираем install, жмем Install Package Control и ищем дополнение SCSS. Нажимаем на него, после установки мы можем переключить наше отображение на SCSS. Сейчас все выглядит симпатичнее, не так ли?

Настройка внешнего вида редактора важна, так как мы довольно длительное время проводим за написанием кода. Это влияет на нашу усталость, продуктивность, здоровье да и просто на настроение.

Следующее, что мы сделаем это установим ряд плагинов и дополнений. Их существует огромное количество, а я расскажу про основные, которые активно использую сам и которые в разы ускорят весь процесс верстки. Приступим!

Плагины

AutoFileName

Дело в том, что в процессе верстки часто приходится подключать различные картинки. Этот плагин в разы облегчает процесс подключения. Установим его. Нажимаем Ctrl+Shift+P далее Install Package Control ищем AutoFileName устанавливаем. Попробуем подключить картинку сейчас. Сразу замечаем появление выпадающего меню со списком локальных файлов. Переходим в нужную папку с картинками и видим тут нужный нам файл, а также его размеры, что тоже пригодится.

BracketHighliter

BracketHighliter можно перевести как подсветка кавычек. Установим его. Нажимаем Ctrl+Shift+P, Install Package Control ищем BracketHighliter. Устанавливаем. Тут даже открывается отдельный файл с сообщением об успешной установке. Теперь в нашем коде будет подсвечиваться начальный и конечный элемент, например открывающий и закрывающий тег, начальная и конечная ковычка, открывающая и закрывающая скобка. Это очень помогает с ориентацией в коде.

ColorHighliter

Обрати внимание на этот код — это код цвета, но какого именно непонятно.

Давай установим плагин. Ctrl+Shift+P, Install Package Control ищем ColorHighliter. Опять открывается отдельный файл с сообщением об успешной установке. И сообщения о некой ошибке, игнорируем их. Смотрим на наш код с цветом, и теперь видим что за цвет скрывается за буквенноцифровым кодом. Сам плагин можно дополнительно настроить в меню Tools — ColorHighliter но сейчас не будем останавливаться на этом. Все и так стало намного лучше.

Великий и могучий Emmet

Устанавливаем по наработанной схеме. Ctrl+Shift+P, Install Package Control ищем Emmet. Открывается отдельный файл с сообщением с просьбой перезагрузить программу для окончания установки. Закрываем и открываем Sublime. Получаем сообщение, что все установлено.

Итак, что же умеет Emmet?

Перейдем в HTML файл и попробуем записать тег div с классом .block, для этого нам теперь достаточно поставить точку, написать «block» и нажать клавишу Tab. Мы получим:

Чтобы сделать более сложную запись, например в тег div с классом .block вставить тег span используем следующую запись:

.block>span 

Жмем клавишу Tab и получаем:

Но и это еще не все, мы можем создавать свои сниппеты, то есть шаблоны/заготовки.
Для этого перейдем Preferences – Package Settings – Emmet – Settings User. Здесь запишем следующее:

 < "snippets":< "html":< "snippets":< "bl":"Теперь для того чтобы вызвать запись:

нам достаточно написать bl и нажать клавишу Tab

Из этого следует, что возможности Emmet безграничны, и мы можем настроить свои сниппеты как угодно и работать очень быстро. Подробную информацию о возможностях плагина можно найти на сайте https://emmet.io

GotoCSSDeclaration

Плагин поможет нам с навигацией в коде. Устанавливаем ровно так же как и предыдущие плагины. Далее назначим горячие клавиши для работы с плагином для этого переходим Preferences – Key Bindings, и пишем следующий код

Где [«ctrl+1«] это и есть нужное сочетание клавиш. Сохраняем Cntr+S.
И вот как это работает. У нас должен быть открыт CSS и HTML файлы. CSS как правило очень большой и найти что-то быстро сложно, но это в прошлом. Например, нам нужно изменить CSS для класса content-mainpage кликаем на него мышкой и нажимаем ctrl+1. Вуаля, мы в нужном месте CSS файла.

Tag

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

Зовут его Tag и установить нам придется его вручную. По этой ссылке можно скачать архив с плагином. Далее распаковываем в особую папку программы. Для Windows 10 это C:\Users\[Подставь свое имя пользователя]\AppData\Roaming\Sublime Text 3\Packages. Далее закрываем Sublime и открываем снова и добавляем горячие клавиши открыв Preferences – Key Bindings и дописав следующее:

Где ctrl+` это и есть наше сочетание клавиш.

Итак, для чего же мы проделали весь этот нелегкий путь? Как правило, в процессе написания, кода мы работаем сначала с HTML потом переносим названия классов в CSS и работаем уже там. Так вот этот перенос делать вручную давольно долго. И тут нам на помощь приходит плагин Tag. Сейчас нам достаточно выделить нужный HTML код, нажать наше сочетание клавиш ctrl+`

и потом вставить результат копирования в наш CSS ctrl+v.

Настройка Webpack 5

Пошаговое руководство по настройке сборщика Webpack 5 для совместной работы с такими инструментами как Pug, Sass, JavaScript, React и Markdown.

О чем статья

Перед вами подробная инструкция по настройке сборщика Webpack 5 с нуля. Шаг за шагом статья объясняет «что делать» и «зачем это надо».

После выполнения всех шагов вы получите рабочий шаблон, в котором будут настроены Pug, Sass, JavaScript, React и Markdown.

• Шаблонизатор Pug обладает более широкими возможностями для написания разметки, чем HTML. Разметка Pug преобразуется вебпаком в разметку HTML.
• Препроцессор Sass имеет больше возможностей для написания стилей, чем CSS. В конечном итоге, вебпак преобразует код SCSS в CSS.
• Язык JavaScript необходим для создания интерактивности сайта, при этом, сборка позволит использовать последние достижения языка и не переживать, что новую функцию не распознает старый браузер.
• React — это JavaScript-библиотека для создания пользовательских интерфейсов
• Разметка Markdown удобна для написания текстов. Разметка Markdown преобразуется в понятный для браузеров HTML.

Освоив необходимый минимум можно без труда доработать сборку для других целей, например, можно настроить сборку для работы с языком TypeScript.

Быстрый запуск Webpack

Для настройки сборки webpack автор статьи использовал операционную систему Ubuntu 20.04, в которой были установлены:

• NodeJS v16.17.1
• менеджер пакетов NPM v8.15.0
• стандартный Терминал
• стандартный Текстовый редактор (далее по тексту будет называться редактор кода или редактор)
• браузер FireFox v105.0. У вас инструменты могут отличаться.

Чтобы выполнять дальнейшие действия, на вашем компьютере должен быть установлен Node.js.

Откроем терминал и создадим каталог будущего проекта:

mkdir my-project

Сделаем этот каталог рабочим:

cd my-project

Обратите внимание! С этого момента старайтесь не закрывать окно терминала, так как в нем открыт рабочий каталог my-project и все дальнейшие команды в терминале выполняются в корневом каталоге проекта. Если терминал по какой-то причине будет закрыт, то нужно открыть новый терминал и выполнить команду: cd my-project .

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

git init

В корне проекта будет создан скрытый каталог .git , в котором хранятся необходимые файлы git-репозитория. Если в менеджере файлов каталог .git не отображается, то нажмем комбинацию клавиш Ctrl+H .

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

touch .gitignore

В этом файле будем указывать имена и шаблоны для файлов и каталогов, которые не нужны в репозитории. С помощью редактора кода откроем файл .gitignore и запишем следующее:

node_modules

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

Не забывайте сохранять в редакторе кода всё, что изменили. Это забывают делать не только новички, но опытные разработчики. Поэтому, если после очередной правки кода, у вас что-то не работает, обязательно убедитесь, что код сохранен. В дальнейшем, я не буду напоминать об этом. Запомни правило: сделал правку в коде, нажми сочетание клавиш Ctrl+S . Эта комбинация клавиш сохраняет изменения и работает практически в любом редакторе.

С настройками Git в этом проекте закончим. В дальнейшем, не забываем делать коммиты.

Теперь, инициализируем npm, для этого в терминале введем следующую команду:

npm init -y

В корне проекта создается файл package.json с настройками по умолчанию, на что указывает опция -y . Подробно о файле package.json читайте в документации по npm.

Теперь установим webpack и webpack-cli , последний нужен для запуска webpack из командной строки. В терминале введем следующее:

npm i -D webpack webpack-cli

i — это сокращение от install. Опция -D указывает, что установленные пакеты нужны только для режима development (режима разработки) и не будут использоваться в производственной сборке. После установки это фиксируется в фале package.json , пакеты будут прописаны в секции «devDependencies»: <. >.

Так как это первые пакеты, которые были установлены в проект, то будут созданы каталог node_modules и файл package-lock.json . Каталог node_modules содержит все устанавливаемые пакеты и их зависимости. Этот каталог не рекомендуется включать в репозиторий, поэтому мы указали это в файле .gitignore . Файл package-lock.json хранит записи о точных версиях установленных зависимостей.

Теперь в корне проекта создадим каталог src , в котором будет хранится исходный код:

mkdir src

В каталоге src создадим файл index.js :

touch src/index.js

В редакторе откроем файл src/index.js и введем следующий код:

function component(text) < const element = document.createElement('h1'); element.textContent = text; return element; >document.body.prepend(component('Проект собран на Webpack'));

Затем в редакторе откроем package.json и добавим в поле «scripts» следующую строку с именем dev :

"scripts":

dev — это произвольное сокращенное имя для скрипта webpack —mode development . Подобные скрипты в секции «scripts» файла package.json запускаются в с помощью команды npm run . Так, для запуска скрипта с именем dev , введем в терминале следующую команду:

npm run dev

В результате, в корне проекта должен появиться каталог dist , в который скомпилируется файл main.js . Если сравнить содержимое файла main.js с исходным src/index.js , то увидим отличия, хотя файлы выполняют одно и то же. Итак, мы запустили webpack в режиме разработки, в результате, файл src/index.js был транспилирован в файл dist/main.js .

Перед началом выполнения, webpack будет искать в корне проекта файл настроек webpack.config.js . Так как, файл мы ещё не создали, то webpack применяет настройки по умолчанию. Он определяет точку входа src/index.js и выводит откомпилированный код в файл dist/main.js . Подробно об изменении настроек смотри ниже в параграфе Настройка в webpack точки входа и выхода.

Чтобы понять некоторые моменты, создадим в выходном каталоге файл dist/index.html . Для этого, в терминале выполним:

touch dist/index.html

Именно этот файл браузер начинает загружать первым, а потом загружает те ресурсы, которые прописаны в этом файле. В редакторе кода откроем файл dist/index.html и запишем следующее:

      
Файл создан вручную
  

В этом файле мы указали ссылку на скрипт. Этот скрипт должен быть загружен и выполнен во время выполнения файла dist/index.html . В браузере откроем файл dist/index.html и увидим следующее:

Проект собран на Webpack Файл создан вручную

Первая строка текста создана файлом dist/main.js , а вторая — файлом dist/index.html .

На данный момент, файловая структура нашего проекта должна выглядеть так:

my-project |-dist index.html main.js |+node_modules |-src index.js |+.git package-lock.json package.json .gitignore

Установка и настройка html-webpack-plugin

В примере выше, мы добавляли вручную файл index.html в выходной каталог. Теперь, настроим webpack, чтобы этот HTML-файл автоматически создавался в готовой сборке из исходного шаблона. Для этого используем плагин html-webpack-plugin , который установим из терминала:

npm i -D html-webpack-plugin

Теперь настроим html-webpack-plugin в файле webpack.config.js . Но сначала создадим этот файл в корне проекта. Для этого в терминале выполним:

touch webpack.config.js

Затем откроем файл webpack.config.js в редакторе и напишем следующий код:

const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = < plugins: [ new HtmlWebpackPlugin(< template: path.join(__dirname, 'src', 'template.html'), filename: 'index.html', >), ], >;

Разберемся в коде:

• Первые две строки импортируют модули html-webpack-plugin и path и определяют эти модули в переменные HtmlWebpackPlugin и path соответственно.
• module.exports = <> — эта запись означает, что все настройки этого файла помещаются в объект, который экспортируется как модуль по умолчанию.
• Для плагина html-webpack-plugin создается экземпляр new HtmlWebpackPlugin с двумя заданными свойствами: template — путь к входному файлу и filename — имя выходного файла.

В свойстве template разберем путь, который, на первый взгляд, сложен для понимания.

В Linux и macOS пути в файловой системе задаются так: /path/to/template.html . В Windows пути выглядят иначе: C:\path\to\template.html . В среде Node.js существует модуль path , который учитывает эти различия. Модуль path мы подключили во второй строке файла webpack.config.js , а затем вызвали в свойстве template . Метод path.join объединяет заданные сегменты пути вместе и применяет необходимый разделитель для конкретной системы. Сегменты пути для метода path.join мы задали тремя аргументами __dirname , ‘src’ и ‘template.html’ . Если заранее известно, что этот шаблон будет использоваться только в ОС Linux, то можно вместо такого кода, как template: path.join(__dirname, ‘src’, ‘template.html’) указать проще — template: ‘./src/template.html’

• __dirname — глобальная константа, которая указывает абсолютный путь к каталогу файла, код которого запрашивает эту константу, т. е. в нашем случае, файл, который запрашивает __dirname — это файл webpack.config.js , поэтому __dirname содержит абсолютный путь к корневому каталогу проекта.

Вместо метода path.join часто применяют метод path.resolve.

Файл настроек webpack.config.js нужен вебпаку, чтобы знать, какие плагины и с какими настройками использовать в том или ином случае. Webpack автоматически определит, если файл настроек лежит в корне проекта и имеет имя webpack.config.js . Если имя или расположение файла иное, то необходимо указать это с помощью опции —config в файле package.json , например:

"scripts": < "serve": "webpack serve --open --mode development --config dev/serve.config.js" >

Однако, мы это вносить в файл не будем.

Создадим файл src/template.html :

touch src/template.html

Откроем в редакторе файл src/template.html и создадим в нём такую разметку:

      
Файл создан плагином html-webpack-plugin
  

Теперь, удалим каталог dist с двумя файлами, а после в терминале запустим команду:

npm run dev

Каталог dist снова будет создан, а внутри него созданы файлы index.html и main.js . Если откроем в браузере файл dist/index.html , то увидим:

Проект собран на Webpack Файл создан плагином html-webpack-plugin

Таким образом, webpack с помощью плагина html-webpack-plugin сделал две вещи:

• создал файл dist/index.html из файла src/template.html
• в файле dist/index.html автоматически прописал путь к файлу скрипта main.js .

Минимально возможный вариант сборки webpack собран и настроен. С помощью этого шаблона можно начинать разработку проекта по следующему алгоритму:

1. Редактируем исходный код в файлах каталога src
2. Сохраняем результат
3. Выполняем сборку проекта с помощью команды:

npm run dev

1. Открываем в браузере файл dist/index.html , либо если этот файл открыт, перезагружаем страницу браузера.
2. Смотрим на полученный результат в браузере и, если надо, повторяем шаги сначала.

Установка и настройка DevServer

В созданной сборке нужно каждый раз запускать в терминале команду npm run dev и вручную обновлять страницу браузера. Для уменьшения количества рутинных операций, автоматизируем процесс.

В webpack доступно три способа, которые позволяют при сохранении кода автоматически его компилировать:

1. Режим Watch
2. webpack-dev-server
3. webpack-dev-middleware

Здесь мы рассмотрим вариант с веб сервером. С помощью терминала установим webpack-dev-server:

npm i -D webpack-dev-server

В редакторе кода откроем файл webpack.config.js и добавим настройки для веб-сервера, отмеченные знаком + :

 const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = < plugins: [ new HtmlWebpackPlugin(< template: path.join(__dirname, 'src', 'template.html'), filename: 'index.html', >), ], + devServer: < + watchFiles: path.join(__dirname, 'src'), + port: 9000, + >, >;

Для devServer указали два свойства:

• watchFiles указывает на каталог src , за которыми будет вестись наблюдение и в случае, если в каталоге произойдут изменения, веб сервер автоматически сделает сборку проекта и перезагрузит страницу браузера.
• port указывает порт на котором будет работать веб-сервер, по умолчанию — localhost:8080.

Чтобы запускать веб сервер короткой командой, создадим для CLI скрипт «serve» в файле package.json :

• serve означает запустить веб сервер.
• —open автоматически запускает браузер, который в системе установлен по умолчанию.
• —mode development включает режим разработки.

Перед тем как запустить веб-сервер, удалим каталог dist . Это делать необязательно, а нужно лишь для понимания работы веб-сервера.

В терминале запустим веб-сервер командой:

npm run serve

В результате, автоматически откроется страница браузера по адресу http://localhost:9000/ и мы увидим те же строки, что и при ручном запуске браузера:

Проект собран на Webpack Файл создан плагином html-webpack-plugin

Если по какой-то причине, страница браузера автоматически не откроется, то откройте браузер вручную и перейдите по адресу http://localhost:9000.

Если заглянуть в каталог проекта, когда сервер работает, то мы не увидим каталог dist . Тогда откуда браузер берет данные? Всё просто, DevServer компилирует исходный код, и записывает файлы не на диск, а в оперативную память.

Веб-сервер можно остановить, если в терминале нажать сочетание клавиш Ctrl+C.

Теперь файловая структура нашего проекта будет выглядеть так:

my-project |-node_modules |-src index.js template.html |+.git package-lock.json package.json webpack.config.js .gitignore

Настройка в Webpack точки входа и выхода

В Webpack’е начиная с четвертой версии не требуется задавать точки входа и выхода, а допускается использовать настройки по умолчанию:

• точка входа — ./src/index.js
• точка выхода — ./dist/main.js .

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

Точка входа — файл, который Webpack компилирует первым и если в этом файле подключаются зависимости, то эти зависимости тоже обрабатываются.

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

module.exports = < entry: path.join(__dirname, 'src', 'index.js'), >;

Теперь, чтобы изменить точку входа изменяем значение свойства entry . Также, можно задать несколько точек входа. Это нужно при разделении кода на части. Подробно о настройках точки входа читайте в статьях Entry Points и Entry and Context.

Точка выхода — каталог, в который Webpack компилирует точки входа.

Точка выхода настраивается в файле webpack.config.js с помощью свойства output :

module.exports = < output: < path: path.join(__dirname, 'dist'), filename: 'index.[contenthash].js', >, >;

• [contenthash] — шаблон, в который подставляется хеш, сгенерированный на основе содержимого файла. Хеширование меняет имя после каждого изменения содержимого файла. Это решает проблему версионирования. Если хеш изменился, то браузер берет не старый файл из кеша, а загружает измененный с сервера. Можно сократить 40 знаков хеша до нужного количества символов следующим образом: [contenthash:8]. Хеш будет длиной 8 символов. Подробно о шаблоне хешей читайте в статье Hash vs chunkhash vs ContentHash.

Более подробно о точках выхода описывается в статьях concepts/output и configuration/output.

Теперь файл webpack.config.js выглядит так:

const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = < entry: path.join(__dirname, 'src', 'index.js'), output: < path: path.join(__dirname, 'dist'), filename: 'index.[contenthash].js', >, plugins: [ new HtmlWebpackPlugin(< template: path.join(__dirname, 'src', 'template.html'), filename: 'index.html', >), ], devServer: < watchFiles: path.join(__dirname, 'src'), port: 9000, >, >;

В терминале остановим сервер клавишами Ctrl+C и запустим следующую команду:

npm run dev

В корне проекта появится каталог dist , в котором будут два файла: index.html и index.[hash].js . Второй файл раньше назывался main.js . Код в имени файла — это и есть хеш, который будет меняться с изменением содержимого файла.

Автоматическая очистка каталогов

Webpack будет создавать новые файлы с хешированными именами при каждом запуске сборки, а старые остаются в каталоге. Чтобы ненужные файлы не накапливались, перед каждым запуском вебпака необходимо очищать каталог dist. В этом нам поможет filemanager-webpack-plugin.

Сперва, установим его:

npm i -D filemanager-webpack-plugin

Затем, в файле webpack.config.js добавим:

 const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); + const FileManagerPlugin = require('filemanager-webpack-plugin'); module.exports = < . plugins: [ new HtmlWebpackPlugin(< . >), + new FileManagerPlugin(< + events: < + onStart: < + delete: ['dist'], + >, + >, + >), ], devServer: < . >, >;

Каталог dist , если быть точным, не очищается, а полностью удаляется. Плагин filemanager-webpack-plugin может также копировать, создавать, перемещать, архивировать файлы и каталоги перед началом сборки onStart и по окончании onEnd . В дальнейшем, мы воспользуемся этим плагином для копирования файлов.

Проверим работу пакета filemanager-webpack-plugin , для этого в терминале запустим веб-сервер командой:

npm run serve

В результате, автоматически откроется страница браузера по адресу http://localhost:9000/ и мы увидим тоже, что и в прошлый раз:

Проект собран на Webpack Файл создан плагином html-webpack-plugin

Если же проверим корневой каталог проекта, то не увидим каталога dist , что говорит, о правильной работе пакета filemanager-webpack-plugin .

Остановим DevServer, для этого в терминале нажмем Ctrl+C .

Настройка режима production в webpack

До сих пор webpack использовался в режиме разработки. Теперь создадим производственную сборку, чтобы получить готовое приложение, которое размещается на удаленном сервере.

В файле package.json добавим скрипт «build» :

 "scripts": < "serve": "webpack serve --open --mode development", "dev": "webpack --mode development", + "build": "webpack --mode production", "test": "echo \"Error: no test specified\" && exit 1" >,

Чтобы понять, чем сборка production отличается от development, проделаем некоторые шаги. Запустим webpack в режиме development :

npm run dev

Откроем файл dist/index.[hash].js в редакторе и посмотрим на код. Видим кучу комментариев, а код находится не в сжатом виде. Размер файла составляет 1418 байт.

Запустим webpack в режиме production :

npm run build

Посмотрим на содержимое файла dist/index.[hash].js , в котором увидим, что отсутствуют комментарии, а код имеет сжатый вид. Размер файла составляет 139 байт. Разница по сравнению с production в 10 раз. Этим режим production отличается от режима development — код конечного бандла сжимается. То же относится и к файлу index.html , который в режиме development имеет размер 282 байта, а в режиме production размер уменьшается до 259 байт, так как убираются пробелы и ненужные символы.

Babel

Большинство новых браузеров поддерживают все новые возможности JavaScript ES6-ES13. Но, многие из этих возможностей не поддерживаются старыми браузерами, которые до сих пор используются в мире. Поэтому, если важно сохранять поддержку этих браузеров, то самый распространенный способ — применить Babel.

Babel — это компилятор, который адаптирует новые функции JavaScript для устаревших браузеров.

Чтобы посмотреть, какие браузеры поддерживают ту или иную функцию воспользуемся сервисом Can I use. Если в строке Can I use______? ввести es13 , то будет выведен список функций, которые ожидаются в 13-ом выпуске ECMAScript. При выборе функции, показывается таблица с браузерами, которые поддерживают или не поддерживают эту функцию.

Babel позволяет писать код с использованием новых возможностей JavaScript ES6-ES13. При этом можно не заботится о том, что функция не будет поддерживаться старым браузером. Babel транспилирует JavaScript код в ES5, а браузеры, которые не поддерживают этот стандарт уже никем не используются.

Для работы Babel требуется два пакета @babel/core и @babel/preset-env , а чтобы Babel работал с Webpack, требуется загрузчик babel-loader . Установим эти три пакета одной командой:

npm i -D @babel/core @babel/preset-env babel-loader

Конфигурацию для Babel зададим в файле .babelrc . Из терминала создадим этот файл:

touch .babelrc

В корне проекта будет создан файл .babelrc . Откроем его в редакторе и внесем следующий код:

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

 module.exports = < entry: path.join(__dirname, 'src', 'index.js'), output: < . >, + module: < + rules: [ + < + test: /\.js$/, + use: 'babel-loader', + exclude: /node_modules/, + >, + ], + >, plugins: [ . ], devServer: < . >, >;

Мы создали объект module , для которого задали правило rules . Для вебпака любой файл — это модуль, будь то скрипт, стили, шрифт или изображение. Здесь, для всех модулей (читай, файлов) с расширением .js webpack будет применять плагин babel-loader . Правило не действует на каталог node_modules , что указывается в свойстве module.rules.exclude .

Перед тем, как запустить сборку, откроем файл dist/index.[hash].js и посмотрим на код, который выглядит примерно так:

document.body.append((function(e))());

В терминале запустим команду:

npm run build

Теперь, откроем файл dist/index.[hash].js и посмотрим на код. Этот код выглядит по-другому:

Исходный код мы не меняли, но код конечного бандла изменился. Это результат действия компилятора Babel. Второй код поймут все браузеры, которые поддерживают ES5 и выше.

Подключение шаблонизатора Pug

На чистом HTML верстать можно, но трудно поддерживать большие проекты. Поэтому, умные люди придумали инструменты, которые называются шаблонизаторами.

• Создавать шаблоны, компоненты, блоки.
• Работать с данными, подставляя эти данные в код. Например, шаблонизатор может автоматически создать любое количество карточек товара, если подставить данные в компонент из объекта JSON, тогда как в HTML это нужно делать вручную.
• Менять классы элементов в зависимости от данных, что позволяет управлять интерфейсом компонентов.
• Задавать условные выражения и циклы, как в языках программирования.

В этой статье рассмотрим шаблонизатор Pug, который написан на JavaScript и выполняется в среде Node.js. Шаблонизатор Pug использует синтаксис, основанный на отступах и отличается от синтаксиса HTML отсутствием угловых скобок и закрывающихся тегов. После компиляции синтаксис Pug превращается в HTML код.

Чтобы шаблонизатор Pug работал с Webpack, имеется плагин и загрузчик файлов pug-loader.

Загрузчик pug-loader не поддерживает Pug 3-ей версии, поэтому придется довольствоваться второй версией. Кому очень нужен Pug 3, предлагаю два варианта решения:

Сравнительно недавно появился pug-plugin, который работает с Webpack 5 и Pug 3.

Можно самостоятельно настроить pug-loader для третьей версии Pug и пользоваться этим способом, пока разработчики плагина выпустят новое обновление. Это способ, которым пользуется автор этой статьи, об этом способе читайте в статье Как заставить работать вместе Pug 3, pug-loader и Webpack 5.

Установим pug и pug-loader

npm i -D pug pug-loader

Вебпаку укажем, что используем плагин pug-loader для файлов с расширением .pug . Для этого в файле webpack.config.js добавим:

 module.exports = < entry: path.join(__dirname, 'src', 'index.js'), output: < . >, module: < rules: [ < test: /\.js$/, use: 'babel-loader', exclude: /node_modules/, >, + < + test: /\.pug$/, + loader: 'pug-loader', + >, ], >, plugins: [ new HtmlWebpackPlugin(< + template: path.join(__dirname, 'src', 'template.pug'), filename: 'index.html', >), new FileManagerPlugin(< . >), ], devServer: < . >, >;

Теперь, благодаря pug-loader экземпляр плагина HtmlWebpackPlugin может работать с файлами .pug .

Из терминала создадим файл src/template.pug :

touch src/template.pug

Откроем файл в редакторе и напишем в нем следующее:

doctype html html(lang= 'ru') head meta(charset='utf-8') title= 'Быстрый запуск Webpack' body p Файл откомпилирован шаблонизатором Pug

Обязательно соблюдайте начальные отступы для тегов. Каждый отступ означает вложенность тега в вышестоящий тег.

Теперь удалим файл src/template.html и в терминале запустим команду:

npm run serve

Откроется страница браузера по адресу http://localhost:9000/, на которой увидим:

Проект собран на Webpack Файл откомпилирован шаблонизатором Pug

Из этого следует, что шаблонизатор Pug работает правильно. Остановим DevServer, для этого в терминале нажмем Ctrl+C .

Загрузка стилей в webpack

Для написания стилей будем использовать препроцессор Sass, который расширяет возможности CSS и упрощает создание CSS-кода, а также преобразует SCSS в понятный браузеру код CSS. Однако, не весь современный код CSS распознают устаревшие браузеры. Поэтому, будем дополнительно обрабатывать этот CSS с помощью плагина postcss-preset-env, чтобы большинство браузеров понимало современные стили.

Установим необходимые пакеты:

npm i -D sass-loader postcss-loader postcss-preset-env css-loader style-loader sass

• sass-loader — загрузчик файлов Sass/SCSS
• sass компилятор файлов .scss в .css .
• postcss-loader — загрузчик CSS файлов для пост-обработки. Должен работать с каким нибудь плагином.
• postcss-preset-env — плагин для PostCSS, который конвертирует современный CSS в код, понятный большинству браузеров, включением необходимых полифилов.
• css-loader загрузчик CSS-файлов
• style-loader загрузчик стилей в DOM

Если требуется использовать только CSS и не пользоваться преимуществами SCSS и PostCSS, то установите только css-loader и style-loader .

Создадим файл src/main.scss :

touch src/main.scss

и внесем в него следующее:

$font-size: 1rem; $font-color: lch(28 99 35); html

В файле используются переменные Sass и LCH цвета, которые поддерживаются не всеми браузерами, но PostCSS транспилирует эти цвета в понятные любому браузеру.

В файле src/index.js сделаем импорт файла main.scss:

import './main.scss';

Такой импорт стилей в скрипте не поддерживается языком JavaScript, а возможен благодаря webpack.

В webpack.config.js настроим пакеты:

. module.exports = < entry: . , output: < . >, module: < rules: [ < . >, < test: /\.pug$/, loader: 'pug-loader', >, + < + test: /\.(scss|css)$/, + use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'], + >, ], >, plugins: [ . ], devServer: < . >, >;

Указываем вебпаку, какие загрузчики стилей применять. Причем, порядок их перечисления в массиве свойства use важен, так как загрузчики используются вебпаком от последнего к первому:

• Так что, последним в списке должен быть sass-loader, который загружает файлы SCSS и передает компилятору sass, а этот компилирует код в CSS.
• Затем идет postcss-loader, который загружает CSS для PostCSS, а этот, применяя плагины, транспилирует самые современные фичи CSS (переменные, миксины и многое другое) в то, что понятно большинству браузеров. Также, PostCSS применяет автопрефиксер и линтер к CSS.
• Следующим идет css-loader, который интерпретирует @import и url() внутри CSS.
• Последним будет style-loader, который внедряет CSS в DOM.

Настройки для PostCSS можно задать как в файле webpack.config.js, так и в собственном файле настроек postcss.config.js . Воспользуемся вторым способом.

Создадим в корне проекта файл postcss.config.js

touch postcss.config.js

и запишем в файле следующий код:

module.exports = < plugins: < 'postcss-preset-env': < browsers: 'last 2 versions', >, >, >;

В терминале запустим команду:

npm run serve

Откроется браузер и появится цветной текст.

Проект собран на Webpack Файл откомпилирован шаблонизатором Pug

Теперь остановим сервер сочетанием клавиш Ctrl+C и введем в терминале команду:

npm run build

Если заглянем в каталог dist , то не обнаружим файла с расширением .css . Это связано с тем, что стили находятся в бандле dist/index.[hash].js .

Мы можем извлечь стили в отдельный файл, что позволит браузеру раздельно кэшировать JS и CSS, и если будут внесены изменения в файл CSS, то для обновления браузеру не нужно будет загружать весь бандл, а загрузится лишь обновленный файл CSS. Это положительно сказывается на скорости загрузки страниц браузером.

Чтобы сборщик мог извлекать CSS из файлов .js установим и настроим плагин mini-css-extract-plugin. Начнем с установки:

npm i -D mini-css-extract-plugin

Затем настроим плагин в файле webpack.config.js :

 const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); const FileManagerPlugin = require('filemanager-webpack-plugin'); + const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = < entry: path.join(__dirname, 'src', 'index.js'), output: < . >, module: < rules: [ . , < test: /\.(scss|css)$/, use: [ + MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader', ], >, ], >, plugins: [ new HtmlWebpackPlugin(< . >), new FileManagerPlugin(< . >), + new MiniCssExtractPlugin(< + filename: '[name].[contenthash].css', + >), ], devServer: < . >, >;

Вместо ‘style-loader’ используем MiniCssExtractPlugin.loader .

Проверим работу плагина, для этого в терминале запустим:

npm run build

В каталоге dist появится файл main.[hash].css .

Загрузка изображений в webpack

Теперь настроим webpack для работы с изображениями в формате PNG, JPG, GIF и SVG. До webpack 5 для работы с изображениями использовались загрузчики raw-loader, url-loader и file-loader. Начиная с webpack 5, вместо загрузчиков изображений, значков, шрифтов и т. д. используется встроенный Asset Modules.

Для поддержки изображений устанавливать ничего не нужно, требуется только настроить webpack.config.js :

 module.exports = < entry: path.join(__dirname, 'src', 'index.js'), output: < path: path.join(__dirname, 'dist'), filename: 'index.[contenthash].js', + assetModuleFilename: path.join('images', '[name].[contenthash][ext]'), >, module: < rules: [ . < test: /\.(scss|css)$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'], >, + < + test: /\.(png|jpg|jpeg|gif)$/i, + type: 'asset/resource', + >, + < + test: /\.svg$/, + type: 'asset/resource', + generator: < + filename: path.join('icons', '[name].[contenthash][ext]'), + >, + >, ], >, plugins: [ . ], devServer: < . >, >;

• assetModuleFilename — указывает выходной каталог с именем images для обработанных изображений и шаблон имени [name].[contenthash][ext] для файлов, которые соответствуют правилу type: ‘asset/resource’ . Если assetModuleFilename не указан, то, по умолчанию, каталогом будет dist , а имена файлов будут задаваться по шаблону [contenthash][ext] .
• [ext] — шаблон для расширения файла, также, включает точку.
• generator.filename — переопределяет assetModuleFilename для конкретного asset-правила. Здесь, svg-файлы будут выводиться в каталог dist/icons
• type имеет четыре типа asset:
  • asset/resource — работает так же, как и загрузчик file-loader. Модули, которые соответствуют правилу type: ‘asset/resource’ будут выводится в указанный с помощью assetModuleFilename каталог.
  • asset/inline работает как загрузчик url-loader. Модули, соответствующие правилу type: ‘asset/inline’ , встраиваются в код бандла как Data URL.
  • asset/source похож на работу загрузчика raw-loader. Модули, соответствующие правилу type: ‘asset/source’ , встраиваются без преобразований (как есть).
  • asset объединяет asset/resource и asset/inline . Он работает следующим образом: если размер модуля больше 8 КБ, то он работает как asset/resource , в противном случае — как asset/inline . Размер 8 КБ задан по умолчанию, но его можно изменить с помощью свойства parser.dataUrlCondition.maxSize.

  Создадим каталог src/images и поместим в него растровое изображения с именем image.png и векторное — logo.svg .

  Могу предложить свои рисунки. Перейдем по этой ссылке, наведем курсор на рисунок, нажмем правую кнопку мыши, выберем из контекстного меню «Сохранить изображение как. «, выберем каталог src/images нашего проекта, нажмем кнопку сохранить. Тоже самое проделаем для векторного изображения.

  Откроем файл src/template.pug и создадим два div контейнера с классами .logo-png и .logo-svg , а в контейнеры поместим изображения с тегами img :

  doctype html html(lang= 'ru') head meta(charset='utf-8') title= 'Быстрый запуск Webpack' body p Файл откомпилирован шаблонизатором Pug .logo-png img.logo1(src=require('./images/image.png') alt='Загрузка PNG изображений с помощью Webpack') .logo-svg img.logo2(src=require('./images/logo.svg'), alt='Загрузка SVG изображений с помощью Webpack')

  В атрибуте src используется require , т. е. изображение запрашивается как модуль.

  В терминале запустим команду:

  npm run serve

  В окне браузера должен появится текст, а под ним два рисунка:

  

  Изменим размеры изображений через стили, для этого добавим в конец файла src/main.scss следующее:

  .logo1 < width: 10em; >.logo2

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

  

  Оптимизация изображений

  Многие изображения сжимаются без ухудшения визуального качества. Сжатие дает браузеру выигрыш в скорости загрузки. Для этого существуют инструменты оптимизации изображений.

  Векторные изображения, к которым относится формат SVG, можно неограниченно масштабировать без потери качества. SVG — текстовый язык разметки, а SVG-файлы редактируются при помощи текстовых или векторных графических редакторов. Если в SVG изображении не сильно много мелких деталей, то SVG-файлы получаются меньше по размеру, чем сравнимые по качеству изображения в форматах JPEG или GIF. SVG применяется во фронтенде и для него придумано много инструментов. Одним из таких инструментов является svgo — минификатор, который удаляет лишний код в разметке SVG и тем самым уменьшает размер файла.

  npm i -D svgo

  Теперь, чтобы заработало сжатие для SVG файлов, настроим плагин imagemin-svgo для совместной работы svgo и imagemin. Однако, у нас не установлен imagemin.

  Минификатор imagemin применяется для оптимизации растровых изображений. Для webpack существует image-minimizer-webpack-plugin — это загрузчик и плагин для совместной работы imagemin и webpack.

  Сначала, установим плагин image-minimizer-webpack-plugin и минификатор imagemin :

  npm i -D image-minimizer-webpack-plugin imagemin

  Работа imagemin зависит от окружающих его плагинов. Поэтому, для оптимизации изображений без потерь качества, установим следующие плагины для imagemin:

  npm i -D imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo

  В файл webpack.config.js добавим настройки:

   . + const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin'); module.exports = < entry: path.join(__dirname, 'src', 'index.js'), output: < . >, module: < rules: [ . ], >, plugins: [ . ], devServer: < . >, + optimization: < + minimizer: [ + new ImageMinimizerPlugin(< + minimizer: < + implementation: ImageMinimizerPlugin.imageminMinify, + options: < + plugins: [ + ['gifsicle', < interlaced: true >], + ['jpegtran', < progressive: true >], + ['optipng', < optimizationLevel: 5 >], + ['svgo', < name: 'preset-default' >], + ], + >, + >, + >), + ], + >, >;

  Для svgo параметры оптимизации установлены по умолчанию < name: 'preset-default' >. Подробно о настройках оптимизации svgo читайте здесь. А чтобы более углубленно изучить настройки imagemin, читайте ImageMinimizerWebpackPlugin.

  В терминале запустим команду:

  npm run build

  Сравним размеры файлов изображений в каталоге src и dist . Файл image.png был 4,9 КБ, а стал 2,3 КБ, файл logo.svg был 11,4 КБ, а стал 2,5 КБ. Мы видим, заметное сжатие изображений, притом, визуальное качество этих изображений никак не пострадало.

  Включение синтаксиса Markdown и файлов .md в Pug

  Pug является удобным инструментом для замены HTML при написании разметки. Но если необходимо в разметку вставлять большие объемы текста, например, как в статье, которую вы сейчас читаете, то ни Pug, ни HTML не удобны для этого. Для написания текстов придумали разметку Markdown, которая удобна для чтения и написания текстов, и которая в итоге будет преобразована в HTML.

  Сравните текст, написанный на Markdown

  ## Markdown документ - Написано на **Markdown**

  с текстом, написанным на Pug:

  h2 Markdown документ ul li Написано на b Markdown

  и с текстом, написанным на HTML:

  По умолчанию шаблонизатор Pug понимает только свою разметку и разметку HTML. Чтобы в шаблонизаторе Pug использовать Markdown, применим фильтр :markdown-it модуля jstransformer-markdown-it.

  Фильтры позволяют использовать в шаблонизаторе Pug другие языки.

  Установим модуль jstransformer-markdown-it :

  npm i -D jstransformer-markdown-it

  Теперь можем в Pug файле использовать синтаксис Markdown. Добавим в конец файла src/template.pug три строки кода:

  doctype html html(lang= 'ru') head meta(charset='utf-8') title= 'Быстрый запуск Webpack' body p Файл откомпилирован шаблонизатором Pug .logo-png img.logo1(src=require('./images/image.png') alt='Загрузка PNG изображений с помощью Webpack') .logo-svg img.logo2(src=require('./images/logo.svg'), alt='Загрузка SVG изображений с помощью Webpack') :markdown-it(linkify langPrefix='highlight-') ## Markdown документ - Написано на **Markdown**

  Сохраним файл и в терминале выполним команду:

  npm run serve

  В браузере мы видим после изображений две строки текста, написанные с помощью Markdown. Это заголовок второго уровня и строка немаркированного списка со словом, которое выделено жирным шрифтом .

  

  Чтобы не загрязнять код текстом, можно поместить markdown разметку в файл с расширением .md и включить этот файл в pug-шаблон, используя include:markdown-it , например, создадим в корне проекта каталог content, а в нём файл article.md. Для этого, либо остановим сервер комбинацией клавиш Ctrl+C и воспользуемся данным терминалом, либо, оставив сервер работать, откроем новое окно терминала, в котором введем:

  mkdir content touch content/article.md

  Запишем в файл content/article.md следующее:

  ## Markdown документ - Написано на **Markdown**

  В файле src/template.pug заменим последние три строки на строку с include:markdown-it ../content/article.md :

  doctype html html(lang= 'ru') head meta(charset='utf-8') title= 'Быстрый запуск Webpack' body p Файл откомпилирован шаблонизатором Pug .logo-png img.logo1(src=require('./images/image.png') alt='Загрузка PNG изображений с помощью Webpack') .logo-svg img.logo2(src=require('./images/logo.svg'), alt='Загрузка SVG изображений с помощью Webpack') include:markdown-it ../content/article.md

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

  Подключение шрифтов

  Если мы хотим, чтобы во всех браузерах и на всех устройствах наш сайт отображал именно те шрифты, которые указаны в стилях, то нужно эти шрифты поместить на сервер сайта. Если этого не сделать, то у браузера может не оказаться нужного шрифта для отображения и он будет вынужден использовать подходящий шрифт. Это может сказаться на дизайне всего сайта.

  Шрифты нашего проекта разместим в каталоге src/fonts , создадим этот каталог, а в нём файл fonts.scss :

  mkdir src/fonts touch src/fonts/fonts.scss

  В этом файле будем хранить CSS стили для шрифтов. Импортируем файл fonts.scss в src/index.js :

   import './main.scss'; + import './fonts/fonts.scss'; function component(text) < const element = document.createElement('h1'); element.textContent = text; return element; >document.body.prepend(component('Проект собран на Webpack'));

  Теперь, скачаем нужные шрифты и код CSS для них.

  1. На странице google-webfonts-helper в списке слева нужно выбрать необходимый шрифт.
  • Справа от списка появится страница для шрифта. На этой странице можно дополнительно указать нужные кодировки и стили, которые планируется использовать в шрифте.
  • В секции Select charsets выберем cyrillic и latin .
  • В секции Select styles выберем regular , italic , 700 и 700italic
  • В секции Copy CSS: в поле Customize folder prefix (optional): укажем префикс пути ./ и скопируем из серого поля CSS-код в наш файл src/fonts/fonts.scss .
  1. Нажмем на синюю кнопку в секции Download files и скачаем файл с расширением .zip .
  2. Распакуем из zip-архива файлы шрифтов в каталог src/fonts/ .

  Рекомендуется оптимизировать шрифты на таких сервисах как Font2web или Transfonter, но шрифты Google уже оптимизированы, поэтому этот шаг можно пропустить.

  Для обработки шрифтов вебпаком добавим следующие правила в файл webpack.config.js :

   module: < rules: [ + < + test: /\.(woff2?|eot|ttf|otf)$/i, + type: 'asset/resource', + >, ], >,

  В файле main.scss укажем на используемый шрифт. Так, если это будет шрифт Roboto и мы хотим его использовать по всему нашему проекту, то запишем:

  html

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

  npm run serve

  Откроется браузер и мы увидим, что весь шрифт отображается без засечек.

  

  Проверить применяемый шрифт для элемента можно с помощью инструментов разработчика. Чтобы быстро открыть инструменты разработчика в браузере, нажмем Ctrl+Shift+I , и включим режим выбора элементов сочетанием клавиш Ctrl+Shift+C . Если у вас браузер Chrome или Yandex, то наведите курсором на любой текст на странице. В контекстной подсказке будет показан применяемый шрифт:

  

  Если у вас браузер Firefox, то на применяемые шрифты нужно смотреть в секции для CSS-кода Инспектора.

  Копирование файлов и каталогов

  Часто, возникает необходимость скопировать в готовую сборку некоторые файлы или каталоги без каких-либо преобразований. Это могут быть файлы PDF, либо файл robots.txt , который используется для ограничения доступа поисковым роботам к некоторым ресурсам сайта, файлы favicon.ico , sitemap.xml и т.п. В исходном коде такие ресурсы, обычно, помещают в каталог static , а из него эти ресурсы копируют в корень каталога dist .

  Создадим каталог src/static , а в нем файл robots.txt :

  mkdir src/static touch src/static/robots.txt

  Как заполнять файл robots.txt можно узнать в статье Использование файла robots.txt, а пока оставим его пустым.

  В параграфе Автоматическая очистка каталогов применялся плагин filemanager-webpack-plugin , который может удалять, копировать, создавать, перемещать и архивировать файлы и каталоги. Применим этот плагин для копирования фалов. Так как плагин в проекте уже установлен, то остается его настроить для копирования. Добавим в файл webpack.config.js следующий код:

  * const FileManagerPlugin = require('filemanager-webpack-plugin'); module.exports = < plugins: [ . , * new FileManagerPlugin(< * events: < * onStart: < * delete: ['dist'], * >, + onEnd: < + copy: [ + < + source: path.join('src', 'static'), + destination: 'dist', + >, + ], * >, * >, * >), . , ], >;

  Звездочками * отмечены строки, которые для этого плагина были настроены раньше в параграфе Автоматическая очистка каталогов, а знаком + отмечены строки, которые добавлены сейчас.

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

  npm run build

  В каталоге dist появился файл robots.txt .

  Установка и настройка React

  Установим react и react-dom в проект. Причем, они должны быть установлены как библиотеки. Для этого запустим установку без опции -D :

  npm i react react-dom

  В файле package.json эти зависимости должны появиться в секции «dependencies».

  Так как в реакте мы будем писать код на JSX, то установим пресет @babel/preset-react :

  npm i -D @babel/preset-react

  @babel/preset-react — модуль, преобразующий JSX в JavaScript.

  Откроем файл .babelrc и добавим строку @babel/preset-react таким образом:

   < "presets": [ [ "@babel/preset-env", < "modules": false >], "@babel/preset-react" ] >

  В каталоге src создадим каталог components, а в нём файл app.js:

  mkdir src/components touch src/components/app.js

  Запишем в файл app.js следующий код:

  import React, < Component >from 'react'; class App extends Component < render() < return ( <>
  Приложение на React
   ); > > export default App;

  Это отдельный компонент, который будет отображать заголовок.

  Теперь создадим рендерер, который отобразит компонент App. Для этого добавим в файл index.js строки, отмеченные знаком + , а строки, отмеченные знаком — можно удалить, но мы их пока оставим:

  + import React from 'react'; + import ReactDOM from 'react-dom'; + import App from './components/app'; import './main.scss'; import './fonts/fonts.scss'; - function component(text) < - const element = document.createElement('h1'); - element.textContent = text; - return element; - >- document.body.prepend(component('Проект собран на Webpack')); + ReactDOM.render(, document.getElementById('root'));

  В последней строке мы указали, куда React будет отрисовывать свои элементы. Это элемент div с id=»root» . Поэтому, создадим в файле template.pug такой элемент div :

  doctype html html(lang= 'ru') head meta(charset='utf-8') title= 'Быстрый запуск Webpack' body p Данный файл откомпилирован шаблонизатором Pug .logo-png img.logo1(src=require('./images/image.png') alt='Загрузка PNG изображений с помощью Webpack') .logo-svg img.logo2(src=require('./images/logo.svg'), alt='Загрузка SVG изображений с помощью Webpack') include:markdown-it content/article.md #root

  Элемент #root мы поместили в конце файла, хотя можем поместить где угодно. Также мы можем создать несколько элементов с разными идентификаторами и разместить их в разных местах файла или файлов, но для каждого такого элемента нужно создавать отдельный ReactDOM.render .

  Чтобы показать, что SCSS работает в React, откроем файл main.scss и добавим в конец следующий код:

  Теперь запустим сервер:

  npm run serve

  Откроется окно браузера и мы увидим следующее:

  

  Теперь мы можем разрабатывать приложения на React.

  Полезные ресурсы для настройки webpack

  Настройка Webpack заставляет постоянно редактировать файл webpack.config.js . Поэтому, полезно держать под рукой справочник. Официальный сайт Webpack’а предлагает такой справочник, который представляет файл конфигурации с интерактивными опциями, если нажать на название непонятной опции, откроется страница с подробной документацией.

  Рекомендую посетить сервис createapp.dev, который поможет создать готовый шаблон проекта с необходимыми настройками. Этот сервис настраивает проект под Webpack, Parcel и Snowpack и полезен для опытных пользователей.

  Заключение

  В этой статье показано, как настроить сборку webpack для создания фронтенда сайта с использованием шаблонизатора Pug, препроцессора SCSS, языка разметки Markdown и языка JavaScript. Также, добавлены настройки для React. Показаны методы оптимизации изображений, подключения шрифтов, настройки локального сервера. В целом сборка рабочая и полностью справляется с задачами, описанными в этой статье.

  Не рассмотрена такая тема, как разделение кода на чанки. Это отдельная тема, касающаяся производительности. Если после очередной сборки бандла вы замечаете, что загрузка сайта начинает ощутимо возрастать, то стоит рассмотреть такие методы, как Code Splitting, Lazy Loading и Tree Shaking.

  Весь код из этой статьи находится на Github.

  Easing Functions – функции плавности для CSS-анимации и переходов

  Функции плавности меняют восприятие анимации, влияя на скорость воспроизведения и частоту кадров. Мы живые люди, и привыкли к естественному, нелинейному движению. Использование настраиваемых функций улучшает впечатление пользователей. В этой статье мы погрузимся в функции плавности, рассмотрим возможности их применения для создания потрясающей естественной анимации. Материал адаптирован на русский язык совместно с Максимом Васяновичем, ментором курса «Профессия Frontend-разработчик с нуля до PRO» в Skillbox.

  Замечали, как плавно и приятно смотрится анимация в хорошем профессиональном проекте? Интересный пример – веб-сайт In Pieces, где анимация используется не только для украшения, но и убедительно передает информацию об исчезающих видах. Не только сам дизайн и стиль анимации радует глаз, но также изящные переходы и движения. Их плавность в сочетании с дизайном и подачей, делает анимацию потрясающе естественной. В этом сила функций плавности, также называемых временными функциями (прим. ред. В статье автор использует оба названия).

  При написании свойств перехода и анимации в CSS мы обычно используем заранее определенные функции плавности: ease , ease-out и подобные им. Они хорошо смотрятся и работают в большинстве случаев. Однако наличие на странице дюжины или более анимированных элементов с одинаковой продолжительностью и значениями функций плавности может сделать пользовательский интерфейс несколько однообразным и монотонным. Люди лучше реагируют на естественное движение, поэтому более разнообразная и естественная анимация и переходы улучшат взаимодействие с пользователем.

  Возвращаясь к примеру In Pieces, обратимся к таблице стилей. Можно заметить, что для достижения этой изящной анимации используются различные настраиваемые функции cubic-bezier в сочетании с предопределенными временными функциями linear и ease-in . Анимация не выглядела бы так хорошо, если бы вместо настраиваемых функций использовались только предопределенные. На следующем видео все функции плавности заменены на ease-out . Несмотря на то что в анимации нет ничего плохого, обратите внимание, что она не такая захватывающая, как исходная.

  Теперь подробно рассмотрим функции плавности CSS, типы функций и способы создания пользовательских функций с использованием кубических кривых Безье.

  Под капотом

  Чтобы лучше понять функции плавности, следует сделать шаг назад и взглянуть на основы анимации в CSS.

  Анимация определяется ключевыми кадрами, которые задают вид и расположение элемента в определенных точках. CSS-переходы используют два ключевых кадра (начальное и конечное значение), а CSS-анимация позволяет более точно управлять процессом с помощью правила @keyframes .

  

  Продолжительность анимации определяет время от первого ключевого кадра до последнего. На следующем графике показана связь между ключевыми кадрами анимации и продолжительностью.

  

  Есть много способов перехода анимации между двумя ключевыми кадрами. Например, анимация может иметь постоянную скорость, или она может быстро двигаться в начале и замедляться ближе к концу, или двигаться медленно в начале, а затем ускоряться, пока не достигнет конца, и т. д. Эта скорость определяется с помощью функций плавности (временных функций). Как видно на предыдущем графике, функция плавности представлена линией, соединяющей две точки. Мы видим линейную функцию (прямая линия), но переход между ключевыми кадрами может описываться и кривой.

  

  Как видите, существует множество возможных вариантов функций плавности анимации. Рассмотрим их.

  Типы функций плавности

  В CSS можно использовать три основных типа функций плавности:

  • Линейные функции ( linear )
  • Кубические функции Безье (в т.ч. ease , ease-in , ease-out и ease-in-out )
  • Ступенчатые функции ( steps )

  Линейные функции

  Мы рассмотрели линейные функции в одном из предыдущих примеров, поэтому просто подведем итог. Благодаря временным функциям, анимация проходит по ключевым кадрам с постоянной скоростью. Как вы, возможно, уже знаете, линейную временную функцию можно легко настроить в CSS с помощью linear .

  

  Кубические функции Безье

  Линейные временные функции подходят для определенных случаев, но если функция используется неправильно или слишком часто, тогда анимация будет выглядеть посредственно и неестественно. Как мы увидели на примере с In Pieces, пользователи лучше реагируют на естественное движение, а именно, на нелинейные временные функции, которые дают возможность к ускорению и замедлению.

  Кривые Безье часто используются в векторной графике, анимации и робототехнике для более простого создания плавных кривых и траекторий. В CSS-анимации используется кривые Безье, построенные по четырем точкам, которые также известны как кубические кривые Безье.

  Часто используемые предопределённые функции плавности, такие как ease , ease-in , ease-out и ease-in-out , относятся к кубическим функциям Безье. Они могут послужить в качестве быстрого способа установить нелинейную функцию плавности. С помощью cubic-bezier можно также описать и линейную функцию.

  Функция Плавности

  Значение cubic-bezier

  Скорость в начале

  Скорость в середине

  Скорость в конц

  cubic-bezier(0.0, 0.0, 1.0, 1.0)

  Похожие публикации:

  1. Как отключить выделение текста css
  2. Как переименовать папки на айфоне ios 15
  3. Как перенести joomla на другой телефон
  4. Как соединить 2 списка python