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

Webpack

Links And Demos

#Babel
FoundationPress gulp config with Babel

Babel song

#webpack

Webpack documentation

Webpack discussion on github

Complete Intro to React webpack config

React redux blog
ES6 Todo mvc webpack course

(Vanilla js todomvc)

Webpack 4 version

Eject from create react app

Vue-CLI

webpack bits: Getting the most out of the CommonsChunkPlugin()

Made with Slides.com