登愣～今天要來介紹Babel，這也是在使用React上算是不可缺少一定會提到的工具，雖然一直還無法進入正式開發React的階段，可是我們已經周邊配備的工具已經快要補完了！這篇介紹Babel，我想下一篇就可以進入React開發惹~~。
Babel除了可以幫我們compile JSX，最主要的就是它官網寫的
Use next generation JavaScript, today.
它讓我們可以transpiling(轉譯)，也就是程式碼對程式碼編譯，可以在官網的Try it out直接看到轉譯的結果，打開網址左邊那欄寫的是ES6的Arrow Function，右邊就是Babel幫我們轉譯後的ES5語法。我們在開發時可以直接使用ES6語法，再透過Babel幫我們轉譯成瀏覽器看得懂的ES5，它是一個強大的compiler，即使沒有要用React，為了寫ES6也可以使用喔！
Babel分成許多核心模組，在預設情況下不會做任何事，你需要自己設定plugins來告訴Babel你要使用什麼功能。最基本設定的方式就是在根目錄下建立一個 .babelrc 檔。
.babelrc 範例：
{
// 用Array列出要使用的presets (一組相關功能plugins的集合)
"presets": [],
// 用Array列出要使用的plugins
"plugins": [],
// 設定不執行compile的檔案，可以是正規表示法或是特定路徑
"ignore": [],
...
}
.babelrc是JSON組成的config檔，裡面最主要的就是設定presets和plugins，另外，還有許多其他options可以視需求做設定。
如果不使用.babelrc，我們也可以在package.json檔做設定：
{
"name": "my-package",
"version": "1.0.0",
"babel": {
// my babel config here
}
}
由於Babel config有這兩種設定方式，它會按照什麼樣的順序檢查設定檔呢？在查找設定檔時的規則，會先從要被transpiled的檔案的所在目錄尋找 .babelrc 檔，如果沒有，則往上一層目錄查找 .babelrc 檔，或是有包含 "babel": {} 段落的package.json檔，這層如果沒有，就再往上一層。
通常要使用某些plugins，需要一個一個設定，preset就是指把一系列相關的plugins合在一起的組合，官方有推出一些preset讓我們可以直接使用。以下先介紹幾種官方preset。
而babel-preset-es2015就是把ES6語法轉譯成ES5，讓瀏覽器可以讀懂JS的一組preset。
使用方式：
// CLI安裝
npm install babel-preset-es2015 --save-dev
// .babelrc在presets設定
{
"presets": ["es2015"]
}
轉譯React的JS，設定這組preset就可使用React語法與JSX。
使用方式：
// CLI安裝
npm install babel-preset-react
// .babelrc在presets設定，新增react
{
"presets": ["es2015", "react"]
}
除了上面提到的ES2015/ES6，ES7有四個不同階段的提案，若要使用這四個階段的語法，可以安裝需要的preset，而每個階段都相依於下個階段的提案，例如：stage-1相依於stage-2，stage-2相依於stage-3，可以從官網Plugins介紹瞭解內含的plugins與功能。
使用方式 (以stage-0為例)：
// CLI安裝
npm install babel-preset-stage-0
// .babelrc在presets設定，新增stage-0
{
"presets": ["es2015", "react", "stage-0"]
}
以上，先說明我們常用到的presets，Babel當然還提供更多的plugins和presets，有的preset又有額外設定方式，更多元的應用，但也更複雜一些，可以前往官網Plugins看更多。
babel-cli也就是可以在CLI介面執行Babel transpiling的工具。
安裝 (-g 可以CLI介面直接使用)：
npm install babel-cli -g
使用方法：
// 會把這個檔案轉譯的結果，直接顯示在CLI上
babel index.js
// 使用 --out-file 或 -o 設定compile後的檔名
babel index.js --out-file compiled.js
// 使用 --out-dir 或 -d 設定整個folder下檔案都輸出
babel src --out-dir build
若執行指令，輸出沒有被轉譯，表示還沒有config，記得要檢查.babelrc，告訴Babel你要轉譯什麼。
babel-cli指令也可以設定在package.json的script中，如果像上面我們轉譯的指令在CLI執行(global)，有時候會遇到不同project希望使用不同Babel版本等問題，所以最好還是by project來使用，那就可以把指令設定在package.json中，並且也把Babel版本設定在devDependencies。
安裝時改成在目錄下，將babel-cli存在devDependencies：
npm install babel-cli --save-dev
package.json 設定指令執行：
{
"scripts": {
"build": "babel src --out-dir build"
}
}
執行compile時，只需要下：
npm run build
提供當程式碼中有使用require引用.js、.jsx、.es、.es6這些副檔名的檔案時，就能把這些被引用的檔案做轉譯，但使用babel-register本身的檔案並不會轉譯。
安裝在local，存在devDependencies：
npm install babel-register --save-dev
使用方法：
require("babel-register");
require("./index.js");
babel-register只適合在develop階段使用，若是要提供給deploy使用，最好先compile完。
如果需要使用node執行某些JS，只需要把node替換成babel-node就可以使用轉譯。
babel-node會跟babel-cli一起安裝，所以要使用babel-node，只需要npm install babel-cli即可。
使用方法：
// 把原本node index.js的指令換成babel-node即可
babel-node index.js
另外，以下指令也可以使用CLI直接進入babel-node編輯模式：
// CLI輸入
babel-node
// 直接輸入程式碼，會output運算結果(不是compile後的code)
[1, 2, 3].map(item => item * item);
如果是要在程式碼裡面直接使用Babel轉譯某些程式碼、或是檔案，可以直接使用Babel API。
安裝babel-core：
npm install babel-core --save
先用下面三種方式之一，引用babel-core：
var babel = require("babel-core");
import { transform } from 'babel-core';
import * as babel from 'babel-core';
再使用相對應的API：
// 把要轉譯的code用string傳入
babel.transform(code, options)
// 非同步，把要轉譯的檔案用path傳入
babel.transformFile(filename, options, callback)
// 同步，把要轉譯的檔案用path傳入
babel.transformFileSync(filename, options)
// 把要轉譯的AST格式傳入
babel.transformFromAst(ast, code, options);
寫前端總是會需要的polyfill，Babel也有 XD
Babel可以轉譯許多ES6語法，可是某些語法還是並沒有被轉譯成所有瀏覽器都看得懂的部分，所以我們需要使用babel-polyfill來模擬完整的ES6環境，讓我們可以在任何瀏覽器都能使用Array.from、Object.assign、generator functions...等語法。
安裝在devDependencies：
npm install babel-polyfill --save-dev
使用方法，以下列出三種：
// 使用require方式，引用在entry的檔案
require("babel-polyfill");
// ES6語法，使用import方式，引用在entry的檔案
import "babel-polyfill";
// 使用webpack.config.js，設定在entry
module.exports = {
entry: [
'babel-polyfill',
'./index.js'
]
};
iThome鐵人賽
看影片追技術