快乐双桨明细: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.

Meanwhile, hit me up on twitter @stoyanstefanov


  • 76人参加高山滑雪跨界跨项选材测试 或进冬奥备战梯队 2019-05-18
  • 不是特效!上港队长一脚踢中海鸥 这脚法简直坑爹 2019-05-08
  • 新疆坚决打好污染防治攻坚战 2019-05-07
  • 高考在即,晋中市招生考试管理中心提醒广大考生及家长要把握好高考“四个趋势” 2019-04-25
  • 运城市在长三角招商引资149.9亿元 2019-04-08
  • 济南五胞胎雪虎宝宝亮相 四雌一雄萌态十足 2019-04-08
  • 去产能迎年中考 煤炭、钢铁企业债务问题依然存在 2019-04-07
  • 最高检等四部门出台意见 指导依法办理恐怖活动和极端主义犯罪案件 2019-04-07
  • 广州市黄埔区人民法院公告专栏 2019-03-28
  • 这个“海之宁”是个死抱着相对论旧谬误不放,疯狂反对科学新真理的跳梁“小丑”,这个跳梁“小丑”根本就不懂得尊重客观事实及其规律,总是无视、脱离、歪曲客观... 2019-03-22
  • 如何理解孔子这句话?北大教授胡军动情论生死 2019-03-21
  • 海外舆论关注中国最新军备 称赞习近平主席强军号令 2019-03-19
  • 女性之声——全国妇联 2019-03-19
  • 美司法部科米在希拉里邮件门调查中存在过失 2019-03-17
  • “四新”彰显党的十九大思想灵魂和精髓要义 2018-08-17
  • 639| 19| 660| 893| 936| 943| 648| 386| 936| 833|