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

Упаковываем файлы молниеносно быстро с помощью Parcel JS.

Ненавижу сетапить свои веб-проекты. Я просто хочу перейти к собственно кодированию и не тратить столько времени на настройку всего окружения.

Поэтому я был очень рад попробовать Parcel.js, инструмент сборки файлов, похожий на WebPack или Gulp, но представленный в виде бандлера "нулевой конфигурации".

И должен сказать… Посылка доставлена. После создания небольшого проекта с файлами index.html, script.js и style.scss, я запустил его менее чем за пять минут!

Вот некоторые вещи, которые Parcel может сделать, которые вам понравятся:

  • Он автоматически установит другие необходимые пакеты, такие как Sass и Babel.
  • Parcel автоматически скомпилирует ваши Sass файлы в CSS.
  • Вам не нужно создавать конфигурационный файл для стандартной функциональности.
  • Бонус: Parcel имеет встроенный локальный сервер и он будет автоматически отслеживать файлы в которые вы вносите изменения!

Так что если вы просто работаете над простым веб-приложением и не нуждаетесь в особом контроле над своей сборкой, вы можете переключиться на Parcel c WebPack или Gulp. Раньше я использовал Gulp, но с этого момента планирую использовать Parcel.

Давайте посмотрим, как начать работать с Parcel!

Установка Parcel

Вы можете установить Parcel с помощью npm или yarn. Вам также нужно будет создать файл package.json. (Примечание: если у вас не установлен Node.js, вам нужно его установить перед выполнением следующих шагов!)

npm:

npm install -g parcel-bundler
npm init -y

yarn:

yarn global add parcel-bundler
yarn init -y

Настройка файлов веб-сайта

Мы создадим очень простой сайт только с этими файлами:

  • index.html
  • script.js
  • style.scss

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

<script src="./script.js"></script>

Затем в свой файл script.js включите Sass-файл:

import '/style.scss';

Запустите Parcel!

И это все, что вам нужно для базовой установки. Чтобы запустить Parcel в командной строке, воспользуйтесь этой командой:

parcel index.html

Это соберет ваш проект и запустит локальный сервер разработки на http://localhost:1234/ Круто то, что в любое время, когда вы вносите изменения в свои файлы, Parcel будет автоматически перестраивать и обновлять ваш локальный сайт.

Кроме того, если вы используете команду build, Parcel минимизирует ваши HTML, CSS и JS файлы за вас. Опять же, без необходимости устанавливать дополнительные пакеты!

parcel build index.html

Звучит безумно просто? Вроде того, особенно если вы привыкли спорить с WebPack или Gulp.

Так как же работает Parcel?

Когда вы делаете продуктовую сборку с Parcel, он создаст папку /dist в вашем проекте и поместит скомпилированные копии ваших файлов в эту папку. Вот откуда берет файлы дев сервер.

Если вам не нужен или не нужен локальный дев серве, вы можете создать свой собственный и использовать содержимое папки /dist в качестве исходных файлов.

Из коробки, Parcel установит и будет использовать некоторые пакеты для преобразования ваших файлов:

  • Babel используется для преобразования синтаксиса ES6 в JavaScript-версию, которая доступна во всех браузерах.
  • CSS Nano используется для минимизации вашего CSS, когда вы используете команду build.

Но что если я хочу большего?

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

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

Я хотел добавить autoprefixer для добавления префиксов в свойства CSS. К сожалению, Parcel не делает этого по умолчанию, но было довольно просто добавить autoprefixer в мой проект.

Сначала я установил PostCSS, который запускает autoprefixer:

yarn add postcss-modules autoprefixer

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

{  
  "plugins": {
    "autoprefixer": true
  }
}

Если вам интересно, с какими другими файлами может работать Parcel, обязательно посетите их сайт. Посылка может работать с TypeScript, React, Vue и многими другими типами проектов.

Должен ли я заменить WebPack и Gulp на Parcel?

Если вы новичок и вам просто нужно скомпилировать файлы SCSS в CSS, Parcel будет отличным выбором. Если вам нужно больше контроля или много настроек, WebPack или Gulp все еще может быть для вас лучшим выбором.

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

Что ты думаешь о Parcel? Не стесняйтесь оставить свой комментарий ниже.

Комментарии

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

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

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

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