компилируется...
Перейти к основному содержанию
Рекомендовать во Вконтакте Рекомендовать в Фейсбуке Рекомендовать в Твиттере

Современный процесс разработки во фронтенде: Создание стартового проекта с помощью скриптов NPM

Когда речь заходит о создании простого фронт-энд проекта, то как начать? Какие инструменты вам нужны? Я подозреваю, что у каждого будет свой ответ. Вы начинаете с каркаса (JS или CSS), или готового шаблона? Возможно, вы используете таск-менеджер для выполнения задач (например, Gulp) для организации потребностей вашего проекта. Или вы начинаете с простого HTML и CSS-файла?

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

  1. Введение в использование скриптов NPM для компиляции Sass, запуска дев-сервера с автоматической перезагрузкой страниц.
  2. Настройка и работа с Parcel, упаковщик модулей (сокращённо можно называть бандлер) с минимальной конфигурацией.
  3. Построение многократного используемой Sass архитектуры

Не стесняйтесь пропускать те части, с которыми вы уже знакомы.

Зачем нужен репозиторий для стартового проекта?

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

  • Запускать локальный сервер
  • Компилировать SCSS в CSS и минимизировать выходные данные
  • Атоматически перезагружать старницы при изменениях
  • Оптимизировать изображения
  • Создавать спрайты для SVG иконок

В более крупных проектах существует гораздо больше вариантов инструментов, которые мы могли бы добавить в набор, чтобы помочь нам создать эффективные и доступные веб-сайты. Возможно, нам понадобится упаковщик модулей, разделение кода и преобразование js кода (например из typescript в javascript). Что касается CSS, возможно, мы хотели бы подключить наши критически важные CSS или очистить неиспользуемые селекторы.

Если вы не знаете, что означают некоторые из этих слов, вы не одиноки! Фронт-энд стал гораздо более сложным в последние годы, и может быть трудно идти в ногу с постоянными изменениями для использования лучших практик. Одна статья, которая действительно помогла мне понять обширный инструментарий, который в наши дни попадает в область разработки фронт-энд разработчиков - Современный Javascript для динозавров. Хотя этой статье несколько лет, она все еще чрезвычайно актуальна и кратко объясняет, как Javascript превратился в такую жизненно важную часть нашего рабочего процесса.

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

Выбор инструментов

Я не тот человек, который любит проводить время, устанавливая и настривая сложные инструменты. Я хочу, чтобы установка инструментов требовала от меня как можно меньше времени, чтобы я мог сконцентрироваться на том, что я люблю делать! Хотя я использовал Gulp в прошлом, сейчас это кажется не такой необходимой частью инструментария: практически все зависимости можно установить через NPM и настроить их с помощью скриптов NPM не сложнее, чем настроить их с помощью Gulp. Поэтому использвание таск-менеджера кажется немного избыточным и только добавляет дополнительную зависимость к проекту.

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

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

Установка Node.js

Самое первое, что нам нужно сделать, чтобы настроить наш проект на работу со скриптами в NPM, это убедиться, что у нас установлен Node.js глобально. Звучит достаточно просто, но уже сейчас все становится немного сложнее, когда мы понимаем, что существует ряд различных способов как это сделать:

  • Загрузите последнюю версию с веб-сайта и следуйте инструкциям по установке.
  • Используйте менеджер пакетов, подобный Homebrew для Mac, который позволяет нам обновлять нашу версию узла простой командой: brew upgrade node.
  • Использование NVM (Менеджер версий Node).

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

После установки Node (любым удобным для вас способом) вы можете проверить текущую установленную версию, запустив node -v. Если вы используете NVM, вы можете (опционально) создать конфигурационный файл .nvmrc, чтобы убедиться, что вы всегда запускаете правильную версию Node для вашего проекта.

NPM

При установке Node также устанавливается NPM (менеджер пакетов Node Package Manager). Это, по сути, огромная библиотека инструментов (или пакетов) разработки Javascript с открытым исходным кодом, которые может опубликовать любой желающий. Мы имеем прямой доступ к этой библиотеке инструментов и можем установить любой из них в нашем проекте.

NPM или Yarn?

Yarn - является альтернативным менеджером пакетов, похожим на NPM, и почти таким же популярным. На самом деле, многие люди считают его улучшением NPM. Он может быть использован аналогичным образом, для установки зависимостей. Если вы предпочитаете использовать Yarn, а не NPM, вы можете безопасно заменить команды NPM на команды, эквивалентные Yarn, где бы они ни использовались в этой статье.

Обратите внимание, используем ли мы Yarn или NPM, мы все еще устанавливаем пакеты NPM. Yarn - это просто инструмент CLI, нет никакой другой библиотеки пакетов Yarn. Ещё одна из многих запутанных вещей в экосистеме Javascript!

Инициализация проекта

Сначала создадим новую папку проекта, которую будем (воображаемо) называть npm-starter-project. Откройте терминал и выполните команду внутри этой папки:

npm init

Выполнение этой команды вызывает несколько шагов для инициализации нашего проекта в командной строке, таких как добавление имени и описания. Вы можете нажать Enter, чтобы пропустить каждый из них, если вы хотите завершить их сразу - мы сможем отредактировать их позже. Затем вы увидите, что был создан файл package.json, который должен выглядеть примерно так:

{
  "name": "npm-starter-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT"
}

Этот файл содержит всю информацию о нашем проекте, и здесь мы можем редактировать детали, которые мы только что пропустили.

Все пакеты, которые мы устанавливаем из NPM, будут автоматически перечислены в файле package.json. Здесь же мы настроим скрипты, которые будут собирать и запускать наш проект. Вскоре мы установим некоторые пакеты и настроим их, но сначала нам понадобится базовая архитектура проекта, а также некоторые файлы для работы.

Структура проекта

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

npm-starter-project
 index.html
 src
   icons
   images
   js
   scss
 node_modules
 package.json

Мы уже сгенерировали package.json в корне проекта. Нам просто нужно создать каталог под названием src, содержащий каталоги для изображений (images), javascript (js), стилей (scss) и иконок (icons), а также файл index.html.

Создание структуры папок из командной строки

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

touch index.html
mkdir src && cd src
mkdir js scss images icons
cd ../

Построчно, этот код:

  1. Создает новый файл index.html
  2. Создает новую директорию src и перемещает нас в новую директорию
  3. Создает внутри src директории, называемые js, scss, images и icons, а также файл index.html.
  4. Возвращает нас к корню проекта.

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Project starter</title>
		<link rel="stylesheet" type="text/css" href="dist/css/styles.css" />
	</head>
	<body>
		<h1>Hello world!</h1>
	</body>
</html>

Установка зависимостей

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

  • Запустить локальный сервер
  • Компилировать Sass в CSS
  • Наблюдать за изменениями и перезагружать страницу при каждом обновлении HTML или CSS.

Установим пакет node-sass из NPM, который компилирует .scss файлы в CSS. В терминале запустите:

npm install node-sass -D

После выполнения этой команды вы должны увидеть пару новых вещей:

  1. Создан каталог под названием node_modules.
  2. В файле package.json, node-sass находится в списке "devDependencies".
  3. Добавился файл package-lock.json. Этот файл нем ни в коем случае не стоит как-то изменять.

Добавление .gitignore

Каталог node_modules - это каталог, где будет жить код для всех зависимостей нашего проекта. Содержимое этой папки не должно быть привязано к Github (или вашему любимому хостингу репозиториев), так как установка всего нескольких зависимостей может привести к сотням тысяч файлов! Итак, следующее, что нам нужно сделать, это добавить файл .gitignore в корень проекта:

touch .gitignore && echo "node_modules" >> .gitignore

Эта команда создает файл .gitignore и добавляет в него node_modules. (Опять же, вы можете сделать это вручную, если хотите). Теперь мы в безопасности, зная, что наши пакеты не будут зафиксированы.

Если мы не фиксируем эти файлы, то как мы можем поделиться нашими зависимостями с другими пользователями? Ну, это возможно сделать в файле package.json. Он сообщает нам имя и номер версии всех зависимостей, которые мы установили. Любой, кто клонирует проект (включая нас, когда мы используем его для запуска нового проекта), может просто запустить npm install, и все связанные зависимости будут получены и загружены из NPM.

Виды зависимостей

Когда мы установили node-sass, мы запустили команду install с флагом -D. Таким образом, проект устанавливается как "зависимость для разработки". Другие пакеты могут не требовать эту команду, и сохранить пакет в разделе "dependencies". Разница в том, что обычные зависимости являются зависимостями времени выполнения (т.е. они будут выполнятся в браузере), в то время как зависимости для разработки (dev dependencies) нужны только во время разработки проекта.

Кроме того мы установим Browsersync в качестве dev зависимости. Browsersync запустит локальный сервер и будет перезагружать браузер при изменении файлов.

npm install browser-sync -D

Пишем сценарии NPM

Теперь пришло время написать несколько скриптов для запуска нашего проекта. Мы напишем их в разделе "scripts" нашего сайта package.json.

Sass в CSS

NPM скрипты состоят из ключа (имя скрипта, которое мы вводим в терминал для запуска) и значения - самого скрипта, который будет выполняться при запуске команды. Сначала мы напишем скрипт, который компилирует Sass в CSS. Мы дадим ему название scss (мы можем назвать его как угодно) и добавим в раздел "scripts":

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

Пакет node-sass содержит опции и некоторые из них мы указываем в команде скрипта. Мы определяем стиль вывода compressed, выходной каталог dist/css и каталог с исходниками src/scss, который в настоящее время пуст. Создадим исходный .scss файл из терминала:

touch src/scss/styles.scss

Добавьте несколько стилей во вновь созданный файл, затем вернитесь в терминал и запустите выполните:

npm run scss

После этого вы должны увидеть новую директорию под названием dist, содержащую ваш скомпилированный CSS. Теперь, каждый раз, когда вы вносите изменения в свой файл styles.scss, вы можете запускать скрипт, и эти изменения будут компилироваться.

Автоматическая перезагрузка страниц

Наш первый скрипт отлично работает, но он пока не очень полезен, так как каждый раз, когда мы вносим изменения в наш код, нам нужно возвращаться в терминал и запускать скрипт снова. Было бы гораздо удобнее, если бы мы запустили локальный сервер и увидели, как наши изменения мгновенно отражаются в браузере. Для этого мы напишем скрипт, использующий Browsersync, который мы уже установили.

Сначала давайте напишем скрипт, запускающий сервер, который мы будем называть serve:

"scripts": {
	"scss": "node-sass --output-style compressed -o dist/css src/scss",
	"serve": "browser-sync start --server --files 'dist/css/*.css, **/*.html'"
}

В опции --files мы перечисляем файлы, которые Browsersync должен отслеживать. Он перезагрузит страницу при любом из изменений сделанных в этих файлах. Если мы запустим этот скрипт сейчас (npm run serve), он запустит локальный сервер, и мы сможем предварительно просмотреть нашу веб-страницу, перейдя на http://localhost:3000 в браузере.

Отслеживание изменений

В настоящее время нам все еще нужно запустить наш scss скрипт, когда мы хотим скомпилировать наши Sass стили. Нам нужны наши скрипты, чтобы сделать это:

  1. Следить за изменениями в нашем каталоге src/scss.
  2. Когда происходит изменение, скомпилировать его в CSS в dist/css.
  3. После обновления файла dist/css следует перезагрузить страницу.

Сначала нам нужно установить пакет NPM onchange, чтобы следить за изменениями в исходных файлах:

npm install onchange -D

Мы можем написать скрипт NPM, который запускает другие сценарии. Давайте добавим скрипт, который следит за изменениями и запускает наш скрипт scss:

"scripts": {
	"scss": "node-sass --output-style compressed -o dist/css src/scss",
	"serve": "browser-sync start --server --files 'dist/css/*.css, **/*.html'",
	"watch:css": "onchange 'src/scss' -- npm run scss",
}

Скрипт watch:css отслеживает изменения, используя пакет onchange (src/scss) и запускает наш скрипт scss, когда происходят изменения.

Комбинирование скриптов

Теперь нам нужно запустить две команды параллельно: Команду serve для запуска нашего сервера и команду watch:css для компиляции нашего Sass в CSS, которая вызовет перезагрузку страницы. Используя скрипты NPM, мы можем легко выполнять команды последовательно, используя оператор &&:

"scripts": {
  /*...*/
  "start": "npm run serve && npm run scss"
}

Однако вариант с последовательным запуском нам не подходит, поскольку скрипт start будет ждать до тех пор, пока скрипт serve не завершит работу, прежде чем он начнет выполнять скрипт scss. Если мы добавим этот скрипт, а затем запустим его в терминале (npm start), то npm run scss не будет запущен, пока мы не остановим сервер.

Чтобы мы могли запускать команды параллельно, нам нужно установить другой пакет. NPM имеет несколько вариантов на выбор. Тот, который выбрал я npm-run-all:

npm install npm-run-all -D

Основными опциями этого пакета (или, по крайней мере, те, которые нас волнуют) являются run-s и run-p. Первая предназначена для последовательной работы, вторая - для параллельной работы со скриптами. Как только мы установим этот пакет, мы сможем использовать его для написания скрипта, который будет запускать одновременно наши скрипты serve и watch:css. Мы назовем этот скрипт start.

"scripts": {
	"scss": "node-sass --output-style compressed -o dist/css src/scss",
	"serve": "browser-sync start --server --files 'dist/css/*.css, **/*.html'",
	"watch:css": "onchange 'src/scss' -- npm run scss",
	"start": "run-p serve watch:css"
}

Теперь у нас есть очень простой стартовый проект. Мы написали несколько скриптов, которые позволяют нам просто набирать команду npm start, чтобы запустить сервер, следить за изменениями, компилировать Sass в CSS и перезагружать страницу. Пример репозитория можно найти здесь.

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

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

Комментарии

Пока что нет комментариев, вы можете быть первым.
Войти или Регистрация , чтобы оставлять комментарии.

Лучшие публикации

Популярные теги

Наш сайт использует куки. Узнайте больше о нашем использовании куки: политика в отношении файлов cookie
Наш сайт существует только благодаря показу онлайн-рекламы нашим посетителям.
Пожалуйста, поддержите нас, отключив блокировку рекламы.