
---
Babel 是一個編譯工具,主要用於將 ES6+ 版本的程式碼轉換為向後兼容的 JavaScript 語法
以便能夠運行在當前和舊版本的瀏覽器或其他環境中
---
ES6 Destructuring assignment
```javascript=
const personInfo = {
name: 'horse',
age: 19,
phoneNumber: '0955333456',
};
const { name, age, phoneNumber } = personInfo;
```
ES6 Arrow Function
```javascript=
const numbers = [1, 2, 3];
let total = 0;
numbers.forEach(n => total += n);
```
---
直接用 babel 官方的線上編譯功能來查看編譯前後的程式碼
https://babeljs.io/repl
---
### 那要怎麼在本機端使用呢?
---
babel 官方的 Usage Guide
https://babeljs.io/docs/en/usage
---
不過未來還並不只有會用到 babel 來編譯 js
像是 css 也有瀏覽器兼容性的編譯手段 (Autoprefixer)<!-- .element: class="fragment" data-fragment-index="1" -->
或是要壓縮 js 的程式碼並混淆成雜亂的 code (UglifyJS)<!-- .element: class="fragment" data-fragment-index="1" -->
所以要有管理這些編譯手段的打包工具<!-- .element: class="fragment" -->
---
後續的章節會講解另外兩種打包工具,gulp 及 webpack
* gulp:自己設置編譯工具的執行腳本來做編譯
* webpack:提供一大堆可選配的懶人包來執行編譯 (功能更多,時下最流行,模組化必備)
不過在那之前還有一個重要的東西要先講,就是 Polyfill<!-- .element: class="fragment" -->
---
## Polyfill
---
polyfill 這項技術指的是
擴充舊瀏覽器上不支持的 html css js 技術
在這邊我只提擴充 js 的部分
---
babel 提供 ES6+ 語法上的編譯,但還是有相當多新穎的技術需要額外擴充進去
<span>像剛剛 ES6 介紹到的 Promise<!-- .element: class="fragment" --></span>
---
* https://polyfill.io/v3/url-builder/
* https://github.com/zloirock/core-js
---
接下來介紹打包工具之一的 gulp
---
###### tags: `前端`
下一章: [gulp](https://hackmd.io/p/S1ltMNRhE#/)
{"metaMigratedAt":"2023-06-14T21:48:42.904Z","metaMigratedFrom":"YAML","title":"Babel","breaks":true,"contributors":"[{\"id\":\"546d39ab-b539-465e-9792-3e057aa047ac\",\"add\":1610,\"del\":110}]"}