[Babel] Babel 使用筆記

簡介

Babel 是一個JavaScript compiler，可以將新的 JS 語法轉譯為瀏覽器支援的 ES5，因為 JavaScript 幾乎是每年會提出一個新的規格草案，但是瀏覽器沒辦法很快就能夠支援新的 JS，所以我們需要先轉譯成瀏覽器支援的 ES5。

安裝

# babel-loader 是給webpack設定loader使用。
# babel-core 主要是babel編譯的部分。
# babel-preset-es2015 是設定可以編譯ES6語法，轉譯成ES5普遍瀏覽器可以讀懂的Javascript版本。
# babel-preset-react 編譯react語法。

# loader
$ npm install --save-dev babel-loader

# core
$ npm install --save-dev babel-core

# ES2017轉碼規則
$ npm install --save-dev babel-preset-es2017

# command line執行babel
#$ npm install --save-dev babel-cli

# react轉碼規則
#$ npm install --save-dev babel-preset-react

設定

設定的方式有幾種：設定 .babelrc、透過 package.json 設定，或是搭配 Webpack 來設定。

• 設定 .babelrc

{
    "presets": ["es2017", "react"]
}

• 透過 package.json 設定

{
    "name": "app",
    "version": "1.0.0",
    "scripts": {
        "build": "babel code -d build"
    },
}

• 搭配 Webpack 來使用，參考: [Webpack] Webpack 設定及使用

參考資料

• Babel