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

Современный процесс разработки во фронтенде: Упаковка модулей с Parcel

Parcel призван стать " бесконфигурационной " альтернативой Webpack, популярному Javascript упаковщику модулей. Упаковщик модулей берет отдельные, многократно используемые JS файлы (или модули) и "связывает" их в один файл для использования в браузере, а также делает их минификацию. Это может повысить производительность сайта, так как браузеру не нужно загружать кучу файлов по отдельности. Это само по себе очень полезно, но Parcel из коробки, поддерживает множество других задач, в том числе:

  • Запуск локального сервера
  • Создание и минимизация HTML, CSS и других ресурсов
  • Транспайлинг Javascript
  • Автоматическая перезагрузка страниц
  • Разделение кода

Используя Parcel, мы можем делать все, что мы уже делали в предыдущем руководстве (и многое другое!), и при этом писать меньше скриптов.

Создание Parcel проекта

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

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

Мы начнем с установки Parcel в качестве зависимости, а также установим node-sass (можно перечислить сразу несколько пакетов):

npm install parcel-bundler node-sass -D

(Если вы создаете новый проект, не забудьте сначала запустить npm init).

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

<link rel="stylesheet" href="./scss/styles.scss" />

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

parcel src/index.html

Мы также можем (опционально) указать Parcel, какой порт использовать, и поручить ему открыть наш сайт на новой вкладке браузера. Следующая команда указывает ему использовать порт 3000, и с помощью флага --open он откроется на новой вкладке:

parcel src/index.html -p 3000 --open

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

"scripts": {
	"start": "parcel src/index.html -p 3000 --open",
}

Теперь нам нужно только набрать npm start.

Вторая из команд Parcel создает сайт для продакшена (собирает проект):

parcel build src/index.html

Опять же, мы можем написать скрипт для выполнения этой команды:

"scripts": {
	"start": "parcel src/index.html -p 3000 --open",
	"build": "parcel build src/index.html"
}

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

"scripts": {
 "start": "parcel src/index.html -p 3000 --open",
 "clean": "rm -rf dist/*",
 "build:parcel": "parcel build src/index.html",
 "build": "npm run clean && npm run build:parcel"
}

Я внес несколько небольших изменений в наши скрипты:

  • Скрипт clean удаляет все, что находится в папке dist.
  • Я переименовал предыдущий скрипт build в build:parcel.
  • Теперь команда build запускает скрипт clean, за которым следует скрипт build:parcel.

А теперь запустите npm start. Parcel должен открыть ваш сайт в браузере https://localhost:3000 и перезагружать страницу при внесении любых изменений в SCSS или HTML. Нам не нужен Browsersync, и нам не нужно писать никаких дополнительных скриптов.

Добавление плагинов

Мы можем добавлять плагины (которые являются пакетами NPM) для оптимизации изображений и создания спрайтов SVG:

npm install parcel-plugin-imagemin parcel-plugin-svg-sprite

Чтобы пакет parcel-plugin-imagemin начал работать, нам нужно добавить конфигурационный файл. Добавьте следующее в файл imagemin.config.js в корневом каталоге проекта:

module.exports = {
 gifsicle: { optimizationLevel: 2, interlaced: false, colors: 10 },
 jpegtran: { progressive: true, arithmetic: false },
 pngquant: { quality: [0.25, 0.5] },
 svgo: {
 plugins: [{ removeViewBox: false }, { cleanupIDs: true }]
 },
 webp: { quality: 10 }
};

parcel-plugin-svg-sprite должен просто работать "из коробки" - запустите проект и попробуйте добавить несколько иконок SVG в каталог src/icons. Затем вы сможете использовать любой из них в вашем HTML с элементом SVG:

<svg>
   <use href="icons/icon.svg">
</svg>

Больше плагинов можео посмотреть здесь.

Трансплайтинг

Мне нравится писать свой JS, используя синтаксис ES2015. Babel, трансплайлер, конвертирует современный Javascript в синтаксис, который может быть прочитан старыми браузерами - это значит, что вы можете писать последний JS код и он будет работать во всех браузерах. Это очень полезная вещь, которую можно включить в стартовый проект.

Babel имеет множество различных плагинов и вариантов конфигурации, и их использование может показаться немного пугающим. Но есть удобный пакет под названием preset-env, который заботится о трансформации всех возможностей ES2015 (стрелочные функции, деструкторы, операторы расширения ), который мне очень подходит, поэтому давайте установим его.

npm install @babel/core @babel/preset-env -D

Вы можете добавить другие плагины, если вы хотите настроить Babel под ваши конкретные потребности (например, если вы используете React, Vue или другой фреймворк).

Теперь нам нужно добавить конфигурационный файл в корень проекта:

touch .babelrc

Если мы удовлетворены настройками по умолчанию, то нам совсем не нужно много добавлять в наш конфигурационный файл. Достаточно следующего:

{
	"presets": ["@babel/preset-env"]
}

Документация Babel содержит дополнительную информацию о конфигурационных опциях, если они вам понадобится.

Parcel запускает Babel автоматически, поэтому после установки и создания конфигурационного файла мы готовы к работе - наш код будет преобразован, когда мы запустим npm run build.

Пример

Я создал репозиторий стартового проекта, используя тот же процесс, которые описан в этой статье - не стесняйтесь клонировать и используйте его для своих проектов.

Что дальше

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

Комментарии

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

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

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

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