От автора: и как все же научиться работать с Parcel. В этом посте я расскажу об использовании Parcel, с Pug, Sass, Babel and PostCSS. С некоторыми сравнениями с Webpack, как наиболее популярным модулем. Итак, Webpack vs Parcel, начинаем!
Проблема с Webpack — это его конфигурация. Это кошмар. И я не знаю, как вам, но мне не нравятся кошмары. Я предпочитаю делать все просто, и не сходить с ума в процессе.
Нулевая конфигурация: Webpack Vs Parcel
Webpack. Версия 4 — «нулевая конфигурация».
Да. Это нулевая конфигурация для двух вещей:
Вам больше не нужно указывать точку входа и выхода.
Его производственный режим включает в себя минимизацию, ввод диапазонов и 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, дает нам всю информацию.
Исходя из приложения разумных размеров, содержащего 1726 модулей, с 6.5M несжатых данных. Сборка осуществлялась на 2016 MacBook Pro с 4 физическими ядрами.
В Webpack 4 также используется кэш, который помогает ускорить сборку, но он еще не полностью реализован.
Использование Parcel: Посмотрите сами, насколько это просто
Я собираюсь рассмотреть настройку Parcel, используя Pug, Sass, Babel и автопрефиксинг через PostCSS. Когда я устанавливал Parcel в первый раз, я фактически закончил все менее, чем за 9 минут. Приступим
1 — Структура и файлы
Создайте новую папку, которая будет использоваться в качестве корневого каталога. Внутри этой папки создайте другие папки и несколько файлов:
Вам не обязательно полностью повторять эту структуру, это не требуется для Parcel. Стандартной практикой считается создание папки src, в которой вы пишете весь код. Отсюда он компилируется и / или преобразуется, а затем выводится в dist.
2 — Установка Parcel и Pug
Выполните следующую команду в корневом каталоге:
npm init -y && npm install --save-dev parcel-bundler parcel-plugin-pug
Вот и все. Parcel и все остальное настроено, за исключением автопрефиксера. Для него нужен файл .postcssrc. Вы можете продолжать прочтение статьи, отметив для себя тот факт, что нам фактически нужно было настраивать Parcel.
3 — Lorem Ipsum?
В файле index.pug добавьте:
<!DOCTYPE html> html(lang="en") head link(rel="stylesheet", href="../sass/main.sass") body script(src="../js/main.js")
Если вы выбрали другую структуру для организации файлов, измените пути. В _background.sass примените к body цвет фона. Я выбрал зеленый цвет, чтобы продемонстрировать, что Sass работает, как только загружается сервер разработки. Импортируйте _background.sass в main.sass. Чтобы обеспечить работу PostCSS и autoprefix, я добавил в main.sass следующее:
::placeholder color: grey
Для message.js я написал функцию, которая выводит на консоль строку, используя функцию со стрелкой ES6:
export default (message) => { console.log(message);
};
Для main.js импортируйте сообщение и используйте его:
import message from "./message";
message('Hello World!');
Чтобы заставить автопрефиксер работать, нам нужно создать в корневом каталоге файл .postcssrc:
{ "plugins": { "autoprefixer": true }
}
Это дает PostCSS знать, что мы хотим использовать плагин автопрефиксера. При использовании Parcel нам не нужен.babelrc для Babel. Если вам нужно что-то другое, кроме функций Babels по умолчанию, вам нужно будет создать это. По умолчанию Parcel компилирует код для 1% браузеров, доступных на данный момент.
4 — Скрипты
Parcel поставляется с режимом сборки. Он минимизирует JavaScript, HTML и CSS с помощью uglify-es, htmlnano и cssnano. Все преобразованные и скомпилированные файлы выводятся в dist в корневом каталоге.
Мы настроим два скрипта. Один из которых запускаеи Parcel и его сервер разработки. Другой для разработки в режиме сборки. Вставьте этот код в package.json:
"scripts": { "start": "parcel src/pug/index.pug --open", "build": "parcel build src/pug/index.pug"
}
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.