Представьте, что существует инструмент для сборки, который можно использовать для проектов 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
1
module.exports = {
2
3
module: {
4
rules: [{
5
test: /\.scss$/,
6
use: [{
7
loader: "style-loader"
8
}, {
9
loader: "css-loader"
10
}, {
11
loader: "sass-loader"
12
}]
13
}]
14
}
15
};
Однако с Brunch все, что вам нужно сделать, это установить плагин Brunch SASS. Brunch будет сканировать ваш package.json при запуске сборки и, увидев, что вы установили плагин, позаботится об этом полностью.
Бранч вкусный тест
Чтобы увидеть, на что способен Brunch, я установил проект Vue.js, используя простой шаблон проекта Vue CLI webpack . После построения стандартного кода с Webpack я получаю это:
Теперь я перенесу этот проект в Brunch и попытаюсь воссоздать те же функции и процессы сборки, что и в Webpack, чтобы выделить все сходства и различия.
Не стесняйтесь загружать законченный код из этого репозитория и следуйте инструкциям.
Монтаж
Как и Webpack, лучше всего устанавливать Brunch глобально, чтобы Brunch CLI можно было запустить из любого места.
Оболочка
xxxxxxxxxx
1
$ npm i -g brunch
А также установить его локально:
Оболочка
xxxxxxxxxx
1
$ npm i --save-dev brunch
конфиг
Бранч имеет аналогичную декларативную конфигурацию для Webpack. Ниже приведена минимальная конфигурация для запуска Brunch. Все это в настоящее время будет делать это модуляризуете и сцепить любые файлы JavaScript в каталоге часов в выходной файл app.js .
бранч-config.js
JavaScript
xxxxxxxxxx
1
module.exports = {
2
files: {
3
javascripts: {
4
joinTo: 'app.js'
5
}
6
}
7
};
В отличие от Webpack, Brunch не требует файла ввода. Вместо этого у вас есть каталог для просмотра , и Brunch просто обработает каждый файл, если сможет.
Несмотря на потерянную возможность каламбура, каталог просмотра по умолчанию в Brunch — это app , а не src . Использование приложения в этом проекте позволит использовать преимущества минимальной конфигурации Brunch, поэтому я переместу туда все файлы проекта:
Оболочка
xxxxxxxxxx
1
$ mv src app
Сложение
После этого я могу запустить первую сборку:
Оболочка
xxxxxxxxxx
1
$ brunch build
Это приводит к этому приятно короткому выходному сообщению:
Оболочка
xxxxxxxxxx
1
14:32:19 - info: compiled main.js into app.js, copied logo.png in 466 ms
И создается новый общедоступный каталог, содержащий следующие файлы сборки:
Простой текст
xxxxxxxxxx
1
public
2
- app.js
3
- app.js.map
4
- logo.png
Файл сборки JavaScript
Изучая основной файл сборки JavaScript, public / app.js , первые 149 строк представляют собой загрузочный код Brunch, который будет в каждой сборке. После этого код из main.js , единственный файл JavaScript в папке просмотра:
JavaScript
xxxxxxxxxx
1
require.register("main.js", function(exports, require, module) {
2
import Vue from 'vue'
3
import App from './App.vue'
4
new Vue({
6
el: '#app',
7
render: h => h(App)
8
})
9
});
Бранч обернул main.js как модуль CommonJS. Однако он не импортировал Vue или App.vue и не дошел до ES5. Для этих задач нам понадобятся дополнительные плагины.
активы
Еще одно соглашение Brunch заключается в том, что любой каталог с именем assets будет рекурсивно копироваться в общую папку без какой-либо обработки, поэтому в выходных данных вы видите logo.png .
Brunch не загружает файлы изображений или шрифтов, как это делает Webpack, поэтому, вероятно, лучшим вариантом является копирование в выходную папку.
Плагины
Чтобы обработать файлы проекта, мне нужно добавить несколько плагинов в Brunch. Там есть код ES6, а также файл Vue, который включает SASS, поэтому я установлю соответствующие плагины для этих типов файлов:
Оболочка
xxxxxxxxxx
1
$ npm i --save-dev babel-brunch babel-preset-es2015 vue-brunch sass-brunch
Я также установил babel-preset-es2015, чтобы получить JavaScript для браузера. Мне нужно обновить файл .babelrc, чтобы указать на это, поскольку в Webpack есть более сложные средства для определения среды, для которой необходимо создать:
.babelrc
JSON
xxxxxxxxxx
1
{
2
"presets": [
3
[ "es2015" ]
4
]
5
}
Удивительно, но это все, что требуется. Когда я строю снова, я получаю этот вывод:
Оболочка
xxxxxxxxxx
1
15:05:57 - info: compiled 4 files into app.js, copied logo.png in 1.5 sec
Снова проверяя файл сборки public / app.js , кода становится намного больше. Это связано с тем, что Brunch перенес ES6 в main.js , нашел зависимость Vue и добавил ее, а также обработал и импортировал App.vue .
Как Brunch может сделать это без какой-либо конфигурации? Он видит эти плагины в зависимостях в package.json и просто регистрирует их с настройками по умолчанию.
Сервировочный бранч
Сейчас я собрал весь код проекта, так что пришло время зайти в браузер и посмотреть, что у меня есть.
Как и в Webpack, в Brunch есть встроенный сервер разработки, который я могу использовать для обслуживания проекта. Он также будет следить за любыми файлами на предмет изменений и автоматически создавать изменения (я бы добавил, очень быстро).
Однако перед тем, как запустить сервер, я перенесу index.html в каталог assets, чтобы он был скопирован в общую папку и также мог быть обслужен:
Оболочка
xxxxxxxxxx
1
$ mv index.html ./app/assets
Теперь я могу запустить сервер:
Оболочка
xxxxxxxxxx
1
$ brunch watch --server
И я вижу этот вывод терминала:
Оболочка
xxxxxxxxxx
1
15:16:40 - info: application started on http://localhost:3333/
2
15:16:40 - info: compiled 4 files into app.js, copied 2 in 1.7 sec
Вызов main.js
Когда я проверяю браузер, все, что я получаю, это пустой экран. Проблема в том, что поскольку не указан файл ввода, проект не запустится сразу, как вы ожидаете от Webpack. Входной файл должен быть вызван вручную.
Помните, что Brunch упаковывает все файлы в модули CommonJS в выводе следующим образом:
JavaScript
xxxxxxxxxx
1
require.register("main.js", function(exports, require, module) {
2
// Contents of main.js
3
}
Соглашение состоит в том, что модуль имеет имя по имени файла без расширения, поэтому main.js является просто main . Теперь мне нужно вызвать этот модуль в index.html после загрузки скрипта:
Приложение / активы / index.html
HTML
xxxxxxxxxx
1
<body>
2
<div id="app"></div>
3
<script type="text/javascript" src="/app.js"></script>
4
<script type="text/javascript">require('main');</script>
5
</body>
вя-бранч
Хорошо, почти там. Обновляя браузер снова, я получаю эту ошибку:
Оболочка
xxxxxxxxxx
1
Uncaught Error: Cannot find module 'vueify/lib/insert-css' from 'App.vue'
Это связано с тем, что API плагинов Brunch не так мощен, как Webpack, и чтобы иметь возможность встроить CSS во время выполнения, vue-brunch требует наличия модуля vueify-insert-css .
Это нужно будет импортировать в начало файла main.js :
JavaScript
xxxxxxxxxx
1
import 'vueify/lib/insert-css';
После этого у меня снова появилось работающее приложение Vue:
Варианты изготовления
Прежде чем я смогу сравнить подход Brunch с Webpack, я также должен установить некоторые производственные оптимизации, чтобы оба подхода давали одинаковый результат.
В Webpack есть опция конфигурации для автоматического отключения надоедливого сообщения о режиме разработки. Насколько я знаю, это не может быть сделано с Brunch, поэтому мне нужно добавить эту строку в main.js после импорта Vue:
main.js
JavaScript
xxxxxxxxxx
1
import Vue from 'vue';
2
Vue.config.productionTip = false;
Я также хочу улучшить файл сборки JavaScript, чтобы он был красивым и компактным. Я установлю brunch-uglify-jsдля этого:
Оболочка
xxxxxxxxxx
1
$ npm i --save-dev brunch-uglify-js
Как вы можете догадаться, дальнейшая настройка не требуется. Все, что мне нужно сделать, это добавить -p(производственный) переключатель к команде Brunch при сборке, и результат будет увеличен.
Оболочка
xxxxxxxxxx
1
$ brunch build -p
Проще простого!
сравнение
Теперь я успешно заменил функциональность сборки webpack-simple на Brunch. Давайте теперь сравним разницу в конфигурационных файлах.
Во-первых, Webpack:
webpack.config.js
JavaScript
xxxxxxxxxx
1
var path = require('path')
2
var webpack = require('webpack')
3
module.exports = {
5
entry: './src/main.js',
6
output: {
7
path: path.resolve(__dirname, './dist'),
8
publicPath: '/dist/',
9
filename: 'build.js'
10
},
11
module: {
12
rules: [
13
{
14
test: /\.vue$/,
15
loader: 'vue-loader',
16
options: {
17
loaders: {
18
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
19
// the "scss" and "sass" values for the lang attribute to the right configs here.
20
// other preprocessors should work out of the box, no loader config like this necessary.
21
'scss': 'vue-style-loader!css-loader!sass-loader',
22
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
23
}
24
// other vue-loader options go here
25
}
26
},
27
{
28
test: /\.js$/,
29
loader: 'babel-loader',
30
exclude: /node_modules/
31
}
32
]
33
},
34
resolve: {
35
alias: {
36
'vue$': 'vue/dist/vue.esm.js'
37
}
38
},
39
devServer: {
40
historyApiFallback: true,
41
noInfo: true
42
},
43
performance: {
44
hints: false
45
},
46
devtool: '#eval-source-map'
47
}
48
if (process.env.NODE_ENV === 'production') {
50
module.exports.devtool = '#source-map'
51
// http://vue-loader.vuejs.org/en/workflow/production.html
52
module.exports.plugins = (module.exports.plugins || []).concat([
53
new webpack.DefinePlugin({
54
'process.env': {
55
NODE_ENV: '"production"'
56
}
57
}),
58
new webpack.optimize.UglifyJsPlugin({
59
sourceMap: true,
60
compress: {
61
warnings: false
62
}
63
}),
64
new webpack.LoaderOptionsPlugin({
65
minimize: true
66
})
67
])
68
}
(Обратите внимание, что вышеупомянутое не имеет никакой file-loaderконфигурации, так как это не может быть выполнено в Позднем завтраке).
А теперь Бранч:
бранч-config.js
JavaScript
xxxxxxxxxx
1
module.exports = {
2
files: {
3
javascripts: {
4
joinTo: 'app.js'
5
}
6
}
7
};
Как видите, Brunch требует значительно меньше настроек, если вы следуете его соглашениям. Чтобы быть справедливым, с Brunch мне пришлось добавить две дополнительные строки кода в main.js и одну дополнительную строку в index.html, чтобы получить эквивалентную функциональность.
Ориентиры
А как насчет размера и производительности? Сравнение производственной сборки из обоих инструментов:
Удивительно, но Brunch имеет меньший размер пакета и компилируется более чем в 3 раза быстрее, чем Webpack.
Заключение
Я думаю, что Brunch - отличный выбор для простых проектов Vue. Это не только проще в настройке, но и быстрее, и для этого случая использования предоставляет меньший пакетный файл.
Однако это не означает, что Brunch универсально лучше, чем Webpack для проектов Vue.js. Brunch не может сделать много вещей , например, динамический импорт, который необходим для построения PWA.
Дело в том, что хотя Webpack определенно имеет свое место, Brunch также должен.
Приготовь свой бранч
Как и в случае с Vue CLI, вы можете создавать скелеты проекта Brunch. Я рекомендую вам сначала попробовать brunch-vue-barebones, что очень похоже на то, что я настроил.
Вам также следует ознакомиться с документацией по бранчу или этим замечательным руководством для сообщества, чтобы узнать больше пищи и, конечно же, больше бранчей.
Приятного аппетита!