> For the complete documentation index, see [llms.txt](https://hemantajax-2.gitbook.io/es6-in-depth/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hemantajax-2.gitbook.io/es6-in-depth/installation.md).

# 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
```

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

// npm run build:js
```

## Babel with gulp

```
npm i gulp gulp-babel -D
```

```javascript
//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
```

```javascript
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
```