广西快乐双彩走势图快乐:Writing ES6 today with jstransform

April 21st, 2014. Tagged: JavaScript, tools

So there's this recent open-source project from Facebook called jstransform. It's also used by ReactJS. It lets you explore ES6 features and not only explore, but use them in production code.

All you need to do is add the transformation to your static resource pipeline. (Of course you have one, right, for minification and so on)

I took an example from the readme of the project, added all the available transformations and ended up with a simple little script (available on github).

As a background information, the different transforms are available in the visitors/ directory, they are task-specific, e.g. one adds support for classes, one for fat-arrow functions and so on. I simply included them all. The result is a small command-line utility you can add to your process. How?

Install jstransform

$ npm install jstransform

Get my little es6r script

$ curl https://raw.githubusercontent.com/stoyan/etc/master/es6r/es6r.js > aaa.js

It's pretty simple:

var jstransform = require('jstransform');
var fs = require('fs');
 
var visitors = [];
[
  require('jstransform/visitors/es6-arrow-function-visitors'),
  require('jstransform/visitors/es6-class-visitors'),
  require('jstransform/visitors/es6-object-short-notation-visitors'),
  require('jstransform/visitors/es6-rest-param-visitors'),
  require('jstransform/visitors/es6-template-visitors')
].forEach(function(visitor) {
  visitors = visitors.concat(visitor.visitorList);
});
 
var es6maybe = fs.readFileSync(process.argv[2], 'utf8');
var es5 = jstransform.transform(visitors, es6maybe);
 
console.log(es5.code);

Start transforming

There are a few examples to get you started

E.g.

Arrow functions

(MDN)

var empty = () => {};
 
var a = [
  "We're up all night 'til the sun",
  "We're up all night to get some",
  "We're up all night for good fun",
  "We're up all night to get lucky"
];
 
var a3 = a.map( s => s.length );

Transforming...

$ node es6r.js examples/arrow.js

The result:

var empty = function()  {};
 
var a = [
  "We're up all night 'til the sun",
  "We're up all night to get some",
  "We're up all night for good fun",
  "We're up all night to get lucky"
];
 
var a3 = a.map( function(s)  {return s.length;} );

Classes

class Monkey {
  constructor(name) {
    this.name = name;
  }
  see() {
    return 'see';
  }
  do() {
    return 'doo';
  }
}
 
var monkey = new Monkey('Monkey');
 
console.log([
  monkey.name,
  monkey.see(),
  '-',
  monkey.name,
  monkey.do(),
].join(' '));

After transformation...

 
  function Monkey(name) {"use strict";
    this.name = name;
  }
  Monkey.prototype.see=function() {"use strict";
    return 'see';
  };
  Monkey.prototype.do=function() {"use strict";
    return 'doo';
  };
 
 
var monkey = new Monkey('Monkey');
 
console.log([
  monkey.name,
  monkey.see(),
  '-',
  monkey.name,
  monkey.do(),
].join(' '));

As you can see the transformation tries to protect line numbers and identation.

Thanks!

There are more examples to explore and you can start getting a taste of ES6 today. You may or may not like it, but at least you can decide by writing code, not just based on gut feeling ??

Tell your friends about this post: Facebook, Twitter, Google+

Sorry, comments disabled and hidden due to excessive spam. Working on restoring the existing comments...

Meanwhile, hit me up on twitter @stoyanstefanov


  • “四新”彰显党的十九大思想灵魂和精髓要义 2018-08-17
  • 热身赛-U17女篮73-68立陶宛 杨舒宇19分刘禹彤13分 2018-08-16
  • 七月流火:一半是甜蜜 一半是仁慈 2018-08-15
  • “嫦娥”飞向月球背面,将会揭开哪些秘密? 2018-08-15
  • 一代枭雄身后事:“曹操墓”认定过程缘何一波三折? 2018-08-04
  • 女出纳侵吞千万公款扮富婆 7年未被公司发现 2018-08-04
  • 南昌PM2.5浓度写进目标责任书 切实防治大气污染 2018-07-20
  • 网友投诉不文明养犬行为 有关部门加强治理 2018-07-20
  • 537| 99| 944| 414| 32| 551| 120| 347| 574| 488|