Babel

之前筆記[ JavaScript 12 ] ES6 新增特性最下面有提到 Babel ，但因為當時文章的安裝設定和現在有點不一樣了，這邊直接獨立一篇補充

Babel 官網直接說 Babel is a JavaScript compiler.
上面有 Try it out，左邊可以寫新的語法，右邊幫你輸出舊的語法

官網安裝頁面
安裝還是要去看官網最準，像是之前新增 babel 設定檔是 .babelrc，但現在是要新增babel.config.json，兩個就不一樣了

安裝開始

(先說明自己電腦是 window，習慣用 Git Bash)
首先要有 node.js 的資料夾

npm init

只是測試用，所以一直按 enter 就好
用 ls 看，發現多一個 package.json

安裝 babel/core 和 babel/cli

npm install --save-dev @babel/core @babel/cli

安裝好以後你的 package.json 檔案裡面包含:

{
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0"
  }
}

與其用 CLI 執行 Babel，不如直接放在 npm scripts，
打開 package.json ，在 scripts 裡面加上

"build": "babel src -d lib"

這個 build 就是跑 npm run build 的時候，他會執行 babel src -d lib這段，這段意思是執行 babel 指令，source code 都寫在 src 這個資料夾，-d 就是destination，所以 compile 完要放在 lib 這個資料夾

新增 src 資料夾

mkdir src

去 src 資料夾，新增一個 a.js 檔案來做測試

touch a.js

在 a.js 寫一些比較新的語法

const a = 1
const b = [1, 2, 3, 4]
const c = [...b]
for (let i of c) {
    console.log(i)
}

跑起來

npm run build

在 lib 這個資料夾就多了 a.js
但因為目前沒有任何設定，所以不會去做轉換
要設定的話要新增 babel.config.json ，可以看成 babel 的設定檔
所以在專案根目錄

touch babel.config.json

打開 babel.config.json 這個檔案
把下列複製上去

{
  "presets": ["@babel/preset-env"]
}

上面 presets 代表預設的設定，意思是我要用這個設定來轉換我的程式碼，那這當然需要安裝

npm install @babel/preset-env --save-dev

細節也可以更動，看官網的文件，可以設定像是我要用多少%的人在用的瀏覽器等等細節

再次跑起來

npm run build

再次打開 lib 資料夾裡的 a.js，就發現多了很多東西，這樣在舊的瀏覽器就可以跑了