Menu

First Steps into Babel

April 13, 2017 - javascript

Source

Install Packages

sudo npm install --save-dev babel-cli babel-preset-env

Installation for gulp

sudo npm install --save-dev gulp
sudo npm install --save-dev gulp-babel
sudo npm install --save-dev gulp-sourcemaps
sudo npm install --save-dev gulp-concat

Add to gulpfile.js

var gulp = require("gulp");
var babel = require("gulp-babel");
var sourcemaps = require("gulp-sourcemaps");
var concat = require("gulp-concat");

gulp.task("default", function () {
  return gulp.src("src/**/*.js")
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(concat("all.js"))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("dist"));
});

Create file .babelrc in the project folder

Add to .babelrc:

{
    "presets": ["env"]
}

Create a file with ES6 code

Sample code in babel.js:

[1, 2, 3].map(n => n ** 2);

Run Default Gulp Task

gulp 

See the Transpiled Code

Open file /dist/all.js

"use strict";

[1, 2, 3].map(function (n) {
  return Math.pow(n, 2);
});
//# sourceMappingURL=all.js.map
Tags: , , ,