習(xí)慣了WebStorm的話(huà)..我就假設(shè)題主會(huì)用Node.js和npm啦～

一句話(huà)總結(jié)：用WebStorm自帶的File Watcher功能+Babel實(shí)現(xiàn)自動(dòng)轉(zhuǎn)換ECMAScript 6代碼為ES5代碼

我是這么配置的..就先新建一個(gè)Empty Project，然后在src目錄下新建了一個(gè)main.js；
// 這一步不是必須的 只是剛上手的話(huà) 從空項(xiàng)目開(kāi)始自己配置會(huì)少很多干擾

Then..進(jìn)入設(shè)置，把JavaScript language version改成ECMAScript 6；

再Then..寫(xiě)一段ES6代碼

'use strict';
// node直接運(yùn)行ES6代碼時(shí)，如使用了ES6的一些關(guān)鍵字，比如let，就需要嚴(yán)格模式，否則會(huì)報(bào)錯(cuò)
// 這是沒(méi)有嚴(yán)格模式時(shí)候的錯(cuò)誤提示
// SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

function* fibs() {// Generator Function
let a = 0;
let b = 1;
while (true) {
yield a;
// [a, b] = [b, a + b];
b = a + b;
a = b - a;
}
}
let [first, second, third, fourth, fifth, sixth] = fibs();
console.log(first, second, third, fourth, fifth, sixth);

現(xiàn)在IDE會(huì)出現(xiàn)一個(gè)File watcher提示條

先別點(diǎn)Add watcher！我們要先去裝babel～

首先在根目錄新建一個(gè)package.json
{
"name": "test-project",
"version": "1.0.0"
}

然后打開(kāi)IDE的Terminal，安裝babel-cli
npm install --save-dev babel-cli

Good! 現(xiàn)在可以去點(diǎn)Add watcher啦，點(diǎn)完之后會(huì)彈出一個(gè)框，其中大部分設(shè)置IDE都幫你搞定了

下面第三行，Program那一項(xiàng)，填

$ProjectFileDir$/node_modules/.bin/babel

然后點(diǎn)OK，這個(gè)時(shí)候你就會(huì)發(fā)現(xiàn)左邊多出來(lái)一個(gè)main-compiled.js文件啦

但是還沒(méi)搞定！現(xiàn)在只是搞定了自動(dòng)轉(zhuǎn)換的功能，系統(tǒng)默認(rèn)把ES6 compile成了ES6..（你應(yīng)該會(huì)發(fā)現(xiàn)compile出來(lái)的東西跟原來(lái)的一樣..Generator函數(shù)并沒(méi)有被轉(zhuǎn)換成ES5的格式）

所以我們需要安裝Babel的preset以正確識(shí)別ES6代碼；

和剛才一樣，在npm安裝babel的ES6的preset
npm install --save-dev babel-preset-es2015

在根目錄下新建一個(gè).babelrc文件（就是babel在當(dāng)前項(xiàng)目的配置文件），寫(xiě)上
{
"presets": [
"es2015"
]
}

OK搞定！保存再回去看一下main-compiled.js 應(yīng)該就變成這個(gè)樣子啦，現(xiàn)在你在main.js里直接寫(xiě)ES6代碼，IDE都會(huì)自動(dòng)compile成ES5的代碼在這里啦～

注意：想直接用Node.js運(yùn)行ES6代碼還是有些問(wèn)題..因?yàn)檫@段代碼用的ES6的解構(gòu)賦值Node.js還未完全支持，需要在運(yùn)行的時(shí)候加入一些tags（以開(kāi)啟Node.js的相關(guān)試驗(yàn)特性），具體可以參考Node.js官網(wǎng)對(duì)ES6的說(shuō)明：ECMAScript 2015 (ES6)。

如果你問(wèn)的是require或者import用法，那目前仍然需要通過(guò)babel或者traceur之類(lèi)的轉(zhuǎn)義工具將之轉(zhuǎn)義為ES5語(yǔ)法，才能在瀏覽器里運(yùn)行。但對(duì)于lodash庫(kù)本身，并不是非得利用webpack...之類(lèi)的工具才能用，直接使用<script>標(biāo)簽放在html里，就可以使用_了。

Babel默認(rèn)只轉(zhuǎn)換新的JavaScript句法（syntax），而不轉(zhuǎn)換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對(duì)象，以及一些定義在全局對(duì)象上的方法（比如Object.assign）都不會(huì)轉(zhuǎn)碼。而且像import和export這兩個(gè)命令現(xiàn)在在任何瀏覽器中都是不支持的, 同時(shí)babel也無(wú)法將其轉(zhuǎn)換為瀏覽器支持的ES5, 原因在于:
babel只是個(gè)翻譯，假設(shè)a.js 里 import 了 b.js, 對(duì)a.js進(jìn)行轉(zhuǎn)碼，只是翻譯了a.js，并不會(huì)把b.js的內(nèi)容給讀取合并進(jìn)來(lái), 如果想在最終的某一個(gè)js里，包含 a.js，b.js 的代碼，那就需要用到打包工具
所以我在這里講解一下如何使用webpack工具將帶有import和export語(yǔ)法的JS文件, 通過(guò)打包工具生成所有瀏覽器都支持的單個(gè)JS文件.
1. 下載node.js和webpack
Node.js是一個(gè)基于Chrome JavaScript運(yùn)行時(shí)建立的平臺(tái)， 用于方便地搭建響應(yīng)速度快、易于擴(kuò)展的網(wǎng)絡(luò)應(yīng)用?？梢哉f(shuō)就是服務(wù)器端的JS. webpack是一個(gè)打包工具, 而它是依賴(lài)于node.js運(yùn)行的.