前言、不能用比較新、潮的東西，自己轉換就能用了。 css 預處理器是轉 css。

babel 簡介

babel 則是轉 JS，將 JS 新的語法轉成舊的。透過 babel 轉成舊的語法，瀏覽器就可以執行這些最新最潮的語法。

babel 實戰與總結

透過 npm init 先產生 package.json，再來複製貼上 npm install --save-dev @babel/core @babel/cli

基本上是安裝 bable 兩個套件，@babel/core @babel/cli

調整 package.json

  "scripts": {
    "build": "babel src -d lib",
    // 我要執行 bable 這個指令，code 都寫在 src 這個資料夾中，-d 表示 destination，編譯好的檔案要放在 lib 
    "test": "jest"
  },

開一個 src 資料夾，在裡面寫 js，寫好後 npm run build
發現多了一個 lib 資料夾，裡面也有一個同名的 js 檔案。但因為目前甚麼都沒有設定，所以它並不會做轉換。

在專案根目錄開一個 .babelrc

{
  "presets": ["@babel/preset-env"]
  // 我要用一些預設設定轉換 code
}

預設設定裡面可以再指定一些細節，比方說我要支援多少人用的瀏覽器。

最後再 npm run build，會發現它用舊的語法實做出新的東西。轉之前轉之後結果都一樣，只是語法不同。

結論、

babel 是一個 complier，可以將新的 js 轉成舊的語法，有很多 plug-in 可以調設定，像是一些實驗性還沒有變到最新規格裡面的語法。