如果你正在寻找一个Webpack的替代构建工具，可以让你更少的代码（和一些伟大的brunch双语）阅读！
想象一下，如果有一个构建工具可以用于比Webpack编译速度更快的Vue.js项目，那么给你一个更小的bundle大小，只需要几行配置。
brunch就是这个工具。在本文中，我将向您展示如何设置Vue.js + Brunch项目，介绍Brunch的一些优缺点，并在途中提供一些美味的brunch。
为了激起你的胃口，请看看这个简单的Vue.js项目的Webpack配置和Brunch配置的并行比较：
注意：这篇文章最初是在2017/08/20的Vue.js Developers博客上发布的
Webpack BluesWebpack是构建复杂，高度优化的Web应用程序的重要工具，受到许多有影响力的Web开发人员的鼓励。
然而，对于较新的开发人员或那些从事不那么雄心勃勃的项目的人来说，Webpack大多是作为障碍出现的。对于Vue.js项目，用户觉得他们必须选择在低保真ES5环境中开发，而不需要像单文件组件这样的酷功能，或者在高度复杂的环境中开发，在构建配置上花费的时间与在应用程序开发上花费的时间。
为brunch腾出空间Brunch早在2012年就已经出现，虽然它是Phoenix Elixir框架的默认构建工具，但它仍然令人惊讶地模糊。也就是说，它拥有一群热衷于“简单和快速”的核心理念的用户群，这是Vue.js用户可以认同的。
尽管模糊不清，但对于大多数可以想象的自动化来说，几乎有80个社区制作的插件，例如transpiling，linting，optimize等等。Brunch可以完成Vue项目中大部分需要的事情：将文件作为模块包装，并将它们连接成编译Vue文件，编译JS和SASS等。
明确的说，Brunch并不像Webpack那样功能全面，而且有一定的局限性。例如，Brunch尚不支持动态导入，并且不处理图像和字体。
约定通过配置brunch的一个明确的特点是它是自以为是，并赞成约定而不是配置。如果您愿意将您的项目构建为“brunch方式”，并且您对大多数插件的标准设置感到满意，那么您可能只需要少量几行配置即可完成令人惊讶的复杂构建。
以预编译SASS为例。使用Webpack，每个项目都必须声明将要处理的文件类型的加载器。典型的SASS配置是这样的：
webpack.config.js
module.exports = { ... module: { rules: [{ test: /\.scss$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" }] }] }};但是，使用brunch，您只需安装brunch SASS插件即可。brunch会扫描你的package.json，当一个构建被触发，并且，看到你已经安装了插件，将完全照顾它。
brunch口味测试想知道Brunch可以做什么，我已经使用Vue CLI webpack-simple项目模板安装了一个Vue.js项目。在用Webpack构建样板代码后，我得到这个：
我现在将这个项目迁移到Brunch，并尝试重新创建与Webpack相同的构建特性和过程，以突出显示任何相似性和差异。
随意从这个回购下载完成的代码，并按照。
安装和Webpack一样，最好在全局安装Brunch，这样Brunch CLI可以从任何地方运行。
$ npm i -g brunch并且在本地安装：
$ npm i --save-dev brunch配置Brunch有一个类似于Webpack的声明式配置。以下是让Brunch运行的最小配置。目前，所有它的作用就是模块化，并在表目录中的任何JavaScript文件串接到输出文件app.js。
早午餐config.js
module.exports = { files: { javascripts: { joinTo: 'app.js' } }};与Webpack不同，Brunch不需要输入文件。你有一个监视目录，如果可能的话，Brunch会简单地处理每个文件。
尽管失去了双赢的机会，Brunch中的默认监视目录是app，而不是src。在这个项目中使用应用程序将利用Brunch的最小配置，所以我将把所有的项目文件移动到那里：
$ mv src app建立完成后，我可以运行第一个构建：
$ brunch build这导致这个令人愉快的简短的输出消息：
14:32:19 - info: compiled main.js into app.js, copied logo.png in 466 ms并创建一个新的公共目录，其中包含以下构建文件：
public - app.js - app.js.map - logo.pngJavaScript构建文件检查主要的JavaScript构建文件public / app.js，前149行是Brunch引导代码，将在每个构建中。之后是来自main.js的代码，watch文件夹中唯一的JavaScript文件：
require.register("main.js", function(exports, require, module) { import Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', render: h => h(App) })});brunch已经将main.js包装为CommonJS模块。它没有导入Vue或App.vue，但没有转换到ES5。我们需要一些额外的插件来完成这些任务。
资产Brunch的另一个约定是，任何名为资产的目录都将被递归复制到公共文件夹中，而不需要任何处理，这就是为什么您在输出中看到了logo.png的原因。
早午餐不像Webpack那样加载图像或字体文件，所以复制到输出文件夹可能是最好的选择。
插件为了处理项目文件，我需要添加一些插件到Brunch。有ES6代码以及Vue文件，其中包括SASS，所以我会为这些文件类型安装适当的插件：
$ npm i --save-dev babel-brunch babel-preset-es2015 vue-brunch sass-brunch我还安装了babel-preset-es2015，以便使用浏览器友好的JavaScript。我需要更新.babelrc文件来表明这一点，因为Webpack有一个更复杂的方法来知道为什么构建环境：
.babelrc
{ "presets": [ [ "es2015" ] ]}令人惊讶的是，所有这些都是必需的。当我再次建立我得到这个输出：
15:05:57 - info: compiled 4 files into app.js, copied logo.png in 1.5 sec再次检查构建文件public / app.js，有更多的代码。这是因为Brunch在main.js中编译了ES6 ，发现了Vue的依赖，并添加了这个，并且还处理并导入了App.vue。
Brunch如何做到这一点没有任何配置？它在package.json的依赖中看到了这些插件，只是用默认设置注册它们。
服务brunch我已经建立了所有的项目代码，所以现在是时候去浏览器，看看我有什么。
像Webpack一样，Brunch有一个内置的开发服务器，可以用来为项目提供服务。它也将观察任何文件的变化，并自动建立变化（也可以非常快，我可以添加）。
在我运行服务器，不过，我会移动的index.html的资产 ，因此被复制到该目录中的公共文件夹，可作为良好：
$ mv index.html ./app/assets我现在可以运行服务器：
$ brunch watch --server我看到这个终端输出：
15:16:40 - info: application started on http://localhost:3333/15:16:40 - info: compiled 4 files into app.js, copied 2 in 1.7 sec调用main.js当我检查浏览器，但是，我得到的只是一个空白的屏幕。问题在于，由于没有指定条目文件，因此项目不会像Webpack那样运行。入口文件必须手动调用。
请记住，Brunch将所有文件包装到输出中的CommonJS模块中，如下所示：
require.register("main.js", function(exports, require, module) { // Contents of main.js}惯例是该模块是通过文件名减去扩展名来命名的，所以main.js只是主要的。脚本下载后，我需要在index.html中调用该模块：
app/assets/index.html
<body> <div id="app"></div> <script type="text/javascript" src="/app.js"></script> <script type="text/javascript">require('main');</script></body>vue-brunch好吧，几乎在那里。刷新浏览器，我得到这个错误：
Uncaught Error: Cannot find module 'vueify/lib/insert-css' from 'App.vue'这是因为Brunch插件API不像Webpack那么强大，并且能够在运行时内联CSS，所以vue-brunch需要vueify-insert-css模块可用。
这将需要在main.js的顶部导入：
import 'vueify/lib/insert-css';完成之后，我又一次发挥了Vue的功能：
然而，在我将Brunch的方法与Webpack进行比较之前，我还需要设置一些生产优化来确保两种方法都能生成相同的输出。
Webpack有一个配置选项来自动关闭烦人的开发模式消息。据我所知，Brunch无法做到这一点，所以在导入Vue之后，我不得不将这一行添加到main.js中：
main.js
import Vue from 'vue';Vue.config.productionTip = false;我也想uglify JavaScript构建文件，所以它很好，紧凑。我会brunch-uglify-js为此安装：
$ npm i --save -dev brunch-uglify-js正如你所猜测的，不需要进一步的配置。我所要做的只是在生成时将-p（生产）开关添加到Brunch命令，并且输出将被忽略。
$ brunch build -p易如反掌！
对照我现在已经用Brunch 成功地取代了webpack-simple的构建功能。现在我们来比较一下配置文件的差异。
首先，Webpack：
webpack.config.js
var path = require('path')var webpack = require('webpack')module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { // Since sass-loader (weirdly) has SCSS as its default parse mode, we map // the "scss" and "sass" values for the lang attribute to the right configs here. // other preprocessors should work out of the box, no loader config like this necessary. 'scss': 'vue-style-loader!css-loader!sass-loader', 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' } // other vue-loader options go here } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] }, resolve: { alias: { 'vue: 'vue/dist/vue.esm.js' } }, devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, devtool: '#eval-source-map'}if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ])}（请注意，以上没有file-loader配置，因为在brunch中无法完成）。
而现在，brunch：
brunch config.js
module.exports = { files: { javascripts: { joinTo: 'app.js' } }};正如你所看到的，如果按照其惯例，Brunch需要的配置少得多。公平地说，在Brunch中，我不得不在main.js中添加两行代码，并在index.html中增加一行以获得等效的功能。
基准那尺寸和性能呢？比较两种工具的生产版本：
令人惊讶的是，brunch的捆绑规模较小，编译速度比Webpack快3倍以上。
结论我认为brunch是简单的VUE项目的一个很好的选择。这不仅更容易设置，而且速度更快，而且对于这个用例，提供了一个更小的包文件。
但是，这并不意味着Brunch普遍比Webpack for Vue.js项目更好。brunch不能做的事情有很多，例如，动态进口，这对于建立PWA是必不可少的。
重点是虽然Webpack确实有它的地位，Brunch也应该如此。
做自己的brunch就像使用Vue CLI一样，您可以创建Brunch项目骨架。我建议你先尝试一下brunch-vue-barebones，它与我设置的非常相似。
