今天用jstransform编写ES6

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.

因此，Facebook最近有一个名为jstransform的开源项目。 ReactJS也使用它。它使您可以浏览ES6功能，不仅可以浏览生产代码，还可以在生产代码中使用它们。

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).

我从项目的自述文件中举了一个例子，添加了所有可用的转换，最后得到了一个简单的小脚本(可在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?

作为背景信息， visitors/目录中提供了不同的转换，这些转换是特定于任务的，例如，一个添加了对类的支持，一个添加了对粗箭头功能的支持，等等。我只是将它们全部包括在内。结果是可以将一个小的命令行实用程序添加到您的进程中。怎么样？

安装jstransform (Install jstransform)

$ npm install jstransform

获取我的小es6r脚本 (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)

( 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 🙂

有更多示例可供探索，您今天就可以开始尝试ES6。您可能喜欢或不喜欢它，但至少您可以通过编写代码来决定，而不仅仅是基于直觉。

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息