move docs to 6to5.github.io repo
This commit is contained in:
Sebastian McKenzie
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