Transform ES5 code to ES6 at runtime

Question

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

@Hugeen - yes but I need the code/API which is convert it ... — 07_05_GuyT
– 07_05_GuyT, Commented Jan 29, 2016 at 10:18
Is this only for the sake of readability and reduced code size or is there any compatibility reason to do so? — Jens Wirth
– Jens Wirth, Commented Feb 4, 2016 at 6:32

dǝɥɔS ʇoıןןƎ · Accepted Answer · 2022-11-21 20:39:09Z

9

+150

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

edited Nov 21, 2022 at 20:39

dǝɥɔS ʇoıןןƎ

1,8505 gold badges25 silver badges46 bronze badges

answered Jan 29, 2016 at 13:43

Hugeen

1,34015 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

07_05_GuyT Over a year ago

Thanks a lot ! I like your answer :-) , 1+ , This is exactly what I need to use the code directly (or some rest API) ,can you please provide example jsFiddle or something to it ? for instance my input will be like [1, 2, 3].map(function(n) { return n * 2; }, this); and the out is ES arrow function code, I need it since Im not sure how to combine all together...

07_05_GuyT Over a year ago

Thanks :) , Assume I want to take the code which only do the transformation for arrow functions can you please show me which code I should take ? I dont want to require all the lib...I want to use the code itself ...Thank you!

07_05_GuyT Over a year ago

Btw , the jsFiddle is sometimes run and sometimes not with this error " Uncaught ReferenceError: Lebab is not defined", any idea why?

Hugeen Over a year ago

"Assume I want to take the code which only do the transformation for arrow functions can you please show me which code I should take ?" I dont know, perhaps You can play with options. Anyway I think I have answered the main question.

Hugeen Over a year ago

Ok I made another tests, It seems to work with options: jsfiddle.net/Hugeen/cuosht59/2

|

Krzysztof Sztompka · Accepted Answer · 2016-01-28 19:50:27Z

5

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/'));
});

answered Jan 28, 2016 at 19:50

Krzysztof Sztompka

7,2144 gold badges36 silver badges49 bronze badges

10 Comments

07_05_GuyT Over a year ago

Thanks but I dont want to use node for it I want to use some API/rest that can provide me this data,is it possible? please see my update.

Krzysztof Sztompka Over a year ago

Please explain me your intentions. You have some ES5 code. And you need method where you put this code and you get es6 code? But if you you don't need it to convert your files to ES6 but dynamically work wit ES6 code then there is no sense, because ES5 code will do exactly the same things like ES6 code. You wont see difference.

07_05_GuyT Over a year ago

Thanks I familiar with node but in this project I cannot use it :( , my question is if there is some other way to do it? lets start with the arrow function functionality since this is open source(xt06/MIT) I think some code can be used from it(i can copy the code to my machine...),lets say I want just the code of the arrow functions transformation and I put the code (like in my post) and it transfer it to ES6, can you assist?

Krzysztof Sztompka Over a year ago

This part of your needs I understand. but then if this theoretical function transform your code to ES6 code then what then? I mean that if you change all file to ES6 then you will have ES6 code and you can continue developing in ES6. But if you do it in your code to transform only part then this part in this code is only just string.

07_05_GuyT Over a year ago

I want it this for purpose of learning tool which I want to develop...btw please see my update with the last link...I need some API/Code that do exactly this

|

Jerome WAGNER · Accepted Answer · 2016-01-28 20:03:24Z

0

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;

edited Jan 28, 2016 at 20:03

answered Jan 28, 2016 at 19:55

Jerome WAGNER

22.6k10 gold badges64 silver badges79 bronze badges

3 Comments

07_05_GuyT Over a year ago

I've tried you fiddle and it doesnt work,please see my update :) thanks!

Jerome WAGNER Over a year ago

yes I understand you are looking for ES5 to ES6. my solution won't work.

07_05_GuyT Over a year ago

Are you familiar with other solution : ?

SilverSurfer · Accepted Answer · 2020-05-13 08:21:26Z

0

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.

edited May 13, 2020 at 8:21

answered Apr 7, 2020 at 11:39

SilverSurfer

4,3647 gold badges27 silver badges56 bronze badges

Collectives™ on Stack Overflow

Transform ES5 code to ES6 at runtime

4 Answers 4

Summary

8 Comments

10 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Summary

8 Comments

10 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related