--- 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#/)