Installation

https://babeljs.io/

Typecript vs Babel

Typescript	Babel
Language- Typed superset of js	Not a language
Also can be used as transpiler	Transpiler
Less spec complaint	Spec complaint

Prerequisites

• Node JS

Quick Tip

To see all global installed node packages...

npm ls -global --depth 0

Install Babel

// global install
npm i babel-cli -g
babel --version

// local install
npm i babel-cli -D
node_modules/.bin/babel --version
npm i babel-preset-es2015 -D

Trnspilation form terminal

babel src --preset es2015 --out-dir build
babel src --preset es2015 -d build // same as above

// bundling
babel src --preset es2015 --out-file build/bundle.js
babel src --preset es2015 --out-file build/bundle.js -s // '-s' enable sourcemap
babel src --preset es2015 --out-file build/bundle.js -s -w // '-w' watch changes

Stage 0 ( all in one babel package )

npm install babel-preset-stage-0
// .babelrc
"presets": ["stage-0"]

Move plugin configuration to .babelrc

// .babelrc
{
    "presets": ["es2015", ""stage-0""],
    "sourceMaps": true
}

Quick Tip

// npm shotcut commands
npm test
npm start
npm stop
npm restart

// run custom commands
npm run demo

npm run demo

// package.json
{
    "scripts": {
        "demo": "babel --version"
    }
}

npm run demo

Note

Fully qualified path not required, npm knows node_modules/.bin/babel

Babel with Npm Scripts

npm i babel-cli -D
npm i  babel-preset-es2015  babel-preset-stage-0 -D

{
    "scripts": {
        "build:js": "babel public/src --out-dir public/build"
    }
}

// npm run build:js

Babel with gulp

npm i gulp gulp-babel -D

//gulpfile.js
var gulp =require("gulp");
var babel =require("gulp-babel");

gulp.task("default", function(){
    return gulp.src("public/src/**/*.js")
            .pipe(babel())
            .dest("public/build");
});

Babel with webpack

npm i webpack -D
npm install babel-loader babel-core babel-preset-es2015 babel-preset-stage-0 -D

module.exports = {
    entry: './public/src/main.js',
    output: {
        path: 'public/webpackbuild',
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'stage-0']
            }
        }]
    }
}

Babel with browserify

npm i browserify -g
npm i browserify -D
npm i babelify -D

browserify --entry public/src/main.js --outfile public/build/browserifybundle.js

// using with babel '-t' (transfarmer)
browserify --entry public/src/main.js --outfile public/build/browserifybundle.js -t babelify