CINXE.COM

<!DOCTYPE html><html lang="en" class="no-js"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Babel 路 The compiler for writing next generation JavaScript</title><meta name="description" content="The compiler for writing next generation JavaScript"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css"><link rel="stylesheet" href="/css/main.css?t=2019-08-03T17:32:04+00:00"><link rel="canonical" href="https://babeljs.io/"><link rel="alternate" type="application/rss+xml" title="Babel" href="https://babeljs.io/feed.xml" /><link rel="icon" href="/favicon.ico" type="image/x-icon"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"><link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><meta name="msapplication-TileColor" content="#da532c"><meta name="theme-color" content="#ffffff"><meta name="og:url" content="https://babeljs.io/"><meta name="og:image" content="website"><meta name="og:title" content="Babel 路 The compiler for writing next generation JavaScript"><meta name="og:description" content="The compiler for writing next generation JavaScript"><meta name="og:image" content="https://babeljs.io/images/share-image.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@babeljs"><meta name="twitter:title" content="Babel 路 The compiler for writing next generation JavaScript"><meta name="twitter:description" content="The compiler for writing next generation JavaScript"><meta name="twitter:image:src" content="https://babeljs.io/images/share-image.png"><meta name="twitter:url" content="https://babeljs.io/"> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-114990275-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-114990275-1'); </script></head><input type="checkbox" id="babel-toggle-search" class="babel-toggle-search-checkbox" /><header class="navbar navbar-default navbar-fixed-top babel-nav" id="top" role="banner"><div class="container"> <a href="/" class="navbar-brand logo">Babel</a><div class="babel-navbar-toggles"><div class="navbar-header"> <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#babel-navbar" aria-controls="babel-navbar" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <label for="babel-toggle-search" class="navbar-toggle babel-toggle-search-open"> <span class="sr-only">Open search</span> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> </label></div></div><nav id="babel-navbar" class="collapse navbar-collapse babel-navbar"><ul class="nav navbar-nav"><li > <a href="/learn-es2015/">Learn ES2015</a></li><li class="dropdown "> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Docs <span class="caret"></span></a><ul class="dropdown-menu" role="menu"><li > <a href="/docs/setup/">Setup</a></li><li > <a href="/docs/editors">Editors</a></li><li > <a href="/docs/usage/caveats/">Caveats</a></li><li > <a href="/docs/community/videos/">Videos</a></li><li class="group-name">Packages</li><li > <a href="/docs/core-packages/">babel-core</a></li><li > <a href="/docs/usage/polyfill/">babel-polyfill</a></li><li > <a href="/docs/plugins/">Plugins</a></li><li class="group-name">Usage</li><li > <a href="/docs/usage/babelrc/">.babelrc</a></li><li > <a href="/docs/usage/cli/">babel-cli</a></li><li > <a href="/docs/usage/babel-register/">babel-register</a></li><li > <a href="/docs/usage/api/">API</a></li></ul></li><li > <a href="/repl/">Try it out</a></li><li > <a href="/blog/">Blog</a></li><li > <a href="/faq">FAQ</a></li><li > <a href="/team">Team</a></li></ul><ul class="nav navbar-nav navbar-right nav-social"><li> <a href="https://opencollective.com/babel">Donate</a></li><li> <a href="https://slack.babeljs.io/" title="Join us on Slack"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><rect x="219.27" y="221.3" width="72.04" height="69.58" transform="translate(-67.42 94.64) rotate(-18.52)"/><path d="M489.84,185.3C437,9.29,360.9-31.64,184.9,21.16S-32,150.1,20.76,326.1,149.7,543,325.7,490.24,542.64,361.3,489.84,185.3ZM401,299.5l-33.15,11.05,11.46,34.38c4.5,13.92-2.87,29.06-16.78,33.56-2.87.82-6.14,1.64-9,1.23a27.32,27.32,0,0,1-24.56-18l-11.46-34.38-68.36,22.92,11.46,34.38c4.5,13.92-2.87,29.06-16.78,33.56-2.87.82-6.14,1.64-9,1.23a27.32,27.32,0,0,1-24.56-18L198.81,367l-33.15,11.05c-2.87.82-6.14,1.64-9,1.23a27.32,27.32,0,0,1-24.56-18c-4.5-13.92,2.87-29.06,16.78-33.56L182,316.69l-22.1-65.9-33.15,11.05c-2.87.82-6.14,1.64-9,1.23a27.32,27.32,0,0,1-24.56-18C88.71,231.14,96.08,216,110,211.49l33.15-11.05-11.46-34.38c-4.5-13.92,2.87-29.06,16.78-33.56s29.06,2.87,33.56,16.78l11.46,34.38,68.36-22.92-11.46-34.38c-4.5-13.92,2.87-29.06,16.78-33.56s29.06,2.87,33.56,16.78L312.2,144l33.15-11.05c13.92-4.5,29.06,2.87,33.56,16.78s-2.87,29.06-16.78,33.56L329,194.3l22.1,65.9,33.15-11.05c13.92-4.5,29.06,2.87,33.56,16.78S414.93,295,401,299.5Z" transform="translate(0.7 0.3)"/></svg> </a></li><li> <a href="https://twitter.com/babeljs" title="Follow us on Twitter"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 416.32"><title>twitter</title><path d="M160.83,464.16c193.2,0,298.92-160.22,298.92-298.92,0-4.51,0-9-.2-13.52A214,214,0,0,0,512,97.22a212.93,212.93,0,0,1-60.44,16.6,105.7,105.7,0,0,0,46.3-58.19A209,209,0,0,1,431.07,81a105.09,105.09,0,0,0-181.73,71.91,116.12,116.12,0,0,0,2.66,24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48,105.48,0,0,0,68,207.44a106.27,106.27,0,0,1-47.53-13.11v1.43a105.28,105.28,0,0,0,84.21,103.06,105.67,105.67,0,0,1-47.33,1.84,105.06,105.06,0,0,0,98.14,72.94A210.72,210.72,0,0,1,25,418.68a202.17,202.17,0,0,1-25-1.43,298.85,298.85,0,0,0,160.83,46.92" transform="translate(0 -47.84)" fill="#010101"/></svg> </a></li><li> <a href="https://github.com/babel/babel" title="Contribute on GitHub"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 499.36"><path d="M256,6.32c-141.36,0-256,114.61-256,256,0,113.09,73.34,209,175.08,242.9,12.8,2.35,17.47-5.56,17.47-12.34,0-6.08-.22-22.18-.35-43.54C121,464.83,106,415,106,415c-11.64-29.57-28.42-37.45-28.42-37.45C54.31,361.71,79.31,362,79.31,362c25.69,1.81,39.21,26.38,39.21,26.38,22.84,39.12,59.92,27.82,74.5,21.27,2.33-16.54,8.94-27.82,16.25-34.22C152.43,369,92.67,347,92.67,248.94c0-27.95,10-50.8,26.35-68.69-2.63-6.48-11.42-32.5,2.51-67.75,0,0,21.49-6.88,70.4,26.24a242.65,242.65,0,0,1,128.18,0c48.87-33.13,70.33-26.24,70.33-26.24,14,35.25,5.18,61.27,2.55,67.75,16.41,17.9,26.31,40.75,26.31,68.69,0,98.35-59.85,120-116.88,126.32,9.19,7.9,17.38,23.53,17.38,47.41,0,34.22-.31,61.83-.31,70.23,0,6.85,4.61,14.81,17.6,12.31C438.72,471.29,512,375.4,512,262.34,512,120.94,397.37,6.32,256,6.32Z" transform="translate(0 -6.32)" fill="#191717" fill-rule="evenodd"/></svg> </a></li></ul><label for="babel-toggle-search" class="navbar-toggle babel-toggle-search-open"> <span class="sr-only">Open search</span> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> </label><div class="navbar-form navbar-right babel-search" role="search"><div class="input-group"> <label class="sr-only" aria-label="Search" for="babel-search-input">Search</label><div class="babel-search-input-wrapper"> <input type="text" class="form-control" id="babel-search-input" accesskey="s" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search the docs..."> <label for="babel-toggle-search" class="babel-toggle-search-close"> <span class="sr-only">Close search</span> <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span> </label></div></div></div></nav></div></header><div class="hero"> <a class="hero-tidelift-banner__anchor" href="https://tidelift.com/subscription/npm/babel"><div class="hero-tidelift-banner"> Get Professionally Supported Babel</div></a><div class="hero__content"><h1>Babel is a JavaScript compiler.</h1><p>Use next generation JavaScript, today.</p><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 the REPL to experiment more! </a></div></div></div></div><div class="container"><div class="row featurette text-center sponsors-opencollective"><h3>Open Collective Sponsors</h3><h4>Gold</h4><ul class="sponsors-opencollective-tier tier-gold-sponsors"><li><a href="https://code.facebook.com/projects" title="Facebook Open Source"><img src="https://opencollective.com/proxy/images/?src=http%3A%2F%2Fres.cloudinary.com%2Fopencollective%2Fimage%2Fupload%2Fv1508519428%2FS9gk78AS_400x400_fulq2l.jpg&height=100" /></a></li><li><a href="https://www.ampproject.org/" title="AMP Project"><img src="https://opencollective.com/proxy/images/?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2F68ed8b70-ebf2-11e6-9958-cb7e79408c56.png&height=100" /></a></li><li><a href="http://opensource.coinbase.engineering/" title="Coinbase"><img src="https://opencollective.com/proxy/images/?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2F0e10dbb0-0c46-11e8-8c0a-8594e8ca6b48.jpg&height=100" /></a></li><li><a href="https://www.salesforce.com/" title="Salesforce"><img src="https://images.opencollective.com/proxy/images/?src=https%3A%2F%2Flogo.clearbit.com%2Fsalesforce.com&height=100" /></a></li><li><a href="https://bitsrc.io" title="Bit"><img src="https://images.opencollective.com/proxy/images/?src=https%3A%2F%2Flogo.clearbit.com%2Fbitsrc.io&height=100" /></a></li></ul><a class="button" href="https://opencollective.com/babel" target="_blank"><img alt="Become a sponsor" src="https://opencollective.com/static/images/become_sponsor.svg" /></a><h4>Silver</h4><ul class="sponsors-opencollective-tier tier-silver-sponsors"><li><a href="https://webflow.com" title="Webflow"><img src="https://opencollective.com/proxy/images/?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2F4a5024b0-8cf2-11e7-b1a2-b30b1de1463c.png&height=80" /></a></li></ul><a class="button" href="https://opencollective.com/babel" target="_blank"><img alt="Become a sponsor" src="https://opencollective.com/static/images/become_sponsor.svg" /></a><p><a href="https://www.patreon.com/bePatron?u=905738">Become a Patron!</a></p></div><div class="row featurette text-center featurette--get-started"><div class="col-lg-6"><h3>Install the CLI and <a href="https://babeljs.io/docs/plugins/preset-env">env</a> preset</h3><div class="text-left"><div><div class="language-shell highlighter-rouge"><pre class="highlight"><code>npm install --save-dev babel-cli babel-preset-env </code></pre></div></div></div></div><div class="col-lg-6"><h3>Create a <a href="/docs/usage/babelrc"><code>.babelrc</code></a> file (or use your <a href="/docs/usage/babelrc#use-via-packagejson">package.json</a>)</h3><div class="text-left"><div><div class="language-json highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="w"> </span><span class="nt">"presets"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"env"</span><span class="p">]</span><span class="w"> </span><span class="p">}</span><span class="w"> </span></code></pre></div></div></div></div><p> To setup Babel with a specific build system, check out our <a href="/docs/setup">interactive setup guide</a>.</p></div><hr class="featurette-divider" /><div class="row featurette"><div class="col-md-6"><h2 id="es2015-and-beyond">ES2015 and beyond</h2><p> Babel has support for the latest version of JavaScript through syntax transformers. These <a href="https://babeljs.io/docs/plugins/">plugins</a> allow you to use new syntax, <strong>right now</strong> without waiting for browser support. Check out our <a href="https://babeljs.io/docs/plugins/preset-env">env preset</a> to get started.</p><p>You can install this preset with</p><div><div class="language-shell highlighter-rouge"><pre class="highlight"><code>npm install --save-dev babel-preset-env </code></pre></div></div><p>and add <code>"env"</code> to your <code>.babelrc</code> presets array.</p></div><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 →</a></p></div></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><div><div class="language-shell highlighter-rouge"><pre class="highlight"><code>npm install --save-dev babel-polyfill </code></pre></div></div><p>Use it by requiring it at the top of the entry point to your application or in your bundler config.</p></div><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 →</a></p></div></div><hr class="featurette-divider" /><div class="row featurette"><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><div><div class="language-shell highlighter-rouge"><pre class="highlight"><code>npm install --save-dev babel-preset-react </code></pre></div></div><p>and add <code>"react"</code> to your <code>.babelrc</code> presets array.</p></div><div class="col-md-5"><div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kr">export</span> <span class="k">default</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span> <span class="nx">getInitialState</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="p">{</span> <span class="nx">num</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">getRandomNumber</span><span class="p">()</span> <span class="p">};</span> <span class="p">},</span> <span class="nx">getRandomNumber</span><span class="p">()</span><span class="o">:</span> <span class="nx">number</span> <span class="p">{</span> <span class="k">return</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">ceil</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="mi">6</span><span class="p">);</span> <span class="p">},</span> <span class="nx">render</span><span class="p">()</span><span class="o">:</span> <span class="nx">any</span> <span class="p">{</span> <span class="k">return</span> <span class="nx"><div></span> <span class="s2">Your dice roll:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">num</span><span class="p">}</span> <span class="nx"></div>;</span> <span class="p">}</span> <span class="p">});</span></code></pre></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></div><hr class="featurette-divider" /><div class="row featurette"><div class="col-md-6"><h2 id="pluggable">Pluggable</h2><p>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 <a href="/docs/plugins/#presets">preset</a>. <a href="/docs/plugins/">Learn more →</a></p><p>Create a plugin on the fly with <a href="https://astexplorer.net/#/KJ8AjD6maa">astexplorer.net</a> or use <a href="https://github.com/babel/generator-babel-plugin">generator-babel-plugin</a> to generate a plugin template.</p></div><div class="col-md-6"><div><div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="c1">// A plugin is just a function</span> <span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">({</span><span class="na">types</span><span class="p">:</span> <span class="nx">t</span><span class="p">})</span> <span class="p">{</span> <span class="k">return</span> <span class="p">{</span> <span class="na">visitor</span><span class="p">:</span> <span class="p">{</span> <span class="nx">Identifier</span><span class="p">(</span><span class="nx">path</span><span class="p">)</span> <span class="p">{</span> <span class="kd">let</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">path</span><span class="p">.</span><span class="nx">node</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span> <span class="c1">// reverse the name: JavaScript -> tpircSavaJ</span> <span class="nx">path</span><span class="p">.</span><span class="nx">node</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">''</span><span class="p">).</span><span class="nx">reverse</span><span class="p">().</span><span class="nx">join</span><span class="p">(</span><span class="s1">''</span><span class="p">);</span> <span class="p">}</span> <span class="p">}</span> <span class="p">};</span> <span class="p">}</span> </code></pre></div></div></div></div><hr class="featurette-divider" /><div class="row featurette"><div class="col-md-4"><h2 id="debuggable">Debuggable</h2><p><strong>Source map</strong> support so you can debug your compiled code with ease.</p></div><div class="col-md-8"> <img src="/images/featurettes/debuggable.png?t=2019-08-03T17:32:04+00:00" alt="Debuggable Sourcemaps" class="featurette-image img-responsive" /></div></div><hr class="featurette-divider" /><div class="featurette"><h2 class="text-center"> <a href="/users/"> Who's using Babel? </a></h2><div class="babel-user-container babel-slider"><div class="col-md-4 col-sm-6"> <a class="babel-user" href="https://facebook.com/" title="Facebook"> <img class="img-responsive" data-lazy="/images/users/facebook.png" alt="Facebook" data-proofer-ignore="" /> </a></div><div class="col-md-4 col-sm-6"> <a class="babel-user" href="https://cloudflare.com/" title="CloudFlare"> <img class="img-responsive" data-lazy="/images/users/cloudflare.png" alt="CloudFlare" data-proofer-ignore="" /> </a></div><div class="col-md-4 col-sm-6"> <a class="babel-user" href="https://www.netflix.com/" title="Netflix"> <img class="img-responsive" data-lazy="/images/users/netflix.svg" alt="Netflix" data-proofer-ignore="" /> </a></div><div class="col-md-4 col-sm-6"> <a class="babel-user" href="https://www.mozilla.org/" title="Mozilla"> <img class="img-responsive" data-lazy="/images/users/mozilla.svg" alt="Mozilla" data-proofer-ignore="" /> </a></div><div class="col-md-4 col-sm-6"> <a class="babel-user" href="https://yahoo.com/" title="Yahoo!"> <img class="img-responsive" data-lazy="/images/users/yahoo.png" alt="Yahoo!" data-proofer-ignore="" /> </a></div><div class="col-md-4 col-sm-6"> <a class="babel-user" href="https://paypal.com" title="PayPal"> <img class="img-responsive" data-lazy="/images/users/paypal.svg" alt="PayPal" data-proofer-ignore="" /> </a></div><div class="col-md-4 col-sm-6"> <a class="babel-user" href="https://www.airbnb.com/" title="Airbnb"> <img class="img-responsive" data-lazy="/images/users/airbnb.svg" alt="Airbnb" data-proofer-ignore="" /> </a></div><div class="col-md-4 col-sm-6"> <a class="babel-user" href="https://www.reddit.com" title="Reddit"> <img class="img-responsive" data-lazy="/images/users/reddit.png" alt="Reddit" data-proofer-ignore="" /> </a></div><div class="col-md-4 col-sm-6"> <a class="babel-user" href="https://www.spotify.com" title="Spotify"> <img class="img-responsive" data-lazy="/images/users/spotify.png" alt="Spotify" data-proofer-ignore="" /> </a></div><div class="col-md-4 col-sm-6"> <a class="babel-user" href="https://www.atlassian.com/" title="Atlassian"> <img class="img-responsive" data-lazy="/images/users/atlassian.svg" alt="Atlassian" data-proofer-ignore="" /> </a></div><div class="col-md-4 col-sm-6"> <a class="babel-user" href="http://www.nfl.com" title="NFL"> <img class="img-responsive" data-lazy="/images/users/nfl.svg" alt="NFL" data-proofer-ignore="" /> </a></div><div class="col-md-4 col-sm-6"> <a class="babel-user" href="http://bocoup.com/" title="Bocoup"> <img class="img-responsive" data-lazy="/images/users/bocoup.png" alt="Bocoup" data-proofer-ignore="" /> </a></div><div class="col-md-4 col-sm-6"> <a class="babel-user" href="https://soundcloud.com" title="SoundCloud"> <img class="img-responsive" data-lazy="/images/users/soundcloud.png" alt="SoundCloud" data-proofer-ignore="" /> </a></div><div class="col-md-4 col-sm-6"> <a class="babel-user" href="http://www.zendesk.com" title="Zendesk"> <img class="img-responsive" data-lazy="/images/users/zendesk.svg" alt="Zendesk" data-proofer-ignore="" /> </a></div><div class="col-md-4 col-sm-6"> <a class="babel-user" href="https://vimeo.com" title="Vimeo"> <img class="img-responsive" data-lazy="/images/users/vimeo.svg" alt="Vimeo" data-proofer-ignore="" /> </a></div><div class="col-md-4 col-sm-6"> <a class="babel-user" href="https://www.npmjs.com" title="npm"> <img class="img-responsive" data-lazy="/images/users/npm.svg" alt="npm" data-proofer-ignore="" /> </a></div><div class="col-md-4 col-sm-6"> <a class="babel-user" href="http://emberjs.com/" title="Ember"> <img class="img-responsive" data-lazy="/images/users/ember.png" alt="Ember" data-proofer-ignore="" /> </a></div><div class="col-md-4 col-sm-6"> <a class="babel-user" href="https://facebook.github.io/react/" title="React"> <img class="img-responsive" data-lazy="/images/users/react.svg" alt="React" data-proofer-ignore="" /> </a></div></div><div class="text-center"><div class="btn-wrapper"> <a href="/users/" class="btn btn-sm btn-featured">Meet more Users</a></div></div></div><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.4.1/slick.css" /></div><div class="footer text-center"><p> <a href="https://github.com/babel/babel">Babel</a> and <a href="https://github.com/babel/website">the Babel website</a> are distributed under <a href="https://github.com/babel/babel/blob/master/LICENSE">the MIT License</a> 路 <a href="https://github.com/babel/website/blob/master/LICENSE">website license</a> 路 <a href="https://github.com/babel/babel/blob/master/CODE_OF_CONDUCT.md">Code of Conduct</a></p><p> <a href="http://henryzoo.com/babel.github.io/">Looking for Babel 5.x docs?</a> 路 Found an issue with the docs? Report it <a href="https://github.com/babel/babel.github.io/issues/new">here</a>.</p></div><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js' defer></script> <script src='//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.3/lodash.min.js' defer></script> <script src='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js' defer></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.13/clipboard.min.js' defer></script> <script src='https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js' defer></script> <script src='/scripts/search.js' defer></script> <script src='/scripts/clipboard.js' defer></script> <script src='/scripts/open-in-repl.js' defer></script> <script> document.addEventListener('DOMContentLoaded', function() { $("html").removeClass("no-js").addClass("js"); }); </script> <script src='//cdn.rawgit.com/thejameskyle/slick/lazy-load-responsive-2/slick/slick.min.js' defer></script> <script src='//unpkg.com/babel-standalone@6/babel.min.js' defer></script> <script src='//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js' defer></script> <script src='/scripts/index.js' defer></script></body></html>