# Build Tools
Modern web applications are often a mix of custom written modules and third party packages, written in various versions of languages, most of which not supported by older browsers.
To be used in both browser and sometimes in server context, the application needs to be transformed by a various tools like Babel, PostCSS, Sass, Typescript to name a few. Their number can vary widely depending on the applied technologies in the project.
Configuring all these tools, making them work across operating systems, and more importantly between each other is not a simple task. Luckily there are tools that ease this process, most of which are abstractions on top of other tools, making configuration and setup even simpler.
Below are some of the more popular ones, used by the Vue community to build both web applications and libraries.
# Vue CLI popular
Vue CLI is a sophisticated mix of tools for building modern Vue.js applications. Its the official Vue.js build tool, who's purpose is to free developers from having to configure complex build processes and instead focus on writing application code. It offers a quick and interactive project scaffolding with custom presets, with painless upgrade to the build process with future updates.
Developers can leverage features like ESLint, Babel, Unit and End-to-end Testing, PWA support, Instant Prototyping, HMR and more. It comes with a rich and extensive API, with an ever growing list of plugins, further extending its functionality.
Vue CLI built on top of Webpack, making it ideal for large and complex web applications. Building libraries with it is possible, but may lead to bigger bundles, compared to a tool like Rollup.
- Interactive project scaffolding
- Full Graphic User Interface for managing Vue projects
- Support for Typescript, Sass, Less, Stylus preprocessing.
- ESLint and Babel pre-configured
- Unit and End-to-end testing out of the box
- Rich api, offering great extendability
- Rich collection of both official and third party plugins, integrating first class tools.
Poi is bundler alternative to Vue CLI, that is also built on top of Webpack. It tries to make development and bundling applications with Webpack as easy as possible by providing a pre-configured environment for building web apps.
As with Vue CLI, Poi leans more towards building applications than libraries.
- Out of box support for JS, CSS, File assets and more.
- Framework-agnostic, with support for JSX, Vue and more with no configs.
- Great extensibility via configuration api.
- Fits most web apps and npm libraries.
- Great development experience.
- Plugin support for maximum extendability.
Its zero-config strategy, applies sensible defaults for the most popular use cases, allowing library authors to focus on developing their packages, and not the build process.
The tool offers both a command line and Node.js API, so developers are free to choose depending on their needs. It has built in ES2015+ transpilation via Buble and Babel, Typescript support, style extraction with pre and post processing for Sass, Less and Stylus along support for CSS Modules.
- Fast, zero-config by default.
- Using Rollup under the hood.
- Automatically transforms JS files using Buble/Babel/TypeScript.
- Built-in support for CSS Sass Stylus Less CSS modules.
- Ridiculously easy to use Rollup plugins if you want.
- Friendly error logging experience.
- Written in TypeScript, automatically generated API docs.
Bundlers are complex tools that take both small and large applications, often made out of multiple packages and sub modules, transform them into a format, that is ready to work in the Browser, Node.js or both.
Depending on the intended use case, each bundler has its strengths and weaknesses, which we will outline in the list below.
- Official Webpack Docs
- Webpack Academy Freemium
Rollup has both a command line and Node.js based API, Babel and Buble support, Tree-Shaking (removes unused code), a big list of configuration options, most of which have defaults that are suitable for the majority of libraries.
This is a tool, similar to Webpack as it can handle all kinds of file types, building a dependency graph between all of them, returning one or more application bundles. Where it shines is its zero config approach and sheer speed, which were very noticeable in Webpack 3 and below. Webpack 4 offers a similar simplified configuration and major speed improvements.
Is a minimalistic asset build tool, which boasts a near zero-config build process. It offers good build speeds, plugin support, live reloading and project scaffolding via official and community written skeletons.
Brunch was made to replace task runners like Gulp or Grunt, before Webpack and Rollup had gained so much traction.