Skip to content

Latest commit

 

History

History
370 lines (326 loc) · 18.1 KB

index.md

File metadata and controls

370 lines (326 loc) · 18.1 KB
layout custom_js third_party_js
default
index.js
//cdn.rawgit.com/thejameskyle/slick/lazy-load-responsive-2/slick/slick.min.js
//unpkg.com/babel-standalone@6/babel.min.js
//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js

Babel is a JavaScript compiler.

Use next generation JavaScript, today.

<div class="hero-repl" hidden>
  <div class="hero-repl__editor">
    <div class="hero-repl__pane hero-repl__pane--left">
      <h3>Put in next-gen JavaScript</h3>
      <div id="hero-repl-in" class="hero-repl__code"></div>
    </div>

    <div class="hero-repl__pane hero-repl__pane--right">
      <h3>Get browser-compatible JavaScript out</h3>
      <div id="hero-repl-out" class="hero-repl__code"></div>
      <div class="hero-repl__error"></div>
    </div>
  </div>
  <div class="hero-repl__footer">
    <a href="http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=latest%2Creact%2Cstage-2&experimental=false&loose=false&spec=false&code=%5B1%2C2%2C3%5D.map(n%20%3D%3E%20n%20%2B%201)%3B&playground=true">
      Check out our REPL to experiment more with Babel!
    </a>
  </div>
</div>

{% assign latest_post = site.posts.first %}

<div class="hero-actions">
  <div class="hero-actions-blog">
    <a href="{{ latest_post.url }}">
      <span class="hero-actions-blog__label">Latest From Our Blog:</span>
      <span class="hero-actions-blog__post">{{ latest_post.title }}</span>
    </a>
  </div>
</div>

Ready to get started?

<div class="col-lg-6">
  <h3>Install the Babel CLI and a preset</h3>
  <div class="text-left">
```shell npm install --save-dev babel-cli babel-preset-env ```

Create a .babelrc file (or use your package.json)

```json { "presets": ["env"] } ``` 
<p>
  For more information on setting up Babel with your build system, IDE,
  and more, check out our <a href="/docs/setup">interactive setup
  guide</a>.
</p>

ES2015 and beyond

Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support. Check out our env preset to get started. 

  <p>You can install this preset with</p>
```shell npm install --save-dev babel-preset-env ```

and add "env" to your .babelrc presets array.

<div class="col-md-6">
  <div class="col-md-6">
    <ul class="babel-tick-list">
      <li><a href="/docs/plugins/transform-es2015-arrow-functions">Arrow functions</a></li>
      <li><a href="/docs/plugins/syntax-async-functions">Async functions</a></li>
      <li><a href="/docs/plugins/syntax-async-generators">Async generator functions</a></li>
      <li><a href="/docs/plugins/transform-es2015-block-scoping">Block scoping</a></li>
      <li><a href="/docs/plugins/transform-es2015-block-scoped-functions">Block scoped functions</a></li>
      <li><a href="/docs/plugins/transform-es2015-classes">Classes</a></li>
      <li><a href="/docs/plugins/transform-class-properties">Class properties</a></li>
      <li><a href="/docs/plugins/transform-es2015-computed-properties">Computed property names</a></li>
      <li><a href="/docs/plugins/check-es2015-constants">Constants</a></li>
      <li><a href="/docs/plugins/transform-decorators">Decorators</a></li>
      <li><a href="/docs/plugins/transform-es2015-parameters">Default parameters</a></li>
      <li><a href="/docs/plugins/transform-es2015-destructuring">Destructuring</a></li>
      <li><a href="/docs/plugins/transform-do-expressions">Do expressions</a></li>
      <li><a href="/docs/plugins/transform-exponentiation-operator">Exponentiation operator</a></li>
      <li><a href="/docs/plugins/transform-es2015-for-of">For-of</a></li>
    </ul>
  </div>

  <div class="col-md-6">
    <ul class="babel-tick-list">
      <li><a href="/docs/plugins/transform-function-bind">Function bind</a></li>
      <li><a href="/docs/plugins/transform-regenerator">Generators</a></li>
      <li><a href="/docs/plugins/#modules">Modules</a></li>
      <li><a href="/docs/plugins/transform-export-extensions">Module export extensions</a></li>
      <li><a href="/docs/plugins/transform-es2015-literals">New literals</a></li>
      <li><a href="/docs/plugins/transform-object-rest-spread">Object rest/spread</a></li>
      <li><a href="/docs/plugins/transform-es2015-shorthand-properties">Property method assignment</a></li>
      <li><a href="/docs/plugins/transform-es2015-shorthand-properties">Property name shorthand</a></li>
      <li><a href="/docs/plugins/transform-es2015-parameters">Rest parameters</a></li>
      <li><a href="/docs/plugins/transform-es2015-parameters">Spread</a></li>
      <li><a href="/docs/plugins/transform-es2015-sticky-regex">Sticky regex</a></li>
      <li><a href="/docs/plugins/transform-es2015-template-literals">Template literals</a></li>
      <li><a href="/docs/plugins/syntax-trailing-function-commas">Trailing function commas</a></li>
      <li><a href="/docs/plugins/transform-flow-strip-types">Type annotations</a></li>
      <li><a href="/docs/plugins/transform-es2015-unicode-regex">Unicode regex</a></li>
    </ul>
  </div>

  <br>
  <p class="text-center"><a href="/learn-es2015/">Learn more about ES2015 &rarr;</a></p>
</div>

<hr class="featurette-divider">

<div class="row featurette">
  <div class="col-md-6">
    <h2 id="polyfill">Polyfill</h2>
    <p>Since Babel only transforms syntax (like arrow functions), you can use babel-polyfill in order to support new globals such as Promise or new native methods like String.padStart (left-pad). It uses <a href="https://github.com/zloirock/core-js">core-js</a> and <a href="https://facebook.github.io/regenerator/">regenerator</a>. Check out our <a href="/docs/usage/polyfill">babel-polyfill</a> docs for more info.</p>

    <p>You can install the polyfill with</p>
```shell npm install --save-dev babel-polyfill ```

Use it by requiring it at the top of the entry point to your application or in your bundler config.

  <div class="col-md-6">
    <div class="col-md-6">
      <ul class="babel-tick-list">
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from">Array.from</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/of">Array.of</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin">Array#copyWithin</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill">Array#fill</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find">Array#find</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex">Array#findIndex</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name">Function#name</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/acosh">Math.acosh</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/hypot">Math.hypot</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/imul">Math.imul</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN">Number.isNaN</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger">Number.isInteger</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign">Object.assign</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors">Object.getOwnPropertyDescriptors</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries">Object.entries</a></li>
      </ul>
    </div>

    <div class="col-md-6">
      <ul class="babel-tick-list">
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values">Object.values</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf">Object.setPrototypeOf</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect">Reflect</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/flags">RegExp#flags</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt">String#codePointAt</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith">String#endsWith</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint">String.fromCodePoint</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes">String#includes</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw">String.raw</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat">String#repeat</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith">String#startsWith</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart">String#padStart</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd">String#padEnd</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap">WeakMap</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet">WeakSet</a></li>
      </ul>
    </div>

    <br>
    <p class="text-center"><a href="https://github.com/zloirock/core-js#index">Learn about more features &rarr;</a></p>
  </div>
</div>

<div class="col-md-7">
  <h2 id="jsx-and-flow">JSX and Flow</h2>
  <p>Babel can convert JSX syntax and strip out type annotations. Check out our <a href="https://babeljs.io/docs/plugins/preset-react/">React preset</a> to get started. Use it together with the <a href="https://github.com/babel/babel-sublime">babel-sublime</a> package to bring syntax highlighting to a whole new level.</p>

  <p>You can install this preset with</p>
```shell npm install --save-dev babel-preset-react ```

and add "react" to your .babelrc presets array.

export default React.createClass({
  getInitialState() {
    return { num: this.getRandomNumber() };
  },

getRandomNumber(): number {
return Math.ceil(Math.random() * 6);
},


render(): any {
return <div>
Your dice roll:
{this.state.num}
</div>;
}
});

  <p class="text-center">Learn more about <a href="https://facebook.github.io/jsx/">JSX</a> and <a href="http://flowtype.org/">Flow</a></p>
</div>

Pluggable

Babel is built out of plugins. Compose your own transformation pipeline using existing plugins or write your own. Easily use a set of plugins by using or creating a preset. Learn more →

Create a plugin on the fly with astexplorer.net or use generator-babel-plugin to generate a plugin template.

```javascript // A plugin is just a function export default function ({types: t}) { return { visitor: { Identifier(path) { let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ path.node.name = name.split('').reverse().join(''); } } }; } ```

Debuggable

Source map support so you can debug your compiled code with ease.

Debuggable Sourcemaps

Who's using Babel? 

<div class="babel-user-container babel-slider">
  {% for user in site.data.users limit:18 %}
    <div class="col-md-4 col-sm-6">
      <a class="babel-user" href="{{user.url}}" title="{{user.name}}">
        <img class="img-responsive" data-lazy="/images/users/{{user.logo}}" alt="{{user.name}}" data-proofer-ignore>
      </a>
    </div>
  {% endfor %}
</div>

<div class="text-center">
  <div class="btn-wrapper">
    <a href="{{ site.baseurl }}/users/" class="btn btn-sm btn-featured">Meet more Users</a>
  </div>
</div>