Day 1, Segment 2, Part 2, branch v2-3

In notebook:
FrontEndMasters React Intro 2
Created at:
2016-12-21
Updated:
2016-12-22
Tags:
Webpack libraries JavaScript React

Babel

Written by an Australian high school kid! It was called 5to6 originally. 
Compiles future JavaScript to ES5 that runs on current devices, like mobile Safari. 

They taken over the project and added extra functionalities to convert one type of code to another type of code. So es6 to es5 is just one plugin. 
It also transpiles JSX. JSX is not part of the JavaScript language. 
You can also create your own macros. It's not very complicated to write your own plugins. 

Babel extremely well tested (by very big companies).

Configuring Babel

Babel doesn't come with any configuration on its own. Creates .babelrc JSON file.
  // ****   .babelrc    ****

{
  "presets": [
    "react",
    ["es2015", {"modules": false, "loose": true}]
  ]
}
Presets and plugins
Presets are just a group of plugins. 
So ​es2015​ is a preset that includes many plugins ie. for ​let​, generators, etc.

This preset is not OK for production (adds too much extra stuff). For example the generator polyfill is 50Kb by itself. 

The ​react​ preset is for JSX. Can be used for production. 

If you add an array (line #6) then it's a configuration object. 
​modules: false​ : do not transform the es6 module statements (imports). This is specifically for Webpack. We want Webpack (2) to take care of the modules because it can do tree shaking (live code inclusion).
 
44:50

​"loose": true​ : do not adhere 100% to the JavaScript specs and save a lot of space. Edge cases that you will never hit. 

Webpack does include uglify. Uglify is the one that will remove the dead code. 

​$ webpack --module-bind='js-babel' js/ClientApp public/bundle.js​

This tells webpack to run through Babel all js files it comes across. 
Loaders
It's a middle transform in Webpack to run through the code to get additional functionalities. 

50:40

Config file for Webpack

webpack.config.js
  // ****   webpack.config.js   ****

// node module to help you resolve paths
// this will run in Node, so commonJs syntax
const path = require('path')

module.exports = {
  // __dirname : root dir
  context: __dirname,
  // start here
  entry: './js/ClientApp.js',
  // debugging tool, source maps (longer)
  // devtool: 'source-map'
  // eval is faster, dirtier
  // don't include for production
  devtool: 'eval',
  output: {
    path: path.join(__dirname, '/public'),
    filename: 'bundle.js'
  },
  resolve: {
    // list of filenames it will go through
    // in imports where extension is not defined in the code
    // eg "import Blah from './Blah'" ← no extension
    // first starts with no extension
    extensions: ['.js', '.json']
  },
  stats: {
    colors: true,
    reasons: true,
    // report on chunk data (will explain later)
    chunks: true
  },
  // the most important thing:
  // all the transforms you want to apply
  module: {
    // done by a series of rules
    rules: [
      {
        // if it passes this rule:
        // can be a regex or function
        test: /\.js$/,
        // then apply this transformation:
        loader: 'babel-loader'
      }
    ]
  }
}

Comparison with Grunt and Gulp

Grunt and Gulp are task runners. Webpack, Rollup, Browserify are bundlers and are (can be) part of a Grunt/Gulp task list.

Running Webpack

​$ webpack​ 

Webpack will find automatically the config file.