# transpilers

{% hint style="success" %}
A [transpiler](https://en.wikipedia.org/wiki/Source-to-source_compiler) is a piece of software that translates <mark style="color:orange;">**modern**</mark> source code to <mark style="color:yellow;">**older syntax**</mark> source code, so that it’ll **also work** in <mark style="color:orange;">**outdated**</mark> engines.
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}

* [Babel](https://babeljs.io/) is one of the most prominent transpilers.
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] JS.info ⟩ [Polyfills and transpilers](https://javascript.info/polyfills) ⟩ [Transpilers](https://javascript.info/polyfills#transpilers)
* [ ] replit ⟩ [JavaScript Tutorial > ES6 ===> ES5 with Babel!](https://replit.com/talk/learn/JavaScript-Tutorial-greater-ES6-greater-ES5-with-Babel/127479)
  {% endtab %}

{% tab title="💈範例" %}

* replit ⟩ [play Babel](https://replit.com/@pegasusroe/play-Babel#readme.md)
  {% endtab %}

{% tab title="🛠 工具" %}

* Babel ⟩ [online transpiler](https://babeljs.io/repl)
* [ES6 Console](https://es6console.com/)
  {% endtab %}

{% tab title="👥 相關" %}

* some [transpilers](https://lochiwei.gitbook.io/web/js/tools/transpilers "mention") turn <mark style="color:purple;">undefined</mark> into <mark style="color:yellow;">**void 0**</mark>.
  {% endtab %}
  {% endtabs %}