NPM, YARN, BABEL, & WEBPACK

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)

Not JUST NEW HOTNESS

NPM
Yarn
Babel
Webpack

NPM

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

npmjs.com

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

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

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

babeljs.io

“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.”

webpack.js.org