CODEWITHSUNDEEP
javascriptecmascript-6babeljs
07_05_GuyT
07_05_GuyT

Reputation: 2887

Transform ES5 code to ES6 at runtime

There is an option to use babel API to transform javascript code from ecma script 5 to ecma script 6? I mean lets say I use the following cdn

https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js

and provide a source like array or object with simple code of ES5 and it transform it to some array/object/string of ES6 code?

is it possible somehow to achieve this with babel or some other tool?

I mean to use some example from here for instance.. https://github.com/addyosmani/es6-equivalents-in-es5

if I put in source ES5 Code

[1, 2, 3].map(function(n) { return n * 2; }, this);

It converted to arrow function in ES6

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

UPDATE

What I need is actually is to take ES5 code and change it to ES6 code, it can be via api

For example is I need API/open source that do something like this (my code is in the left side )

Link for example

Upvotes: 21

Views: 6781

Answers (4)

Hugeen
Hugeen

Reputation: 1330

The best idea is to go into the source code of Lebab

Open bin/file.js. Read all the lines to understand that script.

The interesting part is the following:

  var transformer = new Transformer({transformers: transformers});
  transformer.readFile(file[0]);
  transformer.applyTransformations();
  transformer.writeFile(program.outFile);

More specificaly transformer.applyTransformations();

Let's open /src/transformer.js

In this file I see some usefull functions :

  /**
   * Prepare an abstract syntax tree for given code in string
   *
   * @param string
   */
  read(string) {

    this.ast = astGenerator.read(string, this.options);

  }

So you can use the transformer with a string of code (not a file)

Now you can apply the transformations "ES5 to ES6"

  /**
   * Apply All transformations
   */
  applyTransformations() {

    for (let i = 0; i < this.transformations.length; i++) {
      let transformation = this.transformations[i];
      this.applyTransformation(transformation);

    }

And then, recast it into string

  out() {
    let result = recast.print(this.ast).code;

    if(this.options.formatter) {
      result = formatter.format(result, this.options.formatter);
    }

    return result;
  }

Summary

var transformer = new Transformer({});
transformer.read('var mySourceCode = "in ES5"');
transformer.applyTransformations();
console.log(transformer.out());

JSFiddle demo here

If you don't want all transformations, you can choose what you want with options:

var transformers = {
  classes: false,
  stringTemplates: false,
  arrowFunctions: true,
  let: false,
  defaultArguments: false,
  objectMethods: false,
  objectShorthands: false,
  noStrict: false,
  importCommonjs: false,
  exportCommonjs: false,
};

var transformer = new Transformer({transformers: transformers});

JSFiddle demo with options

Upvotes: 9

SilverSurfer
SilverSurfer

Reputation: 4368

For people who just want convert their ES5 code to ES6 online. Use Lebab live demo, just paste your code and it will be converted to ES6.

Upvotes: 0

Jerome WAGNER
Jerome WAGNER

Reputation: 22422

Are you looking for ES5 to ES6 or ES6 to ES5 ? Your jsfiddle has an ES6 source.

I'd recommend looking into the babel-standalone project on https://github.com/Daniel15/babel-standalone

I modified your jsfiddle to transform code with the ES2015 preset it that is what you are looking for: https://jsfiddle.net/bdrg01Lg/

it is as simple as

var input = 'const getMessage = () => "Hello World";';
var output = Babel.transform(input, { presets: ['es2015'] }).code;

Upvotes: 0

Krzysztof Sztompka
Krzysztof Sztompka

Reputation: 7204

To change ES5 to ES6 you can use this https://www.npmjs.com/package/xto6

You have to install it 

npm install -g xto6

And then just: 

xto6 es5.js -o es6.js

There is also gulp plugin https://www.npmjs.com/package/gulp-xto6:

var gulp = require('gulp');
var xto6 = require('gulp-xto6');

gulp.task('default', function () {
  return gulp.src('path/to/fixtures/es5/*.js')
    .pipe(xto6())
    .pipe(gulp.dest('path/to/fixtures/es6/'));
});

Upvotes: 5

Related Questions