And why you should care

Yall should really learn this stuff

  • Don’t (just) complain
  • There’s no (just) vanilla JavaScript
  • If you’re writing modern Node/JS in any sort of practical application, you’ll almost certainly be using NPM/Yarn and babel.
  • If you’re shipping UI’s you should be using Webpack (or thinking about it)


  • NPM

  • Yarn

  • Babel

  • Webpack


  • A company
  • A dependency manager
  • A package registry
  • A command line interface (CLI) for interacting with said package registry
  • A lifestyle

NPM Scripts

  • NPM scripts are aliases for bash commands that go in you package.json file and run against the project’s node-modules directory
  • This is how we expose our build, test, lint, etc. scripts regardless of what tools we’re using.

“scripts”:   {

      “build”: “webpack -p”,

      “start”: “node ./index.js”



Yarn is a drop in replacement for the NPM CLI.

It provides an alternative API to interact with the NPM package Registry and run NPM scripts


But y tho?

  • NPM was dragging their feet on some much needed features (deterministic dependency resolution) so Facebook came to the table with an alternative NPM CLI that provided them - along with better performance and a cleaner syntax.
  • NPM caught up in version 5 but by then everyone was using Yarn. Oops.


  • Babel is a “compiler” for JavaScript
  • It does absolutely nothing
  • (Until you add some presets)
  • Browsers and ES runtimes can’t always understand certain things like es6 and JSX (React)
  • Babel takes that stuff and turns it in to universal es5 code

“At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into one or more bundles.”


Links And Demos

Made with