move docs to 6to5.github.io repo
This commit is contained in:
parent
7f6bc54920
commit
bdb8f87480
@ -1,57 +0,0 @@
|
|||||||
---
|
|
||||||
layout: docs
|
|
||||||
title: Caveats
|
|
||||||
description: Just some things to keep in mind when using 6to5.
|
|
||||||
permalink: /docs/caveats/
|
|
||||||
redirect_from: /caveats.html
|
|
||||||
---
|
|
||||||
|
|
||||||
## Polyfills
|
|
||||||
|
|
||||||
In order for certain features to work they require certain polyfills. You can
|
|
||||||
satisfy **all** 6to5 feature requirements by using the included
|
|
||||||
[polyfill](/docs/usage/polyfill).
|
|
||||||
|
|
||||||
You may alternatively selectively include what you need:
|
|
||||||
|
|
||||||
| Feature | Requirements |
|
|
||||||
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| Abstract References | [experimental](/docs/usage/experimental), `Symbol` |
|
|
||||||
| Array destructuring | `Array.from` |
|
|
||||||
| Async functions, Generators | [experimental](/docs/usage/experimental), [regenerator runtime](https://github.com/facebook/regenerator/blob/master/runtime.js) |
|
|
||||||
| Comprehensions | [experimental](/docs/usage/experimental), `Array.from` |
|
|
||||||
| For Of | `Symbol`, `prototype[Symbol.iterator]` |
|
|
||||||
| Modules | `Object.assign`* |
|
|
||||||
| Object spread/rest | [experimental](/docs/usage/experimental), `Object.assign` |
|
|
||||||
| Spread | `Array.from` |
|
|
||||||
|
|
||||||
*Only required for exporting a non-function `default` with additional `export`s.
|
|
||||||
|
|
||||||
## ES5
|
|
||||||
|
|
||||||
Since 6to5 assumes that your code will be ran in an ES5 environment it uses ES5
|
|
||||||
functions. So if you're using an environment that has limited or no support for
|
|
||||||
ES5 such as lower versions of IE then using the
|
|
||||||
[es5-shim](https://github.com/es-shims/es5-shim) along with the
|
|
||||||
[6to5 polyfill](/docs/usage/polyfill) will add support for these methods.
|
|
||||||
|
|
||||||
## Internet Explorer
|
|
||||||
|
|
||||||
### Classes (10 and below)
|
|
||||||
|
|
||||||
If you're inheriting from a class then static properties are inherited from it
|
|
||||||
via [\_\_proto\_\_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto),
|
|
||||||
this is widely supported but you may run into problems with much older browsers.
|
|
||||||
|
|
||||||
**NOTE:** `__proto__` is not supported on IE <= 10 so static properties
|
|
||||||
**will not** be inherited. See the
|
|
||||||
[protoToAssign](/docs/usage/transformers#proto-to-assign) for a possible work around.
|
|
||||||
|
|
||||||
### Getters/setters (8 and below)
|
|
||||||
|
|
||||||
In IE8 `Object.defineProperty` can only be used on DOM objects. This is
|
|
||||||
unfortunate as it's required to set getters and setters. Due to this if
|
|
||||||
you plan on supporting IE8 or below then the user of getters and setters
|
|
||||||
isn't recommended.
|
|
||||||
|
|
||||||
**Reference**: [MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Internet_Explorer_8_specific_notes).
|
|
||||||
143
doc/compare.md
143
doc/compare.md
@ -1,143 +0,0 @@
|
|||||||
---
|
|
||||||
layout: docs
|
|
||||||
title: Compare
|
|
||||||
description: Differences between 6to5 and other ES6 transpilers.
|
|
||||||
permalink: /docs/compare/
|
|
||||||
redirect_from: /differences.html
|
|
||||||
---
|
|
||||||
|
|
||||||
## Differences
|
|
||||||
|
|
||||||
### Readable code
|
|
||||||
|
|
||||||
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:
|
|
||||||
|
|
||||||
```js
|
|
||||||
var seattlers = [for (c of customers) if (c.city == "Seattle") { name: c.name, age: c.age }];
|
|
||||||
```
|
|
||||||
|
|
||||||
is generated to the following with 6to5:
|
|
||||||
|
|
||||||
```js
|
|
||||||
var seattlers = Array.from(customers).filter(function (c) {
|
|
||||||
return c.city == "Seattle";
|
|
||||||
}).map(function (c) {
|
|
||||||
return {
|
|
||||||
name: c.name,
|
|
||||||
age: c.age
|
|
||||||
};
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
The following is what Traceur generates:
|
|
||||||
|
|
||||||
```js
|
|
||||||
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. Instead of mapping directly to a runtime,
|
|
||||||
like other transpilers, 6to5 maps directly to the equivalent ES5.
|
|
||||||
|
|
||||||
Sometimes there are little inline functions that 6to5 needs. These are
|
|
||||||
placed at the top of your file much like coffee-script does. If these
|
|
||||||
bother you then you can use the [optional runtime](/docs/usage/runtime).
|
|
||||||
We promise that these inline functions will never be significant and will
|
|
||||||
always be used as little as possible.
|
|
||||||
|
|
||||||
### Static analysis
|
|
||||||
|
|
||||||
6to5 uses a lot of static analysis to simplify code as much as possible.
|
|
||||||
Not many other transpilers do this, and those that do don't do it nearly
|
|
||||||
as much as 6to5. This process is pretty intensive but it leads to higher
|
|
||||||
quality code.
|
|
||||||
|
|
||||||
### Spec compliancy
|
|
||||||
|
|
||||||
6to5 prides itself on
|
|
||||||
[spec compliancy](https://kangax.github.io/compat-table/es6/). We have
|
|
||||||
excellent support for edgecases, something that many other transpilers
|
|
||||||
suffer from, including Traceur. When you use 6to5 you can be confident
|
|
||||||
that when you turn it off and use your code in a full ES6 environment
|
|
||||||
**it'll just work**.
|
|
||||||
|
|
||||||
## Comparison to other transpilers
|
|
||||||
|
|
||||||
### Features
|
|
||||||
|
|
||||||
| | 6to5 | Traceur | es6-transpiler | es6now | jstransform |
|
|
||||||
| ---------------------------- | ---- | ------- | -------------- | ------ | ----------- |
|
|
||||||
| Source maps | ✓ | ✓ | | | ✓ |
|
|
||||||
| No compiler global pollution | ✓ | | ✓ | | ✓ |
|
|
||||||
| Optional runtime | ✓ | | ✓ | | ✓ |
|
|
||||||
| Browser compiler | ✓ | ✓ | | | |
|
|
||||||
|
|
||||||
### Language Support
|
|
||||||
|
|
||||||
| | 6to5 | Traceur | es6-transpiler | es6now | jstransform |
|
|
||||||
| ---------------------------- | ---- | ------- | -------------- | ------ | ----------- |
|
|
||||||
| Abstract references | ✓ | | | | |
|
|
||||||
| Array comprehension | ✓ | ✓ | ✓ | | |
|
|
||||||
| Arrow functions | ✓ | ✓ | ✓ | ✓ | ✓ |
|
|
||||||
| Async functions | ✓ | ✓ | | | |
|
|
||||||
| Async generator functions | ✓ | ✓ | | | |
|
|
||||||
| Classes | ✓ | ✓ | ✓ | ✓ | ✓ |
|
|
||||||
| Computed property names | ✓ | ✓ | ✓ | ✓ | |
|
|
||||||
| Constants | ✓ | ✓ | ✓ | | |
|
|
||||||
| Default parameters | ✓ | ✓ | ✓ | ✓ | |
|
|
||||||
| Destructuring | ✓ | ✓ | ✓ | ✓ | ✓ |
|
|
||||||
| Exponentiation operator | ✓ | ✓ | | | |
|
|
||||||
| Flow types | ✓ | | | | ✓ |
|
|
||||||
| For-of | ✓ | ✓ | ✓ | ✓ | |
|
|
||||||
| Generators | ✓ | ✓ | | | |
|
|
||||||
| Generator comprehension | ✓ | ✓ | | | |
|
|
||||||
| JSX | ✓ | | | | |
|
|
||||||
| Let scoping | ✓ | ✓ | ✓ | | |
|
|
||||||
| Modules | ✓ | ✓ | | ✓ | |
|
|
||||||
| Object rest/spread | ✓ | | | | ✓ |
|
|
||||||
| Property method assignment | ✓ | ✓ | ✓ | ✓ | ✓ |
|
|
||||||
| Property name shorthand | ✓ | ✓ | ✓ | ✓ | ✓ |
|
|
||||||
| Rest parameters | ✓ | ✓ | ✓ | ✓ | ✓ |
|
|
||||||
| React | ✓ | | | | |
|
|
||||||
| Spread | ✓ | ✓ | ✓ | ✓ | |
|
|
||||||
| Template literals | ✓ | ✓ | ✓ | ✓ | ✓ |
|
|
||||||
| Unicode regex | ✓ | ✓ | ✓ | | |
|
|
||||||
|
|
||||||
### [Traceur](https://github.com/google/traceur-compiler)
|
|
||||||
|
|
||||||
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
|
|
||||||
unnecessary step when a large runtime can be eliminated entirely.
|
|
||||||
|
|
||||||
### [es6now](https://github.com/zenparsing/es6now)
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
### [es6-transpiler](https://github.com/termi/es6-transpiler)
|
|
||||||
|
|
||||||
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.
|
|
||||||
20
doc/faq.md
20
doc/faq.md
@ -1,20 +0,0 @@
|
|||||||
---
|
|
||||||
layout: docs
|
|
||||||
title: FAQ
|
|
||||||
description: Frequently Asked Questions and Answers
|
|
||||||
permalink: /docs/faq/
|
|
||||||
---
|
|
||||||
|
|
||||||
## Why are there `Array.from` and `Object.assign` calls in my code?! These functions don't exist!
|
|
||||||
|
|
||||||
This is a known [caveat](/docs/caveats). This is because 6to5 compiles to ES3 syntax but with
|
|
||||||
ES5 and ES6 methods. This is essential to emulate a complete ES6 environment so your code
|
|
||||||
wont break! You see, ES6 features such as [iterators](/docs/tour#iterators) and
|
|
||||||
[symbols](/docs/tour#symbols) require a lot of logic to work, and to accurately support these
|
|
||||||
it would mean **a lot** of boilerplate smoshed into your codebase. This is the approach taken
|
|
||||||
by other transpilers but 6to5 approaches it quite differently.
|
|
||||||
|
|
||||||
You have two options, depending on your use case:
|
|
||||||
|
|
||||||
- Use the wonderful [core aliasing optional transformer](/docs/usage/transformers#core-aliasing). This is recommended if you're writing a library.
|
|
||||||
- Or use the bundled 6to5 [polyfill](/docs/usage/polyfill). This is recommended if you're writing an entire application.
|
|
||||||
1
doc/index.md
Normal file
1
doc/index.md
Normal file
@ -0,0 +1 @@
|
|||||||
|
See [6to5.github.io/docs](https://github.com/6to5/6to5.github.io/tree/master/docs).
|
||||||
708
doc/setup.md
708
doc/setup.md
@ -1,708 +0,0 @@
|
|||||||
---
|
|
||||||
layout: docs
|
|
||||||
title: Setup
|
|
||||||
description: Guides on how to setup 6to5 in whatever environment you might be working in.
|
|
||||||
permalink: /docs/setup/
|
|
||||||
redirect_from: /plugins.html
|
|
||||||
---
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<h4>Find your guide</h4>
|
|
||||||
<p>
|
|
||||||
It doesn't matter if you're using Node.js or Rails, Gulp or Grunt, there's likely a guide on
|
|
||||||
this page to help guide you. Go ahead and <span class="label label-info">⌘ + F</span>
|
|
||||||
whatever you're looking for. If it doesn't happen to be on this page you might want to stop by
|
|
||||||
our <a href="https://gitter.im/6to5/6to5">support chat</a>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
## Node.js
|
|
||||||
|
|
||||||
### CLI
|
|
||||||
|
|
||||||
**Install**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ npm install --global 6to5
|
|
||||||
```
|
|
||||||
|
|
||||||
**Usage**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ 6to5 script.js
|
|
||||||
```
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<p>
|
|
||||||
For full documentation on the 6to5 CLI see the
|
|
||||||
<a href="/docs/usage/cli/">usage docs</a>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
### Require Hook
|
|
||||||
|
|
||||||
**Install**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ npm install 6to5
|
|
||||||
```
|
|
||||||
|
|
||||||
**Usage**
|
|
||||||
|
|
||||||
All subsequent files required by node with the extensions `.es6` and `.js` will
|
|
||||||
be transformed by 6to5. The polyfill specified in [Polyfill](polyfill.md) is
|
|
||||||
also required.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
require('6to5/register');
|
|
||||||
```
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<p>
|
|
||||||
For full documentation on the 6to5 require hook see the
|
|
||||||
<a href="/docs/usage/require/">usage docs</a>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
## Rails
|
|
||||||
|
|
||||||
### Sprockets
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<p>
|
|
||||||
See <strong>sprockets-es6</strong>'s
|
|
||||||
<a href="https://github.com/josh/sprockets-es6">repo</a> for more info. If
|
|
||||||
you find any bugs please
|
|
||||||
<a href="https://github.com/josh/sprockets-es6/issues">report them</a>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<em>Issues with the output should be reported on the 6to5
|
|
||||||
<a href="https://github.com/6to5/6to5/issues">issue tracker</a></em>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
**Install**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ gem install sprockets-es6
|
|
||||||
```
|
|
||||||
|
|
||||||
**Usage**
|
|
||||||
|
|
||||||
```rb
|
|
||||||
# Gemfile
|
|
||||||
gem 'sprockets'
|
|
||||||
gem 'sprockets-es6'
|
|
||||||
```
|
|
||||||
|
|
||||||
```rb
|
|
||||||
require 'sprockets/es6'
|
|
||||||
```
|
|
||||||
|
|
||||||
## Build Systems
|
|
||||||
|
|
||||||
### Brocolli
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<p>
|
|
||||||
See <strong>broccoli-6to5-transpiler</strong>'s
|
|
||||||
<a href="https://github.com/6to5/broccoli-6to5-transpiler">repo</a> for more
|
|
||||||
info. If you find any bugs please
|
|
||||||
<a href="https://github.com/6to5/broccoli-6to5-transpiler/issues">report
|
|
||||||
them</a>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<em>Issues with the output should be reported on the 6to5
|
|
||||||
<a href="https://github.com/6to5/6to5/issues">issue tracker</a></em>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
**Install**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ npm install --save-dev broccoli-6to5-transpiler
|
|
||||||
```
|
|
||||||
|
|
||||||
**Usage**
|
|
||||||
|
|
||||||
```js
|
|
||||||
var to5Transpiler = require('broccoli-6to5-transpiler');
|
|
||||||
var scriptTree = to5Transpiler(inputTree, options);
|
|
||||||
```
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-warning">
|
|
||||||
<h4>Source maps</h4>
|
|
||||||
<p>
|
|
||||||
Currently this plugin only support inline source maps. If you need separate
|
|
||||||
source map feature, we welcome you to submit a pull request.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
### Browserify
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<p>
|
|
||||||
See <strong>6to5ify</strong>'s
|
|
||||||
<a href="https://github.com/6to5/6to5ify">repo</a> for more info. If you
|
|
||||||
find any bugs please
|
|
||||||
<a href="https://github.com/6to5/6to5ify/issues">report them</a>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<em>Issues with the output should be reported on the 6to5
|
|
||||||
<a href="https://github.com/6to5/6to5/issues">issue tracker</a></em>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
**Install**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ npm install --save-dev 6to5ify
|
|
||||||
```
|
|
||||||
|
|
||||||
**Usage via CLI**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ browserify script.js -t 6to5ify --outfile bundle.js
|
|
||||||
```
|
|
||||||
|
|
||||||
**Usage via Node.js**
|
|
||||||
|
|
||||||
```js
|
|
||||||
browserify({ debug: true })
|
|
||||||
.transform(to5ify);
|
|
||||||
```
|
|
||||||
|
|
||||||
Or a more complete example:
|
|
||||||
|
|
||||||
```js
|
|
||||||
var fs = require('fs');
|
|
||||||
var browserify = require('browserify');
|
|
||||||
var to5ify = require('6to5ify');
|
|
||||||
|
|
||||||
browserify({ debug: true })
|
|
||||||
.transform(to5ify)
|
|
||||||
.require('./script.js', { entry: true })
|
|
||||||
.bundle()
|
|
||||||
.on('error', function (err) { console.log('Error: ' + err.message); })
|
|
||||||
.pipe(fs.createWriteStream("bundle.js"));
|
|
||||||
```
|
|
||||||
**Passing Options**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ browserify -d -e script.js -t [ 6to5ify --blacklist generators ]
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
browserify().transform(to5ify.configure({
|
|
||||||
blacklist: ['generators']
|
|
||||||
}))
|
|
||||||
```
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<h4>More info</h4>
|
|
||||||
<p>
|
|
||||||
For more information see the
|
|
||||||
<a href="https://github.com/6to5/6to5ify">6to5ify README</a>
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
### Brunch
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<p>
|
|
||||||
See <strong>6to5-brunch</strong>'s
|
|
||||||
<a href="https://github.com/6to5/6to5-brunch">repo</a> for more info. If you
|
|
||||||
find any bugs please
|
|
||||||
<a href="https://github.com/6to5/6to5-brunch/issues">report them</a>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<em>Issues with the output should be reported on the 6to5
|
|
||||||
<a href="https://github.com/6to5/6to5/issues">issue tracker</a></em>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
**Install**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ npm install --save-dev 6to5-brunch
|
|
||||||
```
|
|
||||||
|
|
||||||
**Configuring**
|
|
||||||
|
|
||||||
Set 6to5 options in your brunch config (such as `brunch-config.coffee`) except
|
|
||||||
for `filename` and `sourceMap` which are handled internally.
|
|
||||||
|
|
||||||
```coffee
|
|
||||||
plugins:
|
|
||||||
ES6to5:
|
|
||||||
whitelist: ['arrowFunctions']
|
|
||||||
format:
|
|
||||||
semicolons: false
|
|
||||||
```
|
|
||||||
|
|
||||||
### Duo
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<p>
|
|
||||||
See <strong>duo-6to5</strong>'s
|
|
||||||
<a href="https://github.com/6to5/duo-6to5">repo</a> for more info. If you
|
|
||||||
find any bugs please
|
|
||||||
<a href="https://github.com/6to5/duo-6to5/issues">report them</a>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<em>Issues with the output should be reported on the 6to5
|
|
||||||
<a href="https://github.com/6to5/6to5/issues">issue tracker</a></em>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
**Install**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ npm install --save-dev duo-6to5
|
|
||||||
```
|
|
||||||
|
|
||||||
**Usage via CLI**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ duo --use duo-6to5
|
|
||||||
```
|
|
||||||
|
|
||||||
**Usage via Node.js**
|
|
||||||
|
|
||||||
```js
|
|
||||||
Duo(root)
|
|
||||||
.entry(entry)
|
|
||||||
.use(to5)
|
|
||||||
.run(fn);
|
|
||||||
```
|
|
||||||
|
|
||||||
### Gobble
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<p>
|
|
||||||
See <strong>gobble-6to5</strong>'s
|
|
||||||
<a href="https://github.com/6to5/gobble-6to5">repo</a> for more info. If you
|
|
||||||
find any bugs please
|
|
||||||
<a href="https://github.com/6to5/gobble-6to5/issues">report them</a>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<em>Issues with the output should be reported on the 6to5
|
|
||||||
<a href="https://github.com/6to5/6to5/issues">issue tracker</a></em>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
**Install**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ npm install --save-dev gobble-6to5
|
|
||||||
```
|
|
||||||
|
|
||||||
**Usage**
|
|
||||||
|
|
||||||
The `options` argument, if specified, is passed to 6to5.
|
|
||||||
|
|
||||||
```
|
|
||||||
var gobble = require('gobble');
|
|
||||||
module.exports = gobble('src').transform('6to5', options);
|
|
||||||
```
|
|
||||||
|
|
||||||
**Source maps**
|
|
||||||
|
|
||||||
Sourcemaps are created by default (all the relevant information is filled in by
|
|
||||||
Gobble, you don't need to specify `sourceMapName` options etc). If you don't
|
|
||||||
want that, pass `sourceMap: false`.
|
|
||||||
|
|
||||||
### Grunt
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<p>
|
|
||||||
See <strong>grunt-6to5</strong>'s
|
|
||||||
<a href="https://github.com/6to5/grunt-6to5">repo</a> for more info. If you
|
|
||||||
find any bugs please
|
|
||||||
<a href="https://github.com/6to5/grunt-6to5/issues">report them</a>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<em>Issues with the output should be reported on the 6to5
|
|
||||||
<a href="https://github.com/6to5/6to5/issues">issue tracker</a></em>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
**Install**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ npm install --save-dev grunt-6to5
|
|
||||||
```
|
|
||||||
|
|
||||||
**Usage**
|
|
||||||
|
|
||||||
```js
|
|
||||||
require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks
|
|
||||||
|
|
||||||
grunt.initConfig({
|
|
||||||
'6to5': {
|
|
||||||
options: {
|
|
||||||
sourceMap: true
|
|
||||||
},
|
|
||||||
dist: {
|
|
||||||
files: {
|
|
||||||
'dist/app.js': 'src/app.js'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
grunt.registerTask('default', ['6to5']);
|
|
||||||
```
|
|
||||||
|
|
||||||
### Gulp
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<p>
|
|
||||||
See <strong>gulp-6to5</strong>'s
|
|
||||||
<a href="https://github.com/6to5/gulp-6to5">repo</a> for more info. If you
|
|
||||||
find any bugs please
|
|
||||||
<a href="https://github.com/6to5/gulp-6to5/issues">report them</a>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<em>Issues with the output should be reported on the 6to5
|
|
||||||
<a href="https://github.com/6to5/6to5/issues">issue tracker</a></em>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
**Install**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ npm install --save-dev gulp-6to5
|
|
||||||
```
|
|
||||||
|
|
||||||
**Usage**
|
|
||||||
|
|
||||||
```js
|
|
||||||
var gulp = require('gulp');
|
|
||||||
var to5 = require('gulp-6to5');
|
|
||||||
|
|
||||||
gulp.task('default', function () {
|
|
||||||
return gulp.src('src/app.js')
|
|
||||||
.pipe(to5())
|
|
||||||
.pipe(gulp.dest('dist'));
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
**Source maps**
|
|
||||||
|
|
||||||
Use [gulp-sourcemaps](https://github.com/floridoo/gulp-sourcemaps) like this:
|
|
||||||
|
|
||||||
```js
|
|
||||||
var gulp = require('gulp');
|
|
||||||
var sourcemaps = require('gulp-sourcemaps');
|
|
||||||
var to5 = require('gulp-6to5');
|
|
||||||
var concat = require('gulp-concat');
|
|
||||||
|
|
||||||
gulp.task('default', function () {
|
|
||||||
return gulp.src('src/**/*.js')
|
|
||||||
.pipe(sourcemaps.init())
|
|
||||||
.pipe(to5())
|
|
||||||
.pipe(concat('all.js'))
|
|
||||||
.pipe(sourcemaps.write('.'))
|
|
||||||
.pipe(gulp.dest('dist'));
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### Webpack
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<p>
|
|
||||||
See <strong>6to5-loader</strong>'s
|
|
||||||
<a href="https://github.com/6to5/6to5-loader">repo</a> for more info. If you
|
|
||||||
find any bugs please
|
|
||||||
<a href="https://github.com/6to5/6to5-loader/issues">report them</a>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<em>Issues with the output should be reported on the 6to5
|
|
||||||
<a href="https://github.com/6to5/6to5/issues">issue tracker</a></em>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
**Install**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ npm install --save-dev 6to5-loader
|
|
||||||
```
|
|
||||||
|
|
||||||
**Usage via loader**
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Animal from '6to5!./Animal.js';
|
|
||||||
|
|
||||||
class Person extends Animal {
|
|
||||||
constructor(arg='default') {
|
|
||||||
this.eat = 'Happy Meal';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Person;
|
|
||||||
```
|
|
||||||
```js
|
|
||||||
var Person = require('6to5!./Person.js').default;
|
|
||||||
new Person();
|
|
||||||
```
|
|
||||||
|
|
||||||
**Usage via config**
|
|
||||||
|
|
||||||
```js
|
|
||||||
module: {
|
|
||||||
loaders: [
|
|
||||||
{ test: /\.js$/, exclude: /node_modules/, loader: '6to5-loader'}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
and then import normally:
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Person from './Person.js';
|
|
||||||
```
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-warning">
|
|
||||||
<h4>Troubleshooting</h4>
|
|
||||||
<p>
|
|
||||||
For additional information on how to troubleshoot **6to5-loader** please
|
|
||||||
see the
|
|
||||||
<a href="https://github.com/6to5/6to5-loader#troubleshooting">README</a>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
## Misc
|
|
||||||
|
|
||||||
### Connect
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<p>
|
|
||||||
See <strong>6to5-connect</strong>'s
|
|
||||||
<a href="https://github.com/6to5/6to5-connect">repo</a> for more info. If
|
|
||||||
you find any bugs please
|
|
||||||
<a href="https://github.com/6to5/6to5-connect/issues">report them</a>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<em>Issues with the output should be reported on the 6to5
|
|
||||||
<a href="https://github.com/6to5/6to5/issues">issue tracker</a></em>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
**Install**
|
|
||||||
|
|
||||||
```js
|
|
||||||
$ npm install 6to5-connect
|
|
||||||
```
|
|
||||||
|
|
||||||
**Usage**
|
|
||||||
|
|
||||||
```js
|
|
||||||
var to5Middleware = require('6to5-connect');
|
|
||||||
|
|
||||||
app.use(to5Middleware({
|
|
||||||
options: {
|
|
||||||
// options to use when transforming files
|
|
||||||
},
|
|
||||||
src: 'assets',
|
|
||||||
dest: 'cache'
|
|
||||||
}));
|
|
||||||
|
|
||||||
app.use(connect.static('cache'));
|
|
||||||
```
|
|
||||||
|
|
||||||
### Jade
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<p>
|
|
||||||
See <strong>jade-6to5</strong>'s
|
|
||||||
<a href="https://github.com/6to5/jade-6to5">repo</a> for more info. If you
|
|
||||||
find any bugs please
|
|
||||||
<a href="https://github.com/6to5/jade-6to5/issues">report them</a>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<em>Issues with the output should be reported on the 6to5
|
|
||||||
<a href="https://github.com/6to5/6to5/issues">issue tracker</a></em>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
**Install**
|
|
||||||
|
|
||||||
```js
|
|
||||||
$ npm install jade-6to5
|
|
||||||
```
|
|
||||||
|
|
||||||
**Usage**
|
|
||||||
|
|
||||||
```js
|
|
||||||
var jade = require('jade');
|
|
||||||
var to5 = require('jade-6to5');
|
|
||||||
|
|
||||||
jade.filters.to5 = to5({});
|
|
||||||
```
|
|
||||||
|
|
||||||
OR
|
|
||||||
|
|
||||||
```js
|
|
||||||
var jade = require('jade');
|
|
||||||
var to5 = require('jade-6to5');
|
|
||||||
|
|
||||||
jade = to5({}, jade);
|
|
||||||
```
|
|
||||||
|
|
||||||
Now you can use ES6 in your jade templates as following.
|
|
||||||
|
|
||||||
```jade
|
|
||||||
script
|
|
||||||
:to5
|
|
||||||
console.log('Hello World !!!');
|
|
||||||
class Person {
|
|
||||||
constructor(name) {
|
|
||||||
this.name = name;
|
|
||||||
}
|
|
||||||
sayName(){
|
|
||||||
console.log(`Hello, my name is ${this.name}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var person = new Person('Apoxx');
|
|
||||||
person.sayName();
|
|
||||||
```
|
|
||||||
|
|
||||||
### Jest
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<p>
|
|
||||||
See <strong>6to5-jest</strong>'s
|
|
||||||
<a href="https://github.com/6to5/6to5-jest">repo</a> for more info. If you
|
|
||||||
find any bugs please
|
|
||||||
<a href="https://github.com/6to5/6to5-jest/issues">report them</a>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<em>Issues with the output should be reported on the 6to5
|
|
||||||
<a href="https://github.com/6to5/6to5/issues">issue tracker</a></em>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
**Install**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ npm install --save-dev 6to5-jest
|
|
||||||
```
|
|
||||||
|
|
||||||
**Usage**
|
|
||||||
|
|
||||||
In your `package.json` file please make the following changes:
|
|
||||||
|
|
||||||
```
|
|
||||||
{
|
|
||||||
"dependencies": {
|
|
||||||
"6to5-jest": "*",
|
|
||||||
"jest": "*"
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"test": "jest"
|
|
||||||
},
|
|
||||||
"jest": {
|
|
||||||
"scriptPreprocessor": "<rootDir>/node_modules/6to5-jest",
|
|
||||||
"testFileExtensions": ["es6", "js"],
|
|
||||||
"moduleFileExtensions": ["js", "json", "es6"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Karma
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<p>
|
|
||||||
See <strong>karma-6to5-preprocessor</strong>'s
|
|
||||||
<a href="https://github.com/6to5/karma-6to5-preprocessor">repo</a> for more
|
|
||||||
info. If you find any bugs please
|
|
||||||
<a href="https://github.com/6to5/karma-6to5-preprocessor/issues">report them</a>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<em>Issues with the output should be reported on the 6to5
|
|
||||||
<a href="https://github.com/6to5/6to5/issues">issue tracker</a></em>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
**Install**
|
|
||||||
|
|
||||||
```js
|
|
||||||
npm install --save-dev karma-6to5-preprocessor
|
|
||||||
```
|
|
||||||
|
|
||||||
**Usage**
|
|
||||||
|
|
||||||
See 6to5 options for more details.
|
|
||||||
|
|
||||||
Given `options` properties are passed to 6to5 with no change except:
|
|
||||||
|
|
||||||
- `filename`
|
|
||||||
- `sourceMapName`
|
|
||||||
- `sourceFileName`
|
|
||||||
|
|
||||||
Because they should differ from file to file, corresponding configuration
|
|
||||||
functions are available.
|
|
||||||
|
|
||||||
For example, inline sourcemap configuration would look like the following.
|
|
||||||
|
|
||||||
```js
|
|
||||||
module.exports = function(config) {
|
|
||||||
config.set({
|
|
||||||
files: [
|
|
||||||
'src/**/*.js',
|
|
||||||
'test/**/*.js'
|
|
||||||
],
|
|
||||||
preprocessors: {
|
|
||||||
'src/**/*.js': ['6to5'],
|
|
||||||
'test/**/*.js': ['6to5']
|
|
||||||
},
|
|
||||||
'6to5Preprocessor': {
|
|
||||||
options: {
|
|
||||||
sourceMap: 'inline'
|
|
||||||
},
|
|
||||||
filename: function(file) {
|
|
||||||
return file.originalPath.replace(/\.js$/, '.es5.js');
|
|
||||||
},
|
|
||||||
sourceFileName: function(file) {
|
|
||||||
return file.originalPath;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### Mocha
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<p>
|
|
||||||
See <strong>6to5-mocha</strong>'s
|
|
||||||
<a href="https://github.com/6to5/6to5-mocha">repo</a> for more info. If you
|
|
||||||
find any bugs please
|
|
||||||
<a href="https://github.com/6to5/6to5-mocha/issues">report them</a>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<em>Issues with the output should be reported on the 6to5
|
|
||||||
<a href="https://github.com/6to5/6to5/issues">issue tracker</a></em>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
**Install**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ npm install --save-dev 6to5
|
|
||||||
```
|
|
||||||
|
|
||||||
**Usage**
|
|
||||||
|
|
||||||
```js
|
|
||||||
{
|
|
||||||
"scripts": {
|
|
||||||
"test": "mocha --require 6to5/register"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"6to5": "*",
|
|
||||||
"mocha": "*"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
771
doc/tour.md
771
doc/tour.md
@ -1,771 +0,0 @@
|
|||||||
---
|
|
||||||
layout: docs
|
|
||||||
title: Tour
|
|
||||||
description: A detailed overview of ECMAScript 6 features.
|
|
||||||
permalink: /docs/tour/
|
|
||||||
redirect_from: /features.html
|
|
||||||
---
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<h4>es6features</h4>
|
|
||||||
<p>
|
|
||||||
This document is taken from Luke Hoban's excellent
|
|
||||||
<a href="http://git.io/es6features">es6features</a> repo. Go give it a star
|
|
||||||
on GitHub!
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<h4>REPL</h4>
|
|
||||||
<p>
|
|
||||||
Be sure to try these features out in the online
|
|
||||||
<a href="repl.html">REPL</a>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
## Introduction
|
|
||||||
|
|
||||||
> ECMAScript 6 is the upcoming version of the ECMAScript standard. This
|
|
||||||
standard is targeting ratification in June 2015. ES6 is a significant update to
|
|
||||||
the language, and the first update to the language since ES5 was standardized in
|
|
||||||
2009. Implementation of these features in major JavaScript engines is
|
|
||||||
[underway now](http://kangax.github.io/es5-compat-table/es6/).
|
|
||||||
|
|
||||||
See the [draft ES6 standard](https://people.mozilla.org/~jorendorff/es6-draft.html)
|
|
||||||
for full specification of the ECMAScript 6 language.
|
|
||||||
|
|
||||||
## ECMAScript 6 Features
|
|
||||||
|
|
||||||
### Arrows
|
|
||||||
|
|
||||||
Arrows are a function shorthand using the `=>` syntax. They are syntactically
|
|
||||||
similar to the related feature in C#, Java 8 and CoffeeScript. They support
|
|
||||||
both expression and statement bodies. Unlike functions, arrows share the same
|
|
||||||
lexical `this` as their surrounding code.
|
|
||||||
|
|
||||||
```js
|
|
||||||
// Expression bodies
|
|
||||||
var odds = evens.map(v => v + 1);
|
|
||||||
var nums = evens.map((v, i) => v + i);
|
|
||||||
|
|
||||||
// Statement bodies
|
|
||||||
nums.forEach(v => {
|
|
||||||
if (v % 5 === 0)
|
|
||||||
fives.push(v);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Lexical this
|
|
||||||
var bob = {
|
|
||||||
_name: "Bob",
|
|
||||||
_friends: [],
|
|
||||||
printFriends() {
|
|
||||||
this._friends.forEach(f =>
|
|
||||||
console.log(this._name + " knows " + f));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Classes
|
|
||||||
|
|
||||||
ES6 classes are a simple sugar over the prototype-based OO pattern. Having a
|
|
||||||
single convenient declarative form makes class patterns easier to use, and
|
|
||||||
encourages interoperability. Classes support prototype-based inheritance, super
|
|
||||||
calls, instance and static methods and constructors.
|
|
||||||
|
|
||||||
```js
|
|
||||||
class SkinnedMesh extends THREE.Mesh {
|
|
||||||
constructor(geometry, materials) {
|
|
||||||
super(geometry, materials);
|
|
||||||
|
|
||||||
this.idMatrix = SkinnedMesh.defaultMatrix();
|
|
||||||
this.bones = [];
|
|
||||||
this.boneMatrices = [];
|
|
||||||
//...
|
|
||||||
}
|
|
||||||
update(camera) {
|
|
||||||
//...
|
|
||||||
super.update();
|
|
||||||
}
|
|
||||||
static defaultMatrix() {
|
|
||||||
return new THREE.Matrix4();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Enhanced Object Literals
|
|
||||||
|
|
||||||
Object literals are extended to support setting the prototype at construction,
|
|
||||||
shorthand for `foo: foo` assignments, defining methods and making super calls.
|
|
||||||
Together, these also bring object literals and class declarations closer
|
|
||||||
together, and let object-based design benefit from some of the same
|
|
||||||
conveniences.
|
|
||||||
|
|
||||||
```js
|
|
||||||
var obj = {
|
|
||||||
// __proto__
|
|
||||||
__proto__: theProtoObj,
|
|
||||||
// Shorthand for ‘handler: handler’
|
|
||||||
handler,
|
|
||||||
// Methods
|
|
||||||
toString() {
|
|
||||||
// Super calls
|
|
||||||
return "d " + super.toString();
|
|
||||||
},
|
|
||||||
// Computed (dynamic) property names
|
|
||||||
[ 'prop_' + (() => 42)() ]: 42
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-warning">
|
|
||||||
<p>
|
|
||||||
<code>__proto__</code> support comes from the JavaScript engine running
|
|
||||||
your program. Although most support the now standard property,
|
|
||||||
<a href="http://kangax.github.io/compat-table/es6/#__proto___in_object_literals">some do not</a>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
### Template Strings
|
|
||||||
|
|
||||||
Template strings provide syntactic sugar for constructing strings. This is
|
|
||||||
similar to string interpolation features in Perl, Python and more. Optionally, a
|
|
||||||
tag can be added to allow the string construction to be customized, avoiding
|
|
||||||
injection attacks or constructing higher level data structures from string
|
|
||||||
contents.
|
|
||||||
|
|
||||||
```js
|
|
||||||
// Basic literal string creation
|
|
||||||
`In JavaScript '\n' is a line-feed.`
|
|
||||||
|
|
||||||
// Multiline strings
|
|
||||||
`In JavaScript this is
|
|
||||||
not legal.`
|
|
||||||
|
|
||||||
// Construct a DOM query
|
|
||||||
var name = "Bob", time = "today";
|
|
||||||
`Hello ${name}, how are you ${time}?`
|
|
||||||
|
|
||||||
// Construct an HTTP request prefix is used to interpret the replacements and construction
|
|
||||||
GET`http://foo.org/bar?a=${a}&b=${b}
|
|
||||||
Content-Type: application/json
|
|
||||||
X-Credentials: ${credentials}
|
|
||||||
{ "foo": ${foo},
|
|
||||||
"bar": ${bar}}`(myOnReadyStateChangeHandler);
|
|
||||||
```
|
|
||||||
|
|
||||||
### Destructuring
|
|
||||||
|
|
||||||
Destructuring allows binding using pattern matching, with support for matching
|
|
||||||
arrays and objects. Destructuring is fail-soft, similar to standard object
|
|
||||||
lookup `foo["bar"]`, producing `undefined` values when not found.
|
|
||||||
|
|
||||||
```js
|
|
||||||
// list matching
|
|
||||||
var [a, , b] = [1,2,3];
|
|
||||||
|
|
||||||
// object matching
|
|
||||||
var { op: a, lhs: { op: b }, rhs: c }
|
|
||||||
= getASTNode()
|
|
||||||
|
|
||||||
// object matching shorthand
|
|
||||||
// binds `op`, `lhs` and `rhs` in scope
|
|
||||||
var {op, lhs, rhs} = getASTNode()
|
|
||||||
|
|
||||||
// Can be used in parameter position
|
|
||||||
function g({name: x}) {
|
|
||||||
console.log(x);
|
|
||||||
}
|
|
||||||
g({name: 5})
|
|
||||||
|
|
||||||
// Fail-soft destructuring
|
|
||||||
var [a] = [];
|
|
||||||
a === undefined;
|
|
||||||
|
|
||||||
// Fail-soft destructuring with defaults
|
|
||||||
var [a = 1] = [];
|
|
||||||
a === 1;
|
|
||||||
```
|
|
||||||
|
|
||||||
### Default + Rest + Spread
|
|
||||||
|
|
||||||
Callee-evaluated default parameter values. Turn an array into consecutive
|
|
||||||
arguments in a function call. Bind trailing parameters to an array. Rest
|
|
||||||
replaces the need for `arguments` and addresses common cases more directly.
|
|
||||||
|
|
||||||
```js
|
|
||||||
function f(x, y=12) {
|
|
||||||
// y is 12 if not passed (or passed as undefined)
|
|
||||||
return x + y;
|
|
||||||
}
|
|
||||||
f(3) == 15
|
|
||||||
```
|
|
||||||
```js
|
|
||||||
function f(x, ...y) {
|
|
||||||
// y is an Array
|
|
||||||
return x * y.length;
|
|
||||||
}
|
|
||||||
f(3, "hello", true) == 6
|
|
||||||
```
|
|
||||||
```js
|
|
||||||
function f(x, y, z) {
|
|
||||||
return x + y + z;
|
|
||||||
}
|
|
||||||
// Pass each elem of array as argument
|
|
||||||
f(...[1,2,3]) == 6
|
|
||||||
```
|
|
||||||
|
|
||||||
### Let + Const
|
|
||||||
|
|
||||||
Block-scoped binding constructs. `let` is the new `var`. `const` is
|
|
||||||
single-assignment. Static restrictions prevent use before assignment.
|
|
||||||
|
|
||||||
|
|
||||||
```js
|
|
||||||
function f() {
|
|
||||||
{
|
|
||||||
let x;
|
|
||||||
{
|
|
||||||
// okay, block scoped name
|
|
||||||
const x = "sneaky";
|
|
||||||
// error, const
|
|
||||||
x = "foo";
|
|
||||||
}
|
|
||||||
// error, already declared in block
|
|
||||||
let x = "inner";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Iterators + For..Of
|
|
||||||
|
|
||||||
Iterator objects enable custom iteration like CLR IEnumerable or Java
|
|
||||||
Iteratable. Generalize `for..in` to custom iterator-based iteration with
|
|
||||||
`for..of`. Don’t require realizing an array, enabling lazy design patterns like
|
|
||||||
LINQ.
|
|
||||||
|
|
||||||
```js
|
|
||||||
let fibonacci = {
|
|
||||||
[Symbol.iterator]() {
|
|
||||||
let pre = 0, cur = 1;
|
|
||||||
return {
|
|
||||||
next() {
|
|
||||||
[pre, cur] = [cur, pre + cur];
|
|
||||||
return { done: false, value: cur }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for (var n of fibonacci) {
|
|
||||||
// truncate the sequence at 1000
|
|
||||||
if (n > 1000)
|
|
||||||
break;
|
|
||||||
print(n);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Iteration is based on these duck-typed interfaces (using
|
|
||||||
[TypeScript](http://typescriptlang.org) type syntax for exposition only):
|
|
||||||
|
|
||||||
```ts
|
|
||||||
interface IteratorResult {
|
|
||||||
done: boolean;
|
|
||||||
value: any;
|
|
||||||
}
|
|
||||||
interface Iterator {
|
|
||||||
next(): IteratorResult;
|
|
||||||
}
|
|
||||||
interface Iterable {
|
|
||||||
[Symbol.iterator](): Iterator
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Generators
|
|
||||||
|
|
||||||
Generators simplify iterator-authoring using `function*` and `yield`. A function
|
|
||||||
declared as function* returns a Generator instance. Generators are subtypes of
|
|
||||||
iterators which include additional `next` and `throw`. These enable values to
|
|
||||||
flow back into the generator, so `yield` is an expression form which returns a
|
|
||||||
value (or throws).
|
|
||||||
|
|
||||||
Note: Can also be used to enable ‘await’-like async programming, see also ES7
|
|
||||||
`await` proposal.
|
|
||||||
|
|
||||||
```js
|
|
||||||
var fibonacci = {
|
|
||||||
[Symbol.iterator]: function*() {
|
|
||||||
var pre = 0, cur = 1;
|
|
||||||
for (;;) {
|
|
||||||
var temp = pre;
|
|
||||||
pre = cur;
|
|
||||||
cur += temp;
|
|
||||||
yield cur;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for (var n of fibonacci) {
|
|
||||||
// truncate the sequence at 1000
|
|
||||||
if (n > 1000)
|
|
||||||
break;
|
|
||||||
print(n);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
The generator interface is (using [TypeScript](http://typescriptlang.org) type
|
|
||||||
syntax for exposition only):
|
|
||||||
|
|
||||||
```ts
|
|
||||||
interface Generator extends Iterator {
|
|
||||||
next(value?: any): IteratorResult;
|
|
||||||
throw(exception: any);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Comprehensions
|
|
||||||
|
|
||||||
Array and generator comprehensions provide simple declarative list processing
|
|
||||||
similar as used in many functional programming patterns.
|
|
||||||
|
|
||||||
```js
|
|
||||||
// Array comprehensions
|
|
||||||
var results = [
|
|
||||||
for(c of customers)
|
|
||||||
if (c.city == "Seattle")
|
|
||||||
{ name: c.name, age: c.age }
|
|
||||||
]
|
|
||||||
|
|
||||||
// Generator comprehensions
|
|
||||||
var results = (
|
|
||||||
for(c of customers)
|
|
||||||
if (c.city == "Seattle")
|
|
||||||
{ name: c.name, age: c.age }
|
|
||||||
)
|
|
||||||
```
|
|
||||||
|
|
||||||
### Unicode
|
|
||||||
|
|
||||||
Non-breaking additions to support full Unicode, including new unicode literal
|
|
||||||
form in strings and new RegExp `u` mode to handle code points, as well as new
|
|
||||||
APIs to process strings at the 21bit code points level. These additions support
|
|
||||||
building global apps in JavaScript.
|
|
||||||
|
|
||||||
```js
|
|
||||||
// same as ES5.1
|
|
||||||
"𠮷".length == 2
|
|
||||||
|
|
||||||
// new RegExp behaviour, opt-in ‘u’
|
|
||||||
"𠮷".match(/./u)[0].length == 2
|
|
||||||
|
|
||||||
// new form
|
|
||||||
"\u{20BB7}"=="𠮷" == "\uD842\uDFB7"
|
|
||||||
|
|
||||||
// new String ops
|
|
||||||
"𠮷".codePointAt(0) == 0x20BB7
|
|
||||||
|
|
||||||
// for-of iterates code points
|
|
||||||
for(var c of "𠮷") {
|
|
||||||
console.log(c);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Modules
|
|
||||||
|
|
||||||
Language-level support for modules for component definition. Codifies patterns
|
|
||||||
from popular JavaScript module loaders (AMD, CommonJS). Runtime behaviour
|
|
||||||
defined by a host-defined default loader. Implicitly async model – no code
|
|
||||||
executes until requested modules are available and processed.
|
|
||||||
|
|
||||||
```js
|
|
||||||
// lib/math.js
|
|
||||||
export function sum(x, y) {
|
|
||||||
return x + y;
|
|
||||||
}
|
|
||||||
export var pi = 3.141593;
|
|
||||||
```
|
|
||||||
```js
|
|
||||||
// app.js
|
|
||||||
module math from "lib/math";
|
|
||||||
alert("2π = " + math.sum(math.pi, math.pi));
|
|
||||||
```
|
|
||||||
```js
|
|
||||||
// otherApp.js
|
|
||||||
import {sum, pi} from "lib/math";
|
|
||||||
alert("2π = " + sum(pi, pi));
|
|
||||||
```
|
|
||||||
|
|
||||||
Some additional features include `export default` and `export *`:
|
|
||||||
|
|
||||||
```js
|
|
||||||
// lib/mathplusplus.js
|
|
||||||
export * from "lib/math";
|
|
||||||
export var e = 2.71828182846;
|
|
||||||
export default function(x) {
|
|
||||||
return Math.exp(x);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
```js
|
|
||||||
// app.js
|
|
||||||
module math from "lib/mathplusplus";
|
|
||||||
import exp from "lib/mathplusplus";
|
|
||||||
alert("2π = " + exp(math.pi, math.e));
|
|
||||||
```
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<h4>Module Formatters</h4>
|
|
||||||
<p>
|
|
||||||
6to5 can transpile ES6 Modules to several different formats including
|
|
||||||
Common.js, AMD, System, and UMD. You can even create your own. For more
|
|
||||||
details see the <a href="modules.html">modules docs</a>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
### Module Loaders
|
|
||||||
|
|
||||||
Module loaders support:
|
|
||||||
- Dynamic loading
|
|
||||||
- State isolation
|
|
||||||
- Global namespace isolation
|
|
||||||
- Compilation hooks
|
|
||||||
- Nested virtualization
|
|
||||||
|
|
||||||
The default module loader can be configured, and new loaders can be constructed
|
|
||||||
to evaluated and load code in isolated or constrained contexts.
|
|
||||||
|
|
||||||
```js
|
|
||||||
// Dynamic loading – ‘System’ is default loader
|
|
||||||
System.import('lib/math').then(function(m) {
|
|
||||||
alert("2π = " + m.sum(m.pi, m.pi));
|
|
||||||
});
|
|
||||||
|
|
||||||
// Create execution sandboxes – new Loaders
|
|
||||||
var loader = new Loader({
|
|
||||||
global: fixup(window) // replace ‘console.log’
|
|
||||||
});
|
|
||||||
loader.eval("console.log('hello world!');");
|
|
||||||
|
|
||||||
// Directly manipulate module cache
|
|
||||||
System.get('jquery');
|
|
||||||
System.set('jquery', Module({$: $})); // WARNING: not yet finalized
|
|
||||||
```
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-warning">
|
|
||||||
<h4>Additional polyfill needed</h4>
|
|
||||||
<p>
|
|
||||||
Since 6to5 defaults to using common.js modules, it does not include the
|
|
||||||
polyfill for the module loader api. Get it
|
|
||||||
<a href="https://github.com/ModuleLoader/es6-module-loader">here</a>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<h4>Using Module Loader</h4>
|
|
||||||
<p>
|
|
||||||
In order to use this, you'll need to tell 6to5 to use the
|
|
||||||
<code>system</code> module formatter. Also be sure to check out
|
|
||||||
<a href="https://github.com/systemjs/systemjs">System.js</a>
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
|
|
||||||
### Map + Set + WeakMap + WeakSet
|
|
||||||
|
|
||||||
Efficient data structures for common algorithms. WeakMaps provides leak-free
|
|
||||||
object-key’d side tables.
|
|
||||||
|
|
||||||
```js
|
|
||||||
// Sets
|
|
||||||
var s = new Set();
|
|
||||||
s.add("hello").add("goodbye").add("hello");
|
|
||||||
s.size === 2;
|
|
||||||
s.has("hello") === true;
|
|
||||||
|
|
||||||
// Maps
|
|
||||||
var m = new Map();
|
|
||||||
m.set("hello", 42);
|
|
||||||
m.set(s, 34);
|
|
||||||
m.get(s) == 34;
|
|
||||||
|
|
||||||
// Weak Maps
|
|
||||||
var wm = new WeakMap();
|
|
||||||
wm.set(s, { extra: 42 });
|
|
||||||
wm.size === undefined
|
|
||||||
|
|
||||||
// Weak Sets
|
|
||||||
var ws = new WeakSet();
|
|
||||||
ws.add({ data: 42 });
|
|
||||||
// Because the added object has no other references, it will not be held in the set
|
|
||||||
```
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<h4>Support via polyfill</h4>
|
|
||||||
<p>
|
|
||||||
In order to support Promises you must include the 6to5 Polyfill.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
### Proxies
|
|
||||||
|
|
||||||
Proxies enable creation of objects with the full range of behaviors available to
|
|
||||||
host objects. Can be used for interception, object virtualization,
|
|
||||||
logging/profiling, etc.
|
|
||||||
|
|
||||||
```js
|
|
||||||
// Proxying a normal object
|
|
||||||
var target = {};
|
|
||||||
var handler = {
|
|
||||||
get: function (receiver, name) {
|
|
||||||
return `Hello, ${name}!`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var p = new Proxy(target, handler);
|
|
||||||
p.world === 'Hello, world!';
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
// Proxying a function object
|
|
||||||
var target = function () { return 'I am the target'; };
|
|
||||||
var handler = {
|
|
||||||
apply: function (receiver, ...args) {
|
|
||||||
return 'I am the proxy';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var p = new Proxy(target, handler);
|
|
||||||
p() === 'I am the proxy';
|
|
||||||
```
|
|
||||||
|
|
||||||
There are traps available for all of the runtime-level meta-operations:
|
|
||||||
|
|
||||||
```js
|
|
||||||
var handler =
|
|
||||||
{
|
|
||||||
get:...,
|
|
||||||
set:...,
|
|
||||||
has:...,
|
|
||||||
deleteProperty:...,
|
|
||||||
apply:...,
|
|
||||||
construct:...,
|
|
||||||
getOwnPropertyDescriptor:...,
|
|
||||||
defineProperty:...,
|
|
||||||
getPrototypeOf:...,
|
|
||||||
setPrototypeOf:...,
|
|
||||||
enumerate:...,
|
|
||||||
ownKeys:...,
|
|
||||||
preventExtensions:...,
|
|
||||||
isExtensible:...
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-danger">
|
|
||||||
<h4>Unsupported feature</h4>
|
|
||||||
<p>
|
|
||||||
Due to the limitations of ES5, Proxies cannot be transpiled or polyfilled.
|
|
||||||
See support from various
|
|
||||||
<a href="http://kangax.github.io/compat-table/es6/#Proxy">JavaScript
|
|
||||||
engines</a>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
### Symbols
|
|
||||||
|
|
||||||
Symbols enable access control for object state. Symbols allow properties to be
|
|
||||||
keyed by either `string` (as in ES5) or `symbol`. Symbols are a new primitive
|
|
||||||
type. Optional `name` parameter used in debugging - but is not part of identity.
|
|
||||||
Symbols are unique (like gensym), but not private since they are exposed via
|
|
||||||
reflection features like `Object.getOwnPropertySymbols`.
|
|
||||||
|
|
||||||
```js
|
|
||||||
(function() {
|
|
||||||
|
|
||||||
// module scoped symbol
|
|
||||||
var key = Symbol("key");
|
|
||||||
|
|
||||||
function MyClass(privateData) {
|
|
||||||
this[key] = privateData;
|
|
||||||
}
|
|
||||||
|
|
||||||
MyClass.prototype = {
|
|
||||||
doStuff: function() {
|
|
||||||
... this[key] ...
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
})();
|
|
||||||
|
|
||||||
var c = new MyClass("hello")
|
|
||||||
c["key"] === undefined
|
|
||||||
```
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<h4>Support via polyfill</h4>
|
|
||||||
<p>
|
|
||||||
In order to support Promises you must include the 6to5 Polyfill.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
### Subclassable Built-ins
|
|
||||||
In ES6, built-ins like `Array`, `Date` and DOM `Element`s can be subclassed.
|
|
||||||
|
|
||||||
Object construction for a function named `Ctor` now uses two-phases (both
|
|
||||||
virtually dispatched):
|
|
||||||
|
|
||||||
- Call `Ctor[@@create]` to allocate the object, installing any special behavior
|
|
||||||
- Invoke constructor on new instance to initialize
|
|
||||||
|
|
||||||
The known `@@create` symbol is available via `Symbol.create`. Built-ins now
|
|
||||||
expose their `@@create` explicitly.
|
|
||||||
|
|
||||||
```js
|
|
||||||
// Pseudo-code of Array
|
|
||||||
class Array {
|
|
||||||
constructor(...args) { /* ... */ }
|
|
||||||
static [Symbol.create]() {
|
|
||||||
// Install special [[DefineOwnProperty]]
|
|
||||||
// to magically update 'length'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// User code of Array subclass
|
|
||||||
class MyArray extends Array {
|
|
||||||
constructor(...args) { super(...args); }
|
|
||||||
}
|
|
||||||
|
|
||||||
// Two-phase 'new':
|
|
||||||
// 1) Call @@create to allocate object
|
|
||||||
// 2) Invoke constructor on new instance
|
|
||||||
var arr = new MyArray();
|
|
||||||
arr[1] = 12;
|
|
||||||
arr.length == 2
|
|
||||||
```
|
|
||||||
|
|
||||||
### Math + Number + String + Object APIs
|
|
||||||
|
|
||||||
Many new library additions, including core Math libraries, Array conversion
|
|
||||||
helpers, and Object.assign for copying.
|
|
||||||
|
|
||||||
```js
|
|
||||||
Number.EPSILON
|
|
||||||
Number.isInteger(Infinity) // false
|
|
||||||
Number.isNaN("NaN") // false
|
|
||||||
|
|
||||||
Math.acosh(3) // 1.762747174039086
|
|
||||||
Math.hypot(3, 4) // 5
|
|
||||||
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2
|
|
||||||
|
|
||||||
"abcde".contains("cd") // true
|
|
||||||
"abc".repeat(3) // "abcabcabc"
|
|
||||||
|
|
||||||
Array.from(document.querySelectorAll('*')) // Returns a real Array
|
|
||||||
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
|
|
||||||
[0, 0, 0].fill(7, 1) // [0,7,7]
|
|
||||||
[1,2,3].findIndex(x => x == 2) // 1
|
|
||||||
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
|
|
||||||
["a", "b", "c"].keys() // iterator 0, 1, 2
|
|
||||||
["a", "b", "c"].values() // iterator "a", "b", "c"
|
|
||||||
|
|
||||||
Object.assign(Point, { origin: new Point(0,0) })
|
|
||||||
```
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-warning">
|
|
||||||
<h4>Limited support from polyfill</h4>
|
|
||||||
<p>
|
|
||||||
Most of these APIs are supported by the 6to5 Polyfill. However, certain
|
|
||||||
features are omitted for various reasons (ie.
|
|
||||||
<code>String.prototype.normalize</code> needs a lot of additional code to
|
|
||||||
support). You can find more polyfills
|
|
||||||
<a href="https://github.com/addyosmani/es6-tools#polyfills">here</a>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
### Binary and Octal Literals
|
|
||||||
Two new numeric literal forms are added for binary (`b`) and octal (`o`).
|
|
||||||
|
|
||||||
```js
|
|
||||||
0b111110111 === 503 // true
|
|
||||||
0o767 === 503 // true
|
|
||||||
```
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-warning">
|
|
||||||
<h4>Only supports literal form</h4>
|
|
||||||
<p>
|
|
||||||
6to5 is only able to transform <code>0o767</code> and not
|
|
||||||
<code>Number('0o767')</code>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
|
|
||||||
### Promises
|
|
||||||
|
|
||||||
Promises are a library for asynchronous programming. Promises are a first class
|
|
||||||
representation of a value that may be made available in the future. Promises are
|
|
||||||
used in many existing JavaScript libraries.
|
|
||||||
|
|
||||||
```js
|
|
||||||
function timeout(duration = 0) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
setTimeout(resolve, duration);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
var p = timeout(1000).then(() => {
|
|
||||||
return timeout(2000);
|
|
||||||
}).then(() => {
|
|
||||||
throw new Error("hmm");
|
|
||||||
}).catch(err => {
|
|
||||||
return Promise.all([timeout(100), timeout(200)]);
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<h4>Support via polyfill</h4>
|
|
||||||
<p>
|
|
||||||
In order to support Promises you must include the 6to5 Polyfill.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
### Reflect API
|
|
||||||
|
|
||||||
Full reflection API exposing the runtime-level meta-operations on objects. This
|
|
||||||
is effectively the inverse of the Proxy API, and allows making calls
|
|
||||||
corresponding to the same meta-operations as the proxy traps. Especially useful
|
|
||||||
for implementing proxies.
|
|
||||||
|
|
||||||
```js
|
|
||||||
// No sample yet
|
|
||||||
```
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-danger">
|
|
||||||
<h4>Limited support from polyfill</h4>
|
|
||||||
<p>
|
|
||||||
Core.js only currently supports <code>Reflect.ownKeys</code>, if you would
|
|
||||||
like a much more complete Reflect API, include another polyfill such as
|
|
||||||
<a href="https://github.com/tvcutsem/harmony-reflect">Harmony Reflect</a>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
### Tail Calls
|
|
||||||
|
|
||||||
Calls in tail-position are guaranteed to not grow the stack unboundedly. Makes
|
|
||||||
recursive algorithms safe in the face of unbounded inputs.
|
|
||||||
|
|
||||||
```js
|
|
||||||
function factorial(n, acc = 1) {
|
|
||||||
'use strict';
|
|
||||||
if (n <= 1) return acc;
|
|
||||||
return factorial(n - 1, n * acc);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Stack overflow in most implementations today,
|
|
||||||
// but safe on arbitrary inputs in eS6
|
|
||||||
factorial(100000)
|
|
||||||
```
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-danger">
|
|
||||||
<h4>Unsupported feature</h4>
|
|
||||||
<p>
|
|
||||||
Due to high complexity of transpiling Tail Calls, 6to5 does not currently
|
|
||||||
have them implemented. See
|
|
||||||
<a href="https://github.com/6to5/6to5/issues/256">#256</a>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
---
|
|
||||||
layout: docs
|
|
||||||
title: API
|
|
||||||
description: How to use the Node.js API.
|
|
||||||
permalink: /docs/usage/api/
|
|
||||||
---
|
|
||||||
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var to5 = require('6to5');
|
|
||||||
```
|
|
||||||
|
|
||||||
## to5.transform
|
|
||||||
|
|
||||||
Transforms the passed in `code`.
|
|
||||||
|
|
||||||
```
|
|
||||||
to5.transform(code, [options])
|
|
||||||
```
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
var result = to5.transform('code();', options);
|
|
||||||
result.code;
|
|
||||||
result.map;
|
|
||||||
result.ast;
|
|
||||||
```
|
|
||||||
|
|
||||||
## to5.transformFile
|
|
||||||
|
|
||||||
Asynchronously transforms the entire contents of a file.
|
|
||||||
|
|
||||||
```js
|
|
||||||
to5.transformFile(filename, [options], callback)
|
|
||||||
```
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
to5.transformFile('filename.js', options, function (err, result) {
|
|
||||||
result.code;
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## to5.transformFileSync
|
|
||||||
|
|
||||||
Synchronous version of `to5.transformFile`. Returns the transformed contents of
|
|
||||||
the `filename`.
|
|
||||||
|
|
||||||
```js
|
|
||||||
to5.transformFileSync(filename, [options])
|
|
||||||
```
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
to5.transformFileSync('filename.js', options).code;
|
|
||||||
```
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
---
|
|
||||||
layout: docs
|
|
||||||
title: Browser
|
|
||||||
description: How to transpile in the browser.
|
|
||||||
permalink: /docs/usage/browser/
|
|
||||||
redirect_from: /browser.html
|
|
||||||
---
|
|
||||||
|
|
||||||
<p class="lead">
|
|
||||||
A browser version of 6to5 is available from `browser.js` inside the 6to5
|
|
||||||
directory in an npm release.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-warning">
|
|
||||||
<h4>Not intended for serious use</h4>
|
|
||||||
<p>
|
|
||||||
Compiling in the browser has a fairly limited use case, so if you are
|
|
||||||
working on a production site you should be precompiling your scripts
|
|
||||||
server-side. See <a href="../setup/#build-systems">setup build systems</a>
|
|
||||||
for more information.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
## Script tags
|
|
||||||
|
|
||||||
When the `browser.js` file is included all scripts with the type
|
|
||||||
`text/ecmascript-6` and `text/6to5` are automatically compiled and ran.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<script src="node_modules/6to5/browser.js"></script>
|
|
||||||
<script type="text/6to5">
|
|
||||||
class Test {
|
|
||||||
test() {
|
|
||||||
return 'test';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var test = new Test;
|
|
||||||
test.test(); // "test"
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
Programmatically transpile and execute strings of ES6 code.
|
|
||||||
|
|
||||||
See [options](#options) for additional documentation.
|
|
||||||
|
|
||||||
### `to5.transform(code, [opts])`
|
|
||||||
|
|
||||||
```js
|
|
||||||
to5.transform('class Test {}').code;
|
|
||||||
```
|
|
||||||
|
|
||||||
### `to5.run(code, [opts])`
|
|
||||||
|
|
||||||
````js
|
|
||||||
to5.run('class Test {}');
|
|
||||||
````
|
|
||||||
@ -1,99 +0,0 @@
|
|||||||
---
|
|
||||||
layout: docs
|
|
||||||
title: CLI
|
|
||||||
description: How to use the CLI tools.
|
|
||||||
permalink: /docs/usage/cli/
|
|
||||||
redirect_from: /usage.html
|
|
||||||
---
|
|
||||||
|
|
||||||
<p class="lead">
|
|
||||||
6to5 comes with a built-in CLI which can be used to compile files from the
|
|
||||||
command line.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
Using [npm](https://www.npmjs.com/) you can install 6to5 globally, making it
|
|
||||||
available from the command line.
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ npm install --global 6to5
|
|
||||||
```
|
|
||||||
|
|
||||||
## 6to5
|
|
||||||
|
|
||||||
#### Compile Files
|
|
||||||
|
|
||||||
Compile the file `script.js` and **output to stdout**.
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ 6to5 script.js
|
|
||||||
# output...
|
|
||||||
```
|
|
||||||
|
|
||||||
If you would like to **output to a file** you may use `--out-file` or `-o`.
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ 6to5 script.js --out-file script-compiled.js
|
|
||||||
```
|
|
||||||
|
|
||||||
### Compile with Source Maps
|
|
||||||
|
|
||||||
If you would then like to add a **source map file** you can use
|
|
||||||
`--source-maps` or `-s`. [Learn more about source maps](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/).
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ 6to5 script.js --out-file script-compiled.js --source-maps
|
|
||||||
```
|
|
||||||
|
|
||||||
If you would rather have **inline source maps**, you may use
|
|
||||||
`--source-maps-inline` or `-t`.
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ 6to5 script.js --out-file script-compiled.js --source-maps-inline
|
|
||||||
```
|
|
||||||
|
|
||||||
### Compile Directories
|
|
||||||
|
|
||||||
Compile the entire `src` directory and output it to the `lib` directory.
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ 6to5 src --out-dir lib
|
|
||||||
```
|
|
||||||
|
|
||||||
Compile the entire `src` directory and output it to the one concatenated file.
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ 6to5 src --out-file script-compiled.js
|
|
||||||
```
|
|
||||||
|
|
||||||
### Piping Files
|
|
||||||
|
|
||||||
Pipe a file in via stdin and output it to `script-compiled.js`
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ 6to5 --out-file script-compiled.js < script.js
|
|
||||||
```
|
|
||||||
|
|
||||||
## 6to5-node
|
|
||||||
|
|
||||||
6to5 comes with a second CLI which works exactly the same as Node.js's CLI, only
|
|
||||||
it will compile ES6 code before running it.
|
|
||||||
|
|
||||||
Launch a REPL (Read-Eval-Print-Loop).
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ 6to5-node
|
|
||||||
```
|
|
||||||
|
|
||||||
Evaluate code.
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ 6to5-node -e "class Test { }"
|
|
||||||
```
|
|
||||||
|
|
||||||
Compile and run `test.js`.
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ 6to5-node test
|
|
||||||
```
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
---
|
|
||||||
layout: docs
|
|
||||||
title: Experimental
|
|
||||||
description: How to use experimental ES7 features.
|
|
||||||
permalink: /docs/usage/experimental/
|
|
||||||
redirect_from: /experimental.html
|
|
||||||
---
|
|
||||||
|
|
||||||
> 6to5 also has experimental support for ES7 proposals.
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-danger">
|
|
||||||
<h4>Subject to change</h4>
|
|
||||||
<p>
|
|
||||||
These proposals are subject to change so <strong><em>use with extreme
|
|
||||||
caution</em></strong>. 6to5 may update without warning in order to track spec
|
|
||||||
changes. Please do not use them in production applications.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
#### Usage
|
|
||||||
|
|
||||||
```js
|
|
||||||
$ 6to5 --experimental
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
to5.transform('code', { experimental: true });
|
|
||||||
```
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
---
|
|
||||||
layout: docs
|
|
||||||
title: JSX
|
|
||||||
description: How to use JSX.
|
|
||||||
permalink: /docs/usage/jsx/
|
|
||||||
---
|
|
||||||
|
|
||||||
<p class="lead">
|
|
||||||
6to5 has built-in support for React v0.12. Tags are automatically transformed
|
|
||||||
to their equivalent <code>React.createElement(...)</code> and
|
|
||||||
<code>displayName</code> is automatically inferred and added to all
|
|
||||||
<code>React.createClass</code> calls.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Blacklist
|
|
||||||
|
|
||||||
To disable this behaviour add react to your blacklist:
|
|
||||||
|
|
||||||
````js
|
|
||||||
to5.transform("code", { blacklist: ["react"] });
|
|
||||||
$ 6to5 --blacklist react
|
|
||||||
```
|
|
||||||
@ -1,260 +0,0 @@
|
|||||||
---
|
|
||||||
layout: docs
|
|
||||||
title: Modules
|
|
||||||
description: How to use module formatters.
|
|
||||||
permalink: /docs/usage/modules/
|
|
||||||
redirect_from: /modules.html
|
|
||||||
---
|
|
||||||
|
|
||||||
<p class="lead">
|
|
||||||
6to5 has the ability to transpile ES6 modules to the module system of your
|
|
||||||
choice. You can even easily create your own.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ 6to5 --modules common script.js
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
to5.transform('import "foo";', { modules: "common" });
|
|
||||||
```
|
|
||||||
|
|
||||||
## Formats
|
|
||||||
|
|
||||||
### Common (Default)
|
|
||||||
|
|
||||||
**Usage**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ 6to5 --modules common
|
|
||||||
```
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default test;
|
|
||||||
|
|
||||||
export {test};
|
|
||||||
export var test = 5;
|
|
||||||
|
|
||||||
import "foo";
|
|
||||||
|
|
||||||
import foo from "foo";
|
|
||||||
import * as foo from "foo";
|
|
||||||
|
|
||||||
import {bar} from "foo";
|
|
||||||
import {foo as bar} from "foo";
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
var _interopRequire = function (obj) {
|
|
||||||
return obj && (obj["default"] || obj);
|
|
||||||
};
|
|
||||||
|
|
||||||
exports = module.exports = test;
|
|
||||||
|
|
||||||
exports.test = test;
|
|
||||||
var test = exports.test = 5;
|
|
||||||
|
|
||||||
require("foo");
|
|
||||||
|
|
||||||
var foo = _interopRequire(require("foo"));
|
|
||||||
|
|
||||||
var foo = require("foo");
|
|
||||||
|
|
||||||
var bar = require("foo").bar;
|
|
||||||
var bar = require("foo").foo;
|
|
||||||
```
|
|
||||||
|
|
||||||
### AMD
|
|
||||||
|
|
||||||
**Usage**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ 6to5 --modules amd
|
|
||||||
```
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
import foo from "foo";
|
|
||||||
|
|
||||||
export function bar() {
|
|
||||||
return foo("foobar");
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
define(["exports", "foo"], function (exports, _foo) {
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
var _interopRequire = function (obj) {
|
|
||||||
return obj && (obj["default"] || obj);
|
|
||||||
};
|
|
||||||
|
|
||||||
exports.bar = bar;
|
|
||||||
var foo = _interopRequire(_foo);
|
|
||||||
|
|
||||||
function bar() {
|
|
||||||
return foo("foobar");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
You can optionally specify to include the module id (using the `--amd-module-id`
|
|
||||||
argument):
|
|
||||||
|
|
||||||
```js
|
|
||||||
define("filename", ["exports", "foo"], function (exports, _foo) {})
|
|
||||||
```
|
|
||||||
|
|
||||||
### System
|
|
||||||
|
|
||||||
**Usage**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ 6to5 --modules system
|
|
||||||
```
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
import foo from "foo";
|
|
||||||
|
|
||||||
export function bar() {
|
|
||||||
return foo("foobar");
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
System.register("bar", ["foo"], function (_export) {
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
var __moduleName = "bar";
|
|
||||||
|
|
||||||
var foo;
|
|
||||||
function bar() {
|
|
||||||
return foo("foobar");
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
setters: [function (m) {
|
|
||||||
foo = m.default;
|
|
||||||
}],
|
|
||||||
execute: function () {
|
|
||||||
_export("bar", bar);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### UMD
|
|
||||||
|
|
||||||
**Usage**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ 6to5 --modules umd
|
|
||||||
```
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
import foo from "foo";
|
|
||||||
|
|
||||||
export function bar() {
|
|
||||||
return foo("foobar");
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
(function (factory) {
|
|
||||||
if (typeof define === "function" && define.amd) {
|
|
||||||
define(["exports", "foo"], factory);
|
|
||||||
} else if (typeof exports !== "undefined") {
|
|
||||||
factory(exports, require("foo"));
|
|
||||||
}
|
|
||||||
})(function (exports, _foo) {
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
var _interopRequire = function (obj) {
|
|
||||||
return obj && (obj["default"] || obj);
|
|
||||||
};
|
|
||||||
|
|
||||||
exports.bar = bar;
|
|
||||||
var foo = _interopRequire(_foo);
|
|
||||||
|
|
||||||
function bar() {
|
|
||||||
return foo("foobar");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### Ignore
|
|
||||||
|
|
||||||
**Usage**
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ 6to5 --modules ignore
|
|
||||||
```
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
import foo from "foo";
|
|
||||||
|
|
||||||
export function bar() {
|
|
||||||
return foo("foobar");
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
function bar() {
|
|
||||||
return foo("foobar");
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Custom
|
|
||||||
|
|
||||||
You can alternatively specify module names instead of one of the built-in types.
|
|
||||||
|
|
||||||
**Usage**
|
|
||||||
|
|
||||||
```js
|
|
||||||
$ 6to5 --modules custom-module-formatter
|
|
||||||
```
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
**`node_modules/custom-module-formatter/index.js`**
|
|
||||||
|
|
||||||
```js
|
|
||||||
module.exports = ModuleFormatter;
|
|
||||||
|
|
||||||
function ModuleFormatter() {}
|
|
||||||
|
|
||||||
ModuleFormatter.prototype.transform = function (ast) {
|
|
||||||
// this is ran after all transformers have had their turn at modifying the ast
|
|
||||||
// feel free to modify this however
|
|
||||||
};
|
|
||||||
|
|
||||||
ModuleFormatter.prototype.importDeclaration = function (node, nodes) {
|
|
||||||
// node is an ImportDeclaration
|
|
||||||
};
|
|
||||||
|
|
||||||
ModuleFormatter.prototype.importSpecifier = function (specifier, node, nodes) {
|
|
||||||
// specifier is an ImportSpecifier
|
|
||||||
// node is an ImportDeclaration
|
|
||||||
};
|
|
||||||
|
|
||||||
ModuleFormatter.prototype.exportDeclaration = function (node, nodes) {
|
|
||||||
// node is an ExportDeclaration
|
|
||||||
};
|
|
||||||
|
|
||||||
ModuleFormatter.prototype.exportSpecifier = function (specifier, node, nodes) {
|
|
||||||
// specifier is an ExportSpecifier
|
|
||||||
// node is an ExportDeclaration
|
|
||||||
};
|
|
||||||
```
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
---
|
|
||||||
layout: docs
|
|
||||||
title: Options
|
|
||||||
description: Options for 6to5 transpiling.
|
|
||||||
permalink: /docs/usage/options/
|
|
||||||
---
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
```js
|
|
||||||
to5.transform(code, options);
|
|
||||||
```
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ 6to5 --name=value
|
|
||||||
```
|
|
||||||
|
|
||||||
## Options
|
|
||||||
|
|
||||||
| Option | Default | Description |
|
|
||||||
| ------------------ | -------------------- | ------------------------------- |
|
|
||||||
| `filename` | `"unknown"` | Filename for use in errors etc. |
|
|
||||||
| `fileNameRelative` | `(filename)` | Filename relative to `sourceRoot`. |
|
|
||||||
| `blacklist` | `[]` | Array of transformers to **exclude**. Run `6to5 --help` to see a full list of transformers. |
|
|
||||||
| `whitelist` | `[]` | Array of transformers to **only** use. Run `6to5 --help` to see a full list of transformers. |
|
|
||||||
| `optional` | `[]` | Array of transformers to [optionally](/docs/usage/transformers#optional-transformers) use. Run `6to5 --help` to see a full list of module formatters. |
|
|
||||||
| `modules` | `"common"` | Which module formatter to use. Run `6to5 --help` to see a full list of module formatters. |
|
|
||||||
| `sourceMap` | `false` | 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. |
|
|
||||||
| `sourceMapName` | `(filenameRelative)` | Set `file` on returned source map. |
|
|
||||||
| `sourceFileName` | `(filenameRelative)` | Set `sources[0]` on returned source map. |
|
|
||||||
| `sourceRoot` | `(moduleRoot)` | The root from which all sources are relative. |
|
|
||||||
| `moduleRoot` | `(sourceRoot)` | Optional prefix for the AMD module formatter that will be prepend to the filename on module definitions. |
|
|
||||||
| `moduleIds` | `false` | If truthy, insert an explicit id for modules. By default, all modules are anonymous. (Not available for `common` modules) |
|
|
||||||
| `runtime` | `false` | Optionally replace all 6to5 helper declarations with a referenece to this variable. If set to `true` then the default namespace is used `to5Runtime`. |
|
|
||||||
| `comments` | `true` | Output comments in generated output. |
|
|
||||||
| `experimental` | `false` | Enable support for experimental ES7 features. |
|
|
||||||
@ -1,161 +0,0 @@
|
|||||||
---
|
|
||||||
layout: docs
|
|
||||||
title: Playground
|
|
||||||
description: How to use the playground.
|
|
||||||
permalink: /docs/usage/playground/
|
|
||||||
redirect_from: /playground.html
|
|
||||||
---
|
|
||||||
|
|
||||||
> Playground is a proving ground for language ideas.
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-danger">
|
|
||||||
<h4>Unofficial</h4>
|
|
||||||
<p>
|
|
||||||
These features are in no way endorsed by Ecma International and are not a
|
|
||||||
part of any ECMAScript standard, nor are they necessarily on track to become
|
|
||||||
part of any standard. <strong><em>Use with extreme caution</em></strong>.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<h4>Proposal Authors</h4>
|
|
||||||
<p>
|
|
||||||
If you are actively working on an
|
|
||||||
<a href="https://github.com/tc39/ecma262">ECMAScript proposal</a>, this is a
|
|
||||||
good place to get your ideas implemented with so that they may be tested
|
|
||||||
with all of the latest language and API features.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Please feel free to <a href="https://github.com/6to5/6to5/issues/new">open
|
|
||||||
an issue</a> on the 6to5 repository with your WIP spec, and we can discuss
|
|
||||||
getting it implemented. Be sure to include as much information as possible.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
```js
|
|
||||||
$ 6to5 --playground
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
to5.transform('code', { playground: true });
|
|
||||||
```
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<h4>Enables experimental</h4>
|
|
||||||
<p>
|
|
||||||
Enabling playground also enables experimental support.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
## Features
|
|
||||||
|
|
||||||
### Memoization assignment operator
|
|
||||||
|
|
||||||
The memoization assignment operator allows you to lazily set an object property.
|
|
||||||
It checks whether there's a property defined on the object and if there isn't
|
|
||||||
then the right hand value is set.
|
|
||||||
|
|
||||||
This means that `obj.x` in the following `var x = { x: undefined }; obj.x ?= 2;``
|
|
||||||
will still be `undefined` because it's already been defined on the object.
|
|
||||||
|
|
||||||
**Uses**
|
|
||||||
|
|
||||||
```js
|
|
||||||
var obj = {};
|
|
||||||
obj.x ?= 2;
|
|
||||||
obj.x; // 2
|
|
||||||
|
|
||||||
obj = { x: 1 };
|
|
||||||
obj.x ?= 2;
|
|
||||||
obj.x; // 1
|
|
||||||
|
|
||||||
obj = { x: undefined }
|
|
||||||
obj.x ?= 2;
|
|
||||||
obj.x; // undefined
|
|
||||||
```
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
var obj = {};
|
|
||||||
obj.x ?= 2;
|
|
||||||
```
|
|
||||||
|
|
||||||
is equivalent to
|
|
||||||
|
|
||||||
```js
|
|
||||||
var obj = {};
|
|
||||||
if (!Object.prototype.hasOwnProperty.call(obj, 'x')) obj.x = 2;
|
|
||||||
```
|
|
||||||
|
|
||||||
### Method binding
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var fn = obj#method;
|
|
||||||
var fn = obj#method("foob");
|
|
||||||
```
|
|
||||||
|
|
||||||
is equivalent to
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var fn = obj.method.bind(obj);
|
|
||||||
var fn = obj.method.bind(obj, "foob");
|
|
||||||
```
|
|
||||||
|
|
||||||
### Method binding function shorthand
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
["foo", "bar"].map(#toUpperCase); // ["FOO", "BAR"]
|
|
||||||
[1.1234, 23.53245, 3].map(#toFixed(2)); // ["1.12", "23.53", "3.00"]
|
|
||||||
```
|
|
||||||
|
|
||||||
equivalent to
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
["foo", "bar"].map(function (val) { return val.toUpperCase(); });
|
|
||||||
[1.1234, 23.53245, 3].map(function (val) { return val.toFixed(2); });
|
|
||||||
```
|
|
||||||
|
|
||||||
### Object getter memoization
|
|
||||||
|
|
||||||
```js
|
|
||||||
var foo = {
|
|
||||||
memo bar() {
|
|
||||||
return complex();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
class Foo {
|
|
||||||
memo bar() {
|
|
||||||
return complex();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
is equivalent to
|
|
||||||
|
|
||||||
```js
|
|
||||||
var foo = {
|
|
||||||
get bar() {
|
|
||||||
return Object.defineProperty(this, "bar", {
|
|
||||||
value: complex(),
|
|
||||||
enumerable: true,
|
|
||||||
configurable: true,
|
|
||||||
writable: true
|
|
||||||
}).bar;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
class Foo {
|
|
||||||
get bar() {
|
|
||||||
return Object.defineProperty(this, "bar", {
|
|
||||||
value: complex(),
|
|
||||||
enumerable: true,
|
|
||||||
configurable: true,
|
|
||||||
writable: true
|
|
||||||
}).bar;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
---
|
|
||||||
layout: docs
|
|
||||||
title: Polyfill
|
|
||||||
description: How to use the Polyfill.
|
|
||||||
permalink: /docs/usage/polyfill/
|
|
||||||
---
|
|
||||||
|
|
||||||
<p class="lead">
|
|
||||||
6to5 includes a polyfill that includes a custom
|
|
||||||
<a href="https://github.com/facebook/regenerator/blob/master/runtime.js">regenerator runtime</a>
|
|
||||||
and <a href="https://github.com/zloirock/core-js">core.js</a>.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
This will emulate a full ES6 environment. This polyfill is automatically loaded
|
|
||||||
when using `6to5-node` and `6to5/register`.
|
|
||||||
|
|
||||||
## Usage in Node/Browserify
|
|
||||||
|
|
||||||
You need to include the polyfill require at the top the **entry point** to
|
|
||||||
your application.
|
|
||||||
|
|
||||||
```js
|
|
||||||
require('6to5/polyfill');
|
|
||||||
```
|
|
||||||
|
|
||||||
Fortunately, this is automatically loaded when using:
|
|
||||||
|
|
||||||
```js
|
|
||||||
require('6to5/register');
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage in Browser
|
|
||||||
|
|
||||||
Available from the `browser-polyfill.js` file within the 6to5 directory of an
|
|
||||||
npm release. This needs to be included **before** all your compiled 6to5 code.
|
|
||||||
You can either prepend it to your compiled code or include it in a `<script>`
|
|
||||||
before it.
|
|
||||||
|
|
||||||
**NOTE:** Do not `require` this via browserify etc, use `6to5/polyfill`.
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-warning">
|
|
||||||
<h4>Polyfills are not perfect</h4>
|
|
||||||
<p>
|
|
||||||
Due to limitations in various ES5 environments not every polyfill will work
|
|
||||||
in every environment.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-warning">
|
|
||||||
<h4>Certain polyfills not included</h4>
|
|
||||||
<p>
|
|
||||||
Certain polyfills are too large/complex for their implemented features to
|
|
||||||
justify including them for all builds. You may have to include additional
|
|
||||||
polyfills for a subset of ES6 features.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
---
|
|
||||||
layout: docs
|
|
||||||
title: Require Hook
|
|
||||||
description: How to use the require hook.
|
|
||||||
permalink: /docs/usage/require/
|
|
||||||
---
|
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ npm install 6to5
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
```js
|
|
||||||
require('6to5/register');
|
|
||||||
```
|
|
||||||
|
|
||||||
All subsequent files required by node with the extensions `.es6`, `.es`, and
|
|
||||||
`.js` will be transformed by 6to5. The polyfill specified in Polyfill is also
|
|
||||||
required.
|
|
||||||
|
|
||||||
**NOTE:** By default all requires to `node_modules` will be ignored. You can
|
|
||||||
override this by passing an ignore regex via:
|
|
||||||
|
|
||||||
```js
|
|
||||||
require('6to5/register')({
|
|
||||||
// This will override `node_modules` ignoring - you can alternatively pass
|
|
||||||
// a regex
|
|
||||||
ignore: false
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## Register Options
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
require('6to5/register')({
|
|
||||||
// Optional ignore regex - if any filenames **do** match this regex then they
|
|
||||||
// aren't compiled
|
|
||||||
ignore: /regex/,
|
|
||||||
|
|
||||||
// Optional only regex - if any filenames **don't** match this regex then they
|
|
||||||
// aren't compiled
|
|
||||||
only: /my_es6_folder/,
|
|
||||||
|
|
||||||
// See options above for usage
|
|
||||||
whitelist: [],
|
|
||||||
blacklist: [],
|
|
||||||
|
|
||||||
// This will remove the currently hooked extensions of .es6 and .js so you'll
|
|
||||||
// have to add them back if you want them to be used again.
|
|
||||||
extensions: ['.js', '.es6']
|
|
||||||
});
|
|
||||||
```
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
---
|
|
||||||
layout: docs
|
|
||||||
title: Optional Runtime
|
|
||||||
description: How to use the optional runtime.
|
|
||||||
permalink: /docs/usage/runtime/
|
|
||||||
---
|
|
||||||
|
|
||||||
## Details
|
|
||||||
|
|
||||||
6to5 has a few helper functions that'll be placed at the top of the generated
|
|
||||||
code if needed so it's not inlined multiple times throughout that file. This may
|
|
||||||
become an issue if you have multiple files, especially when you're sending them
|
|
||||||
to the browser. gzip alleviates most of this concern but it's still not ideal.
|
|
||||||
|
|
||||||
You can tell 6to5 to not place any declarations at the top of your files and
|
|
||||||
instead just point them to a reference contained within the runtime.
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
```js
|
|
||||||
$ 6to5 --runtime
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
to5.transform('code', { runtime: true });
|
|
||||||
```
|
|
||||||
|
|
||||||
### Getting the runtime
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ 6to5-runtime
|
|
||||||
```
|
|
||||||
|
|
||||||
or
|
|
||||||
|
|
||||||
```js
|
|
||||||
require('6to5').runtime();
|
|
||||||
```
|
|
||||||
|
|
||||||
or from an npm release in `runtime.js` from the 6to5 directory.
|
|
||||||
|
|
||||||
### Customising namespace
|
|
||||||
|
|
||||||
You can also customise the runtime namespace by passing an optional namespace
|
|
||||||
argument:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ 6to5-runtime myCustomNamespace
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
require("6to5").runtime('myCustomNamespace');
|
|
||||||
```
|
|
||||||
|
|
||||||
See [Options - runtime](../options) for documentation on changing the reference in
|
|
||||||
generated code.
|
|
||||||
@ -1,292 +0,0 @@
|
|||||||
---
|
|
||||||
layout: docs
|
|
||||||
title: Transformers
|
|
||||||
description: What are the various transformers?
|
|
||||||
permalink: /docs/usage/transformers/
|
|
||||||
---
|
|
||||||
|
|
||||||
## Standard
|
|
||||||
|
|
||||||
- [arrowFunctions](/docs/tour#arrows)
|
|
||||||
- [classes](/docs/tour#classes)
|
|
||||||
- [computedPropertyNames](/docs/tour#enhanced-object-literals)
|
|
||||||
- [constants](/docs/tour#let-const)
|
|
||||||
- [defaultParameters](/docs/tour#default-spread-rest)
|
|
||||||
- [destructuring](/docs/tour#destructuring)
|
|
||||||
- [forOf](/docs/tour#iterators-for-of)
|
|
||||||
- [generators](/docs/tour#generators)
|
|
||||||
- [letScoping](/docs/tour#let-const)
|
|
||||||
- [modules](/docs/tour#modules)
|
|
||||||
- [propertyMethodAssignment](/docs/tour#enhanced-object-literals)
|
|
||||||
- [propertyNameShorthand](/docs/tour#enhanced-object-literals)
|
|
||||||
- [restParameters](/docs/tour#default-spread-rest)
|
|
||||||
- [spread](/docs/tour#default-spread-rest)
|
|
||||||
- [templateLiterals](/docs/tour#template-strings)
|
|
||||||
- [unicodeRegex](/docs/tour#unicode)
|
|
||||||
|
|
||||||
## Experimental
|
|
||||||
|
|
||||||
- [abstractReferences](https://github.com/zenparsing/es-abstract-refs)
|
|
||||||
- [arrayComprehension](/docs/tour#comprehensions)
|
|
||||||
- [generatorComprehension](/docs/tour#comprehensions)
|
|
||||||
- [exponentiationOperator](https://github.com/rwaldron/exponentiation-operator)
|
|
||||||
- [objectSpread](https://github.com/sebmarkbage/ecmascript-rest-spread)
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-warning">
|
|
||||||
<h4>Disabled by default</h4>
|
|
||||||
<p>
|
|
||||||
These are only usable if you enable experimental support. See <a href="/docs/usage/playground">experimental usage</a> for information.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
## Other
|
|
||||||
|
|
||||||
### specMemberExpressionLiterals
|
|
||||||
|
|
||||||
Transform keywords and reserved word properties in member expressions into string literals:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
obj.default = "";
|
|
||||||
obj.throw = "";
|
|
||||||
obj.case = "";
|
|
||||||
obj.delete = "";
|
|
||||||
```
|
|
||||||
|
|
||||||
to
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
obj["default"] = "";
|
|
||||||
obj["throw"] = "";
|
|
||||||
obj["case"] = "";
|
|
||||||
obj["delete"] = "";
|
|
||||||
```
|
|
||||||
|
|
||||||
### specPropertyLiterals
|
|
||||||
|
|
||||||
Transforms keywords and reserved word property keys into string literals:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var obj = {
|
|
||||||
default: "",
|
|
||||||
throw: "",
|
|
||||||
case: "",
|
|
||||||
delete: ""
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
to
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var obj = {
|
|
||||||
"default": "",
|
|
||||||
"throw": "",
|
|
||||||
"case": "",
|
|
||||||
"delete": ""
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### useStrict
|
|
||||||
|
|
||||||
ES6 modules are strict mode by default, this is a restricted variant of JavaScript
|
|
||||||
that enables more optimisations and better errors.
|
|
||||||
|
|
||||||
See the MDN article
|
|
||||||
[Strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)
|
|
||||||
for more information.
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-danger">
|
|
||||||
<h4>Not recommended</h4>
|
|
||||||
<p>
|
|
||||||
It's highly recommended not to disable this transformer.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
## Playground
|
|
||||||
|
|
||||||
- [memoizationOperator](/docs/usage/playground#memoization-assignment-operator)
|
|
||||||
- [methodBinding](/docs/usage/playground#method-binding)
|
|
||||||
- [objectGetterMemoization](/docs/usage/playground#object-getter-memoization)
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-warning">
|
|
||||||
<h4>Disabled by default</h4>
|
|
||||||
<p>
|
|
||||||
These are only usable if you enable playground support. See <a href="/docs/usage/playground">playground usage</a> for information.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
### Other
|
|
||||||
|
|
||||||
#### react
|
|
||||||
|
|
||||||
## Optional transformers
|
|
||||||
|
|
||||||
6to5 provides various optional transformers for those of you who want
|
|
||||||
to take your code that extra mile.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
require("6to5").transform("code", { optional: ["transformerName"] });
|
|
||||||
```
|
|
||||||
|
|
||||||
```sh
|
|
||||||
6to5 --optional transformerName
|
|
||||||
```
|
|
||||||
|
|
||||||
### asyncToGenerator
|
|
||||||
|
|
||||||
Transforms async functions to a generator that uses a helper.
|
|
||||||
This is useful if you don't want to use `regenerator` or `bluebird`.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
async function foo() {
|
|
||||||
await bar();
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
to
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var _asyncToGenerator = function (fn) {
|
|
||||||
...
|
|
||||||
};
|
|
||||||
|
|
||||||
var foo = _asyncToGenerator(function* () {
|
|
||||||
yield bar();
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### bluebirdCoroutines
|
|
||||||
|
|
||||||
Transforms async functions to their equivalent bluebird method.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
async function foo() {
|
|
||||||
await bar();
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
to
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var Bluebird = require("bluebird");
|
|
||||||
|
|
||||||
var foo = Bluebird.coroutine(function* () {
|
|
||||||
yield bar();
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### coreAliasing
|
|
||||||
|
|
||||||
6to5 will uses various ES6 methods around your code such as `Array.from` and
|
|
||||||
`Object.assign`. This usually means that the use of a global polluting
|
|
||||||
polyfill is required, fortunately there's the `coreAliasing` transformer.
|
|
||||||
|
|
||||||
This transformer transforms code such as
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var arr = Array.from("foobar"); // ["f", "o", "o", "b", "a", "r"]
|
|
||||||
```
|
|
||||||
|
|
||||||
into
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var core = require("core-js");
|
|
||||||
|
|
||||||
var arr = core.Array.from("foobar");
|
|
||||||
```
|
|
||||||
|
|
||||||
Not only that but it can also transform iterator construction so
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var iterator = "foobar"[Symbol.iterator]();
|
|
||||||
iterator.next(); // { done: false, value: "f" }
|
|
||||||
```
|
|
||||||
|
|
||||||
becomes
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var core = require("core-js");
|
|
||||||
|
|
||||||
var iterator = core.$for.getIterator("foobar");
|
|
||||||
```
|
|
||||||
|
|
||||||
This means that you can use **every** single 6to5 feature without a
|
|
||||||
globally polluting polyfill, minus [caveats](/docs/caveats) and all.
|
|
||||||
|
|
||||||
This is fantastic for library authors as it means that you can write
|
|
||||||
your libraries with 6to5 and utilise all ES6 methods and syntax
|
|
||||||
without polluting your users global scope that may lead to collisions
|
|
||||||
and nasty bugs.
|
|
||||||
|
|
||||||
<blockquote class="to5-callout to5-callout-info">
|
|
||||||
<h4></h4>
|
|
||||||
<p>
|
|
||||||
If you use this transformer then the package <code>core-js</code> is required. Run <code>npm install core-js --save</code> to add it to your current node/browserify project.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
### protoToAssign
|
|
||||||
|
|
||||||
The `protoToAssign` optional transformer will transform all `__proto__`
|
|
||||||
assignments to a method that will do a shallow copy of all properties.
|
|
||||||
|
|
||||||
This means that the following **will** work:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var foo = { a: 1 };
|
|
||||||
var bar = { b: 2 };
|
|
||||||
bar.__proto__ = foo;
|
|
||||||
bar.a; // 1
|
|
||||||
bar.b; // 2
|
|
||||||
```
|
|
||||||
|
|
||||||
however the following **will not**:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var foo = { a: 1 };
|
|
||||||
var bar = { b: 2 };
|
|
||||||
bar.__proto__ = foo;
|
|
||||||
bar.a; // 1
|
|
||||||
foo.a = 2;
|
|
||||||
bar.a; // 1 - should be 2 but remember that nothing is bound and it's a straight copy
|
|
||||||
```
|
|
||||||
|
|
||||||
This is a case that you have to be aware of if you intend to use this
|
|
||||||
transformer.
|
|
||||||
|
|
||||||
### typeofSymbol
|
|
||||||
|
|
||||||
ES6 introduces a new native type called [symbols](/docs/tour#symbols).
|
|
||||||
This transformer wraps all `typeof` expressions with a method that
|
|
||||||
replicates native behaviour. (ie. returning "symbol" for symbols)
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
typeof Symbol() === "symbol";
|
|
||||||
```
|
|
||||||
|
|
||||||
to
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var _typeof = function (obj) {
|
|
||||||
return obj && obj.constructor === Symbol ? "symbol" : typeof obj;
|
|
||||||
};
|
|
||||||
|
|
||||||
_typeof(Symbol()) === "symbol";
|
|
||||||
```
|
|
||||||
|
|
||||||
### undefinedToVoid
|
|
||||||
|
|
||||||
Some JavaScript implementations allow `undefined` to be overwritten, this
|
|
||||||
may lead to peculiar bugs that are extremely hard to track down.
|
|
||||||
|
|
||||||
This transformer transforms `undefined` into `void 0` which returns `undefined`
|
|
||||||
regardless of if it's been reassigned.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
foo === undefined;
|
|
||||||
```
|
|
||||||
|
|
||||||
to
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
foo === void 0;
|
|
||||||
```
|
|
||||||
Loading…
x
Reference in New Issue
Block a user