Javascript Tooling

One definitive answer (of many) for building javascript apps. Plausible recommendations and rationale, if you're just starting out (as of April 2018): use babel, webpack, & gulp. Wiki's current tools are equally plausible: coffeescript, browserify, & grunt. Related reading also recommend the yarn and webpack combination. blog

# The Short Answer It is easy to decide which tools you need: * Small projects can get away with just an ES6 compiler * Single Page Apps need a module bundler too * Once your app is in production, use a task runner to automate anything else And here are the packages which fulfill these requirements: * For compiling and polyfilling ES6, use Babel * For bundling your JavaScript files and dependencies into static assets, use Webpack * If your have other tasks like renaming files to avoid caching or publishing to the web, automate them with Gulp

# Why Babel, Webpack, & Gulp?

Babel transforms ES6 to ES5. It also allows custom transforms – and the community has created a lot of them. In particular, Babel has transforms for ES7 features like async/await and decorators. It also transforms your React JSX.

There are two module bundling tools which dominate the landscape: Browserify and Webpack. Browserify teaches browser-based apps to pretend to be node modules. Webpack is more generalized browser app dependency packaging.

Both have scary example configurations in the wild. The author prefers his own terse webpack config.

There are two task runners which dominate: Grunt and Gulp. Grunt uses a declarative json configuration and more complicated plugins. Gulp plugins are just javascript functions, and Gulp knows about streams and promises.


Wiki's matrix chat brought my attention to Polymer. Although `polymer` is it's own command-line application too, the example used `bower`. Bower's website says "we're still here, but use `yarn` and `webpack` for new projects."

This pretty much characterizes my experience with Javascript ecosystem for the past decade.

Everyone has their own build tools. There's many ways to write modules. There's many ways to do promises. There's server-side vs browser-side cultural differences. Many different test languages.

I guess this is also true of any large programming ecosystem. It's hard to get started on projects when there are so many choices to make before you can even get started.