forked from babel/website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
351 lines (306 loc) · 18.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
---
layout: default
custom_js:
- index.js
third_party_js:
- //cdn.rawgit.com/thejameskyle/slick/lazy-load-responsive-2/slick/slick.min.js
---
<div class="jumbotron text-center">
<div class="container-fluid">
<h1>Babel is a JavaScript compiler.</h1>
<p>Use next generation JavaScript, today.</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<a class="jumbotron-callout" href="/blog/2016/08/30/babili">
<p>Babili (babel-minify) Released!</p>
</a>
</div>
</div>
</div>
<iframe src="https://ghbtns.com/github-btn.html?user=babel&repo=babel&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
</div>
<div class="container">
<div class="row featurette text-center">
<h2 id="babel-transforms"class="text-center"><a href="#babel-transforms">Babel transforms your JavaScript</a></h2>
<div class="col-lg-6">
<h3>You put JavaScript in</h3>
<div class="lead text-left">
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><br><span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">].</span><span class="nx">map</span><span class="p">(</span><span class="nx">n</span> <span class="o">=></span> <span class="nx">n</span> <span class="o">+</span> <span class="mi">1</span><span class="p">);</span><br>
</code></pre></div>
</div>
</div>
<div class="col-lg-6">
<h3>And get JavaScript out</h3>
<div class="lead text-left">
{% highlight javascript %}
[1,2,3].map(function(n) {
return n + 1;
});
{% endhighlight %}
</div>
</div>
<h3>Start by installing Babel</h3>
<div class="lead text-left">
{% highlight javascript %}
$ npm install --save-dev babel-cli
{% endhighlight %}
</div>
<h3>Create a <a href="/docs/usage/babelrc"><code>.babelrc</code></a> file in your project (or use your <a href="/docs/usage/babelrc#use-via-package-json">package.json</a>)</h3>
<div class="lead text-left">
{% highlight javascript %}
{
"presets": ["es2015"]
}
{% endhighlight %}
</div>
<div class="text-center">
<div class="btn-wrapper btn-wrapper-lg">
<a href="http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=true&presets=es2015%2Ces2015-loose%2Ces2017&experimental=false&loose=false&spec=false&code=%5B1%2C2%2C3%5D.map(n%20%3D%3E%20n%20%2B%201)%3B&playground=true" class="btn btn-featured">Try it Out</a>
</div>
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-6">
<h2 id="es2015"><a href="#es2015">ES2015 and beyond</a></h2>
<p>Babel has support for the latest version of JavaScript through syntax transformers. These plugins 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-es2015">ES2015 preset</a> to get started.</p>
<p>You can install this preset with</p>
{% highlight javascript %}
$ npm install --save-dev babel-preset-es2015
{% endhighlight %}
</p>and add <code>"es2015"</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="/docs/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"><a href="#polyfill">Polyfill</a></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>
{% highlight javascript %}
$ npm install --save-dev babel-polyfill
{% endhighlight %}
<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-5">
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><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 class="col-md-7">
<h2 id="jsx"><a href="#jsx">JSX and Flow</a></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>
{% highlight javascript %}
$ npm install --save-dev babel-preset-react
{% endhighlight %}
</p>and add <code>"react"</code> to your <code>.babelrc</code> presets array.</p>
</p>
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-6">
<h2 id="pluggable"><a href="#pluggable">Pluggable</a></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></p>
</div>
<div class="col-md-6">
{% highlight 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('');
}
}
};
}
{% endhighlight %}
</div>
</div>
<hr class="featurette-divider">
<!--<div class="row featurette">
<div class="col-md-4">
<h2>Readable</h2>
<p>
Formatting is retained if possible so your generated code is as similar
as possible.
</p>
</div>
<div class="col-md-4 col-sm-6">
{% highlight javascript %}
{% endhighlight %}
</div>
<div class="col-md-4 col-sm-6">
{% highlight javascript %}
{% endhighlight %}
</div>
</div>
<hr class="featurette-divider">-->
<!--<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-4">
<h2>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="{{ site.baseurl }}/images/featurettes/debuggable.png?t={{ site.time | date_to_xmlschema }}" alt="Debuggable Sourcemaps" class="featurette-image img-responsive">
</div>
</div>-->
<!--<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-4 col-md-push-8">
<h2>Compact</h2>
<p>Babel uses the least amount of code possible with no dependence on a bulky runtime.</p>
</div>
<div class="col-md-4 col-md-pull-4 col-sm-6">
{% highlight javascript %}
{% endhighlight %}
</div>
<div class="col-md-4 col-md-pull-4 col-sm-6">
{% highlight javascript %}
{% endhighlight %}
</div>
</div>-->
<div class="text-center">
<div class="btn-wrapper btn-wrapper-lg">
<a href="{{ site.baseurl }}/docs/learn-es2015/" class="btn btn-featured">Learn ES2015</a>
<a href="{{ site.baseurl }}/docs/setup/" class="btn btn-featured">Setup Babel</a>
<a href="https://github.com/thejameskyle/babel-handbook" class="btn btn-featured">Babel Handbook</a>
</div>
</div>
<hr class="featurette-divider">
<div class="featurette">
<h2 class="text-center">
<a href="{{ site.baseurl }}/users/">
Who's using Babel?
</a>
</h2>
<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}}">
</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>
</div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.4.1/slick.css">
</div>