Webpack vs Parcel: если вы когда-нибудь настраивали первый, то со вторым все по-другому!

Webpack vs Parcel: если вы когда-нибудь настраивали первый, то со вторым все по-другому!

От автора: и как все же научиться работать с Parcel. В этом посте я расскажу об использовании Parcel, с Pug, Sass, Babel and PostCSS. С некоторыми сравнениями с Webpack, как наиболее популярным модулем. Итак, Webpack vs Parcel, начинаем!

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

Нулевая конфигурация: Webpack Vs Parcel

Webpack. Версия 4 — «нулевая конфигурация».

Да. Это нулевая конфигурация для двух вещей:

Вам больше не нужно указывать точку входа и выхода.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Его производственный режим включает в себя минимизацию, ввод диапазонов и tree-shaking.

Реально же для большинства проектов вам понадобится webpack.config.js.

Изменение: @TheLarkInn оставил ответ к этой статье и поправил меня относительно того, что означает нулевая конфигурация для Webpack:

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

Parcel

Parcel имеет встроенную поддержку для следующего:

CSS

SCSS

Babel

PostCSS

PostHTML

TypeScript

JSX для React и Preact

Минимизации

Development Server

Он не имеет встроенной поддержки для введения диапазонов и tree-shaking, но это будет реализовано в будущей версии. Parcel является победителем в конкурсе «Нулевая конфигурация».

Время сборки

Эта таблица, взятая с сайта Parcels, дает нам всю информацию.

Webpack vs Parcel: если вы когда-нибудь настраивали первый, то со вторым все по-другому!

Исходя из приложения разумных размеров, содержащего 1726 модулей, с 6.5M несжатых данных. Сборка осуществлялась на 2016 MacBook Pro с 4 физическими ядрами.

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

Использование Parcel: Посмотрите сами, насколько это просто

Я собираюсь рассмотреть настройку Parcel, используя Pug, Sass, Babel и автопрефиксинг через PostCSS. Когда я устанавливал Parcel в первый раз, я фактически закончил все менее, чем за 9 минут. Приступим

1 — Структура и файлы

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

Webpack vs Parcel: если вы когда-нибудь настраивали первый, то со вторым все по-другому!

Вам не обязательно полностью повторять эту структуру, это не требуется для Parcel. Стандартной практикой считается создание папки src, в которой вы пишете весь код. Отсюда он компилируется и / или преобразуется, а затем выводится в dist.

2 — Установка Parcel и Pug

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Вот и все. Parcel и все остальное настроено, за исключением автопрефиксера. Для него нужен файл .postcssrc. Вы можете продолжать прочтение статьи, отметив для себя тот факт, что нам фактически нужно было настраивать Parcel.

3 — Lorem Ipsum?

В файле index.pug добавьте:

Если вы выбрали другую структуру для организации файлов, измените пути. В _background.sass примените к body цвет фона. Я выбрал зеленый цвет, чтобы продемонстрировать, что Sass работает, как только загружается сервер разработки. Импортируйте _background.sass в main.sass. Чтобы обеспечить работу PostCSS и autoprefix, я добавил в main.sass следующее:

Для message.js я написал функцию, которая выводит на консоль строку, используя функцию со стрелкой ES6:

Для main.js импортируйте сообщение и используйте его:

Чтобы заставить автопрефиксер работать, нам нужно создать в корневом каталоге файл .postcssrc:

Это дает PostCSS знать, что мы хотим использовать плагин автопрефиксера. При использовании Parcel нам не нужен.babelrc для Babel. Если вам нужно что-то другое, кроме функций Babels по умолчанию, вам нужно будет создать это. По умолчанию Parcel компилирует код для 1% браузеров, доступных на данный момент.

4 — Скрипты

Parcel поставляется с режимом сборки. Он минимизирует JavaScript, HTML и CSS с помощью uglify-es, htmlnano и cssnano. Все преобразованные и скомпилированные файлы выводятся в dist в корневом каталоге.

Мы настроим два скрипта. Один из которых запускаеи Parcel и его сервер разработки. Другой для разработки в режиме сборки. Вставьте этот код в package.json:

5 — Готово!

Примените npm run start для первого использования Parcel. Это займет немного больше времени, чем обычно, так как это первый раз.

Сервер разработки откроет браузер по умолчанию. Первое, что вы должны заметить, это цвет фона. Это, конечно, означает, что Pug превратился в HTML, а Sass в CSS.

Теперь откройте консоль, вы увидите сообщение. Пока вы находитесь в инструментах разработчика, проверьте CSS. ::placeholder имеет префикс.

Просмотрите файл JavaScript и найдите var _message. Если этого нет в первом файле JavaScript, это должно быть во втором. По опыту, это, как правило, второй.

Если у вас все вышеперечисленные «условия» выполняются, поздравляю. Вы установили и настроили Parcel для работы с Pug, Sass, Babel и PostCSS.

Заключение

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

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

Мне нравится Webpack, мне просто не нравится настраивать его. В конце концов, это вопрос предпочтений. Я не буду возвращаться к Gulp или Webpack для будущих проектов, если только не придется. Что вы думаете? Вы попробуете Parcel или вас полностью удовлетворяет Webpack?

Автор: Ibrahim Butt

Источник: https://medium.com/

Редакция: Команда webformyself.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Курс по Webpack. Основы

Прямо сейчас посмотрите курс по Webpack!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree