已經寫了好幾篇介紹 ES6 特色的文章，這次就來詳細介紹 JavaScript ES6 的開發環境要如何建立吧！由於文章內容有點長，就分為兩篇來討論，此篇主軸為 Babel，下一篇為 ESLint 的重點使用。
現今各大瀏覽器廠商所開發的 JavaScript 引擎還沒有對 ES6 標準中所有特性做到完美支持，不能直接放入，有些新語法會報錯。所以想使用這些新特性或語法在所有瀏覽器上，需要使用 Babel 編譯器來轉換成舊式的 ES5 標準代碼，才能完全符合環境的支持。
為了要簡單快速使用，我們建立以下目錄 :
Vision
目錄
|-- dist
|-- src
|-- index.js
|-- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES6 - Build Test</title>
</head>
<body>
Hello !!
<div id="text"></div>
<script src="./dist/index.js"></script>
</body>
</html>
const getText = () => 'JavaScript ES6';
document.getElementById('text').innerHTML = getText();
在使用 Babel、ESLint 之前要先會用 npm 套件管理來安裝，這是在 Node.js 環境下執行的，不懂得可以先去 npm 官網 看看。
$ npm init
package.json檔案:{
"name": "es6-buildtest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Babel 是 JavaScript 的編譯器(compiler)工具，可以把 ES6 標準以上的新語法轉換成最基本的 JS 語法，另外也支援 react 語法轉換，只要簡單的配置就能完成，這已是現今非常流行的轉換工具了。Babel 搭配一些自動化打包套件還可以加快效率與自動運行，在前端工程中很受歡迎。
.babelrc 配置檔案{
"presets": [],
"plugins": []
}
babel-preset-env 工具babel-cli 工具babel 命令# 轉碼後输出到畫面上
babel example.js
# 轉碼後寫入一個檔案中
babel example.js -o compiled.js
# 將整個目錄轉碼到輸出的目錄裡
babel src -d dist
1. 先在本地端安裝 babel-cli、babel-preset-env 工具 :
$ npm install babel-cli babel-preset-env --save-dev
2. 這時候會在 package.json 檔案中看到多出devDependencies選項，代表安裝成功
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1"
}
3. 再來建立.babelrc Babel 的配置檔案，把轉碼規則包的套件填入，檔案內容如下
{
"presets": ["env"]
}
4. 然後藉由 npm 的腳本自訂方式來代替 babel 命令，改寫 package.json 中scripts選項，內容如下
"scripts": {
"build": "babel src -d dist"
}
5. 最後在終端機執行命令如下
$ npm run build
可以看到運行的結果，dist 資料夾裡多了一個 index.js 檔如下
'use strict';
var getText = function getText() {
return 'JavaScript ES6';
};
document.getElementById('text').innerHTML = getText();
這就代表編譯成 ES5 代碼成功啦！執行 index.html 在瀏覽器上看看是否會有預期的結果吧~
以上是 Babel 的基本使用，需要自己手動執行編譯的命令，由於很麻煩就有了第三方套件站出來了，自動化這些命令程序，接下來一節，我們使用另一個方法來讓它更方便。
Gulp 是現今很流行的任務打包工具，主要用來自動化運行任務套件，像是編譯、最小化、合併...等等的任務。Gulp 的詳細教學就請先自行 google 吧，這裡將省略帶過。
1. 需要先安裝gulp與 Babel 提供的gulp-babel、babel-core、babel-preset-env這三套工具 :
$ npm install gulp gulp-babel babel-core babel-preset-env --save-dev
2. 還是要建立 .babelrc 檔案 :
{
"presets": ["env"]
}
3. 然後建立 Gulp 需要運行的腳本檔案 gulpfile.js，放在根目錄下，內容為把 src 資料夾裡的檔案進行編譯後再放到 dist 資料夾中(可直接使用部分的 ES6 語法) :
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('build', () =>
gulp.src('src/**')
.pipe(babel())
.pipe(gulp.dest('dist'))
);
4. 最後在終端機執行腳本命令，如下
$ gulp build
對！ 你可以發現到，以上方法跟直接使用 babel-cli 命令行工具是一樣的效果。雖然它比較繁瑣，但別忘了 Gulp 的主要功能是自動化任務，繼續下面操作。
5. 我們另外在 gulpfile.js 檔案中再加入自動化監看腳本的程式碼，如下 :
gulp.task('watch', () => {
gulp.watch('src/**', ['build']);
});
6. 使用監看腳本，終端機執行命令如下
$ gulp watch
當運行後，可以看到只要每次修改 src 資料夾裡的 JS 檔案，Gulp 將會自動執行 Babel 編譯動作，至少這樣就方便許多了。若搭配它的一些 API 還能與其他套件做結合呢！
下一篇文章開發環境建置(下) - ESLint 偵錯工具 將會介紹 ESLint 偵錯工具，可以在編譯前找出錯誤，規範好統一的程式碼風格。
iThome鐵人賽
看影片追技術