6to5 turns ES6 code into vanilla ES5, so you can use ES6 features today.
- Readable - formatting is retained if possible so your generated code is as similar as possible.
- Extensible - with a large range of plugins and browser support.
- Lossless - source map support so you can debug your compiled code with ease.
- Compact - maps directly to the equivalent ES5 with no runtime.
It's as easy as:
$ npm install -g 6to5
- Array comprehension
- Arrow functions
- Classes
- Computed property names
- Constants
- Default parameters
- Destructuring
- For-of
- Let scoping
- Modules
- Numeric literals
- Property method assignment
- Property name shorthand
- Rest parameters
- Spread
- Template literals
- Unicode Regex
To be implemented:
Compile the file script.js
and output it to stdout.
$ 6to5 script.js
Compile the file script.js
and output it to script-compiled.js
.
$ 6to5 script.js --out-file script-compiled.js
Compile the file script.js
and output it to script-compiled.js
and save a
source map to script-compiled.js.map
.
$ 6to5 script.js --source-maps --out-file script-compiled.js
Compile the file script.js
and output it to script-compiled.js
with a source
map embedded in a comment at the bottom.
$ 6to5 script.js --source-maps-inline --out-file script-compiled.js
Compile the entire src
directory and output it to the lib
directory.
$ 6to5 src --out-dir lib
Pipe a file in via stdin and output it to script-compiled.js
$ 6to5 --out-file script-compiled.js < script.js
Launch a repl.
$ 6to5-node
Evaluate code.
$ 6to5-node -e "class Test { }"
Compile and run test.js
.
$ 6to5-node test
var to5 = require("6to5");
var result = to5.transform("code();", options);
result.code;
result.map;
result.ast;
to5.transformFileSync("filename.js", options).code;
to5.transformFile("filename.js", options, function (err, result) {
});
{
// Filename for use in errors etc.
// Default: "unknown"
filename: "filename",
// List of transformers to EXCLUDE
// This is a camelised version of the name found in `features`
// eg. "Arrow functions" is "arrowFunctions"
blacklist: [],
// List of transformers to ONLY use.
// See `blacklist` for naming scheme.
whitelist: [],
// If truthy, adds a `map` property to returned output.
// If set to "inline", a comment with a sourceMappingURL directive is added to
// the bottom of the returned code.
// Default: false
sourceMap: true,
// Set `file` on returned source map.
// Default: `filename` option.
sourceMapName: "filename",
// Set `sources[0]` on returned source map.
// Default: `filename` option.
sourceFileName: "filename"
}
All subsequent files required by node will be transformed by 6to5. An ES6 polyfill is also required negating the polyfill caveat.
require("6to5/register");
NOTE: All requires to node_modules
will be ignored.
You can build a browser version of the compiler by running the following in the 6to5 directory:
$ make build
This will output the files dist/6to5.js
and dist/6to5.min.js
.
Just include one of those in the browser and access the transform method via the
global to5
.
to5("class Test {}").code;
To test 6to5 in your browser run:
$ make test-browser
And open test/browser.html
in your browser if it doesn't open automatically.
6to5 modules compile straight to CommonJS, because of this various liberties are taken into account to make their usage easier.
import "foo"; // require("foo");
import foo from "foo"; // var foo = require("foo").default;
import * as foo from "foo"; // var foo = require("foo");
import {bar} from "foo"; // var bar = require("foo").bar;
import {foo as bar} from "foo"; // var bar = require("foo").foo;
export {test}; // exports.test = test;
export var test = 5; // var test = 5; exports.test = test;
export default test; // exports.default = test;
If you'd like to disable this behaviour and use the more ES6-like es6-module-transpiler you can use the following:
$ 6to5 script.js -o script-compiled.js --blacklist modules
$ compile-modules convert script-compiled.js -o script-compiled.js
6to5 does not include a runtime nor polyfill and it's up to the developer to include one in compiled browser code.
A polyfill is included with 6to5 code that can be included in node like so:
require("6to5/polyfill");
This is simply a wrapper around the es6-shim and es6-symbol polyfills.
When using the require hook the aforementioned polyfill is automatically required.
If you're planning on using 6to5 output in the browser then it's up to you to include polyfills. es6-symbol and es6-shim fill the vast majority of polyfill concerns.
A polyfill is required for for-of functionality that implements Symbol
and
adds prototype[Symbol.iterator]
behaviour to built-ins. Using the polyfills
specified in polyfill suffices.
Built-in classes such as Date
, Array
and DOM
cannot be subclassed due to
limitations in ES5 implementations.
If you're inheriting from a class then static properties are inherited from it via __proto__, this is widely supported but you may run into problems with much older browsers.
The fundamental concept behind 6to5 is that the generated code must be close as possible to the original, retaining all the same formatting and readability.
Many other transpilers are just concerned with making the code work while 6to5 is concerned with making sure it works and is readable at the same time.
For example, given the following array comprehension:
var seattlers = [for (c of customers) if (c.city == "Seattle") { name: c.name, age: c.age }];
is generated to the following with 6to5:
var seattlers = customers.filter(function (c) {
return c.city == "Seattle";
}).map(function (c) {
return {
name: c.name,
age: c.age
};
});
The following is what Traceur generates:
var seattlers = (function() {
var c;
var $__20 = 0,
$__21 = [];
for (var $__22 = customers[$traceurRuntime.toProperty(Symbol.iterator)](),
$__23; !($__23 = $__22.next()).done; ) {
c = $__23.value;
if (c.city == "Seattle")
$traceurRuntime.setProperty($__21, $__20++, {
name: c.name,
age: c.age
});
}
return $__21;
}());
As you can tell, it's not very pretty, unreadable even. Instead of mapping directly to a runtime, like other transpilers, 6to5 maps directly to the equivalent ES5.
I'm not saying 6to5 is for everyone or even suited for everything. Traceur is better suited if you'd like a full ES6 environment with polyfills and all.
6to5 | Traceur | esnext | es6now | es6-transpiler | jstransform | |
---|---|---|---|---|---|---|
No runtime | ✓ | ✓ | ✓ | |||
Source maps | ✓ | ✓ | ✓ | ✓ | ✓ | |
No compiler global pollution | ✓ | ✓ | ✓ | ✓ | ||
Arrow functions | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
Classes | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
Computed property names | ✓ | ✓ | ✓ | ✓ | ✓ | |
Constants | ✓ | ✓ | ✓ | |||
Default parameters | ✓ | ✓ | ✓ | ✓ | ✓ | |
Destructuring | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
For-of | ✓ | ✓ | ✓ | ✓ | ✓ | |
Generators | ✓ | ✓ | ||||
Let scoping | ✓ | ✓ | ✓ | |||
Modules | ✓ | ✓ | ✓ | |||
Property method assignment | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
Property name shorthand | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
Rest parameters | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
Spread | ✓ | ✓ | ✓ | ✓ | ✓ | |
Template literals | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
Unicode regex | ✓ | ✓ | ✓ |
Traceur requires quite a bulky runtime (~75KB) and produces quite verbose code. While this can be trimmed down by selectively building the runtime, it's an unneccesary step when a runtime can be eliminated entirely.
es6now doesn't output sourcemaps. This is cited as a positive as line-to-line mapping is the goal. This however obviously doesn't retain column mapping resulting in the output code not being very pleasant.
The es6-transpiler compiler requires shims to operate which pollutes the global scope resulting in possible collisions.
es6-transpiler maps line-by-line, just like es6now, this results in the same issues such as lack of column information and unpleasant code output.