前言
目前最流行的 JavaScript 轉譯工具是 TypeScript，而不是 Babel。不過，Babel 仍然是一個值得了解的工具。本篇文章會簡要說明 Babel 的定位，並示範如何在專案中安裝與使用 Babel。
撰寫原生 JavaScript 程式碼
TypeScript 的語法與 JavaScript 非常相似，但它仍然不是原生 JavaScript。由於瀏覽器並不直接支援 TypeScript，因此程式碼仍需先轉換為 JavaScript 才能執行。
相對而言，Babel 直接使用 JavaScript 語法，只是將較新的 JavaScript 特性轉換為舊版瀏覽器也能執行的程式碼。開發者可以專注於使用現代語法，而不必手動處理相容性問題。
Babel 的角色
隨著瀏覽器逐漸支援更多新版本的 JavaScript，Babel 的需求可能會逐漸降低。不過，即使未來不再需要 Babel，也不會影響既有專案，因為我們始終是以標準 JavaScript 撰寫程式碼，只是由工具負責轉換版本差異。
安裝 Babel
Babel 以 npm 套件的形式發布，可以透過 npm 安裝。以下示範如何建立一個簡單的 Babel 專案。
首先建立新的 npm 專案：
$ mkdir myapp
$ cd myapp
$ npm init -y執行後會產生 package.json 與 package-lock.json，用來管理專案的套件依賴。
接著安裝 Babel 命令列工具：
$ npm install --save-dev @babel/core @babel/cli這裡使用 --save-dev，表示此套件只在開發階段使用。
建立建置指令
修改 package.json，新增 build 指令：
{
"scripts": {
"build": "babel src -d lib"
}
}這表示 Babel 會將 src 目錄中的程式碼轉譯後輸出到 lib 目錄。
安裝 Babel preset
Babel 採用 plugin / preset 架構，必須安裝 preset 才會進行語法轉換。
$ npm install --save-dev @babel/preset-env建立 .babelrc：
{
"presets": ["@babel/preset-env"]
}撰寫範例程式
建立原始碼目錄：
$ mkdir src
$ touch src/app.js範例程式如下（使用 ES6 字串模板）：
function greet(message) {
return `Hello ${message}`;
}
console.log(greet('World'));編譯並執行程式
使用 Babel 轉譯程式碼：
$ npm run build執行轉譯後的程式：
$ node lib/app.js
Hello World簡化執行流程
我們可以在 package.json 中加入更多 scripts：
{
"scripts": {
"build": "babel src -d lib",
"start": "node lib/app.js",
"prestart": "npm run build"
}
}prestart 會在執行 start 前自動執行，因此只需要一個指令即可完成編譯與執行：
$ npm start(選擇性) 安裝 Flow
Flow 是 JavaScript 的靜態型別檢查工具。它允許在 JavaScript 中加入型別資訊，並在執行程式前進行靜態分析。
Babel 可以移除 Flow 的型別標註，但不會進行型別檢查，因此需要另外安裝 Flow。
先安裝 Babel preset：
$ npm install --save-dev @babel/preset-flow修改 .babelrc：
{
"presets": ["@babel/preset-flow", "@babel/preset-env"]
}再安裝 Flow：
$ npm install --save-dev flow-bin設定 Flow
在 package.json 中加入 scripts：
{
"scripts": {
"flow": "flow",
"build": "babel src -d lib",
"start": "node lib/app.js",
"prestart": "flow && npm run build"
}
}初始化 Flow：
$ npm run flow init建立 .flowconfig：
[ignore]
.*/node_modules/.*
[include]
./srcFlow 範例
// @flow
function greet(name: string):string {
return `Hello ${name}`;
}
console.log(greet(12345));Flow 會回報型別錯誤。
修正後：
// @flow
function greet(name: string):string {
return `Hello ${name}`;
}
console.log(greet('World'));執行：
$ npm start
Hello WorldFlow 並不是 Babel 的必要工具，但在專案中加入靜態型別檢查，可以提升程式碼品質。
(選擇性) 使用 JavaScript 樣板專案
建立 Babel 與 Flow 的專案需要不少設定。如果每次建立新專案都重新設定一次，會增加許多重複工作。
因此在 Node.js 生態系中常見樣板專案（boilerplate project）。樣板專案通常已經預先設定好開發工具與常用函式庫，可以作為新專案的起點。
不同團隊的需求不同，因此很多開發團隊會維護自己的樣板專案，以統一工具與開發流程。
如果想快速開始，可以參考以下樣板專案：
https://github.com/cwchentw/nodejs-boilerplate
(附註) 使用 nodejs-boilerplate
nodejs-boilerplate 是一個簡單的 JavaScript 樣板專案，內含以下工具：
- Babel：JavaScript 轉譯器
- Flow：型別檢查工具（可選）
- ESLint：程式碼品質檢查
初始化專案：
$ git clone https://github.com/cwchentw/nodejs-boilerplate.git
$ mv nodejs-boilerplate myapp
$ cd myapp
$ npm install實際程式碼位於 src/app.js 。
在這裡可以使用 ES6+ 語法與 Flow 型別標註，並由 ESLint自動檢查程式碼品質。
開發模式與釋出模式
開發模式：
$ npm run start-dev此模式下輸出的 dist/app.js 會保留較易閱讀的格式。
正式釋出模式：
$ npm start此模式會壓縮輸出檔案，適合正式部署。