Статьи

Vue.js + Brunch: альтернатива Webpack, для которой вы голодны

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

Бранч это инструмент. В этой статье я покажу вам, как невероятно легко настроить проект Vue.js + Brunch, осветить некоторые плюсы и минусы Brunch и подать несколько вкусных бранчей по пути.

Чтобы подогреть аппетит, взгляните на это параллельное сравнение конфигурации Webpack и конфигурации Brunch для того же простого проекта Vue.js:

бранч против конфигурации вебпака

Вебпак против бранча

Webpack Blues

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

Тем не менее, для новых разработчиков или тех, кто работает над менее амбициозными проектами, Webpack в основном является барьером. Для проектов Vue.js пользователи считают, что им следует либо выбрать разработку в среде lo-fi ES5 без таких классных функций, как однофайловые компоненты, либо разрабатывать в очень сложной среде, тратя столько же времени на настройку сборки, сколько на разработку приложений. ,

Освободить место для бранча

Бранч существует с 2012 года, и хотя он является стандартным инструментом для сборки платформы Phoenix Elixir, он все еще удивительно неясен. Тем не менее, у него есть специальная группа пользователей, которые любят его за его основную философию «простоты и скорости», с которой пользователи Vue.js могут идентифицировать себя.

Несмотря на свою неясность, существует почти 80 плагинов, созданных сообществом для большинства мыслимых автоматизаций, таких как перенос, линтирование, оптимизация и т. Д. Brunch может делать большинство вещей, которые вам понадобятся и в проекте Vue: заключать файлы в модули, объединять их в сборка файлов, компиляция файлов Vue, транспортировка JS и SASS и т. д.

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


Вам также может понравиться:
Грязный трюк с веб-пакетом, который уменьшил наш пакет в сжатом виде на 55 КБ .

Соглашение по конфигурации

Отличительной особенностью Brunch является то, что он самоуверенный и предпочитает соглашения по конфигурации. Если вы хотите структурировать свой проект по принципу «Brunch way» и довольны стандартными настройками большинства плагинов, вам может понадобиться всего несколько строк конфигурации для удивительно сложной сборки.

Возьмите пример с прекомпиляцией SASS . В Webpack каждый проект должен объявлять загрузчики для типа файла, который будет обрабатываться. Типичная конфигурация SASS будет такой:

webpack.config.js


JavaScript