Search code examples
javascriptecmascript-6babeljs

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


Solution

  • 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