把新的 JS 語法（ES6）轉換成舊的語法（ES5）

Babel 實戰

進入 Babel 官網的 Setup > 選擇 CLI，透過 Command line 的方式去做轉換

第一步：首先，在專案資料夾裡面，要先有一個 node.js 的資料夾

輸入指令 npm init （一直按 Enter）來產生出 package.json

第二步：輸入下列指令，來安裝 babel 的兩個套件：babel/core 和 babel/cli

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

裝好之後，在 package.json 裡面就會自動新增 babel/core 和 babel/cli 這兩個 Dependencies

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

第三步：加上 build

在 package.json 的 "scripts" 加上這段 "build": "babel src -d lib"

  "scripts": {
    "build": "babel src -d lib",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

加上之後，當我在 CLI 輸入指令 npm run build，就會執行 build 裡面寫好的這行 babel src -d lib，意思就是：
我要執行 babel 這個指令，幫我編譯 src 資料夾裡面的內容（source code 都會寫在 src 資料夾裡面），編譯之後的檔案都會放到目的地也就是 lib 資料夾內（-d 就是 destination 的意思）

第四步：新增 babel 的設定檔 .babelrc

在專案資料夾的根目錄新增一個檔案叫做 .babelrc
然後在 .babelrc 檔案裡面貼上這段：

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

這段的意思就是：
presets 就是 babel 給的一些預設設定，我要用這些預設設定來轉換程式碼

接著，要把這個 presets 安裝起來，輸入指令：

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

安裝完 presets 之後，可以去 @babel/preset-env 的文件 看要如何設定更多細節
例如：可以設定我想要支援哪一些瀏覽器
在 Browserslist Integration 可以設定要支援「還有 25% 以上的人在使用的瀏覽器」

第五步：開始使用 babel

現在，就可以在專案資料夾裡面新增一個 src 資料夾 > 在 src 資料夾新增一個 demo.js

在 demo.js 裡面，就可以用最新的 JS 語法來寫，然後在 CLI 輸入指令 npm run build 之後，打開 lib 資料夾裡面的 demo.js 就可以看到編譯過後的程式碼了（編譯成舊的 JS 語法）