這篇教程是使用Babel6用ES6全攻略系列的一部分，如果你對(duì)升級(jí)到Babel 6有問(wèn)題的話，可以先看看這篇文章。
Babel CLI是一個(gè)非常好的單文件的ES6到ES5的解釋器。當(dāng)Babel 遇到import語(yǔ)句，就會(huì)輸出require，但是在瀏覽器端，并不會(huì)讓你感覺(jué)到有很大的區(qū)別。
為了讓Babel對(duì)瀏覽器更加的友好，我們必須要對(duì)這些文件打包。我最新?lián)Q的工具是Webpack，我們發(fā)現(xiàn)我們能夠通過(guò)babel-lodader對(duì)Babel支持。
Installing Packages
在我們開(kāi)始之前，如果你現(xiàn)在正在使用Babel5，首先，將他的包信息從你的package.json中移除，然后使用npm uninstall這些包比如babel，babel-core，babel-loader等等。
Build-time packages
當(dāng)你準(zhǔn)備好了之后，我們可以開(kāi)始安裝babel-core和babel-loader的包：
npm install babel-core babel-loader --save-dev
接下來(lái)，你可能會(huì)安裝一些插件，你可以嘗試一下babel-preset-es2015，這是ES6轉(zhuǎn)換的一個(gè)合集，如果你在使用JSX，你可能需要babel-preset-react。而且如果你想要玩玩火，你可以加入babel-preset-stage-0來(lái)嘗試ES7的新特性，async或者await等等
# For ES6/ES2015 support
npm install babel-preset-es2015 --save-dev
# If you want to use JSX
npm install babel-preset-react --save-dev
# If you want to use experimental ES7 features
npm install babel-preset-stage-0 --save-dev
Runtime support
Babel依靠單獨(dú)的編譯不能支持ES6的全部特性，它還需要一些運(yùn)行時(shí)的支持，尤其是像Set，Map，Promise必須要被內(nèi)核支持，Babel的生成器的實(shí)現(xiàn)也使用了若干個(gè)運(yùn)行時(shí)helper，這使得你的App不用和別的App使用同樣的環(huán)境，你可以使用babel-polyfill來(lái)讓你的瀏覽器實(shí)現(xiàn)所有ES6功能
npm install babel-polyfill --save
Babel也提供了一些helper到你的解釋代碼中，這對(duì)單文件是沒(méi)問(wèn)題的，但是，當(dāng)我們使用webpack打包的時(shí)候，重復(fù)的代碼會(huì)影響到最后產(chǎn)生的文件的大小。可以通過(guò)使用babel-runtime和transform-runtime來(lái)代替那些helper。
npm install babel-runtime --save
npm install babel-plugin-transform-runtime --save-dev
配置 babel-loader
這個(gè)是建立在你能理解webpack的基礎(chǔ)上的，為了加深印象，可以先看看這篇文章Webpack Made Simple: Building ES6 & LESS with autorefresh
通過(guò)Webpack，使用Babel運(yùn)行你的javascript或者JSX就變得比較簡(jiǎn)單了，你只要在webpack.config.js的loaders入口加入babel-loader：
module: {
loaders: [
{
loader: "babel-loader",
// Skip any files outside of your project's `src` directory
include: [
path.resolve(__dirname, "src"),
],
// Only run `.js` and `.jsx` files through Babel
test: /\.jsx?$/,
// Options to configure babel with
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0', 'react'],
}
},
]
}
在上面的設(shè)置中，我們告訴Webpack去使用Babel解釋我src中的文件，我們可以通過(guò)確保你的node_modules路徑中的文件沒(méi)有被Babel編譯，來(lái)提高變異的速度，當(dāng)然NPM modules should be published as ES5，你可以通過(guò)exclude來(lái)達(dá)到這個(gè)效果：
exclude: [
path.resolve(__dirname, "node_modules"),
],
這個(gè)對(duì)象包含了所有Babel設(shè)置的選項(xiàng)，假設(shè)你已經(jīng)安裝了上一節(jié)中介紹的所有的包，如果你已經(jīng)不需要更多地Babel運(yùn)行時(shí)helper或者不想要使用React或者嘗試ES7，你可以適當(dāng)?shù)膹倪@個(gè)對(duì)象中移除一些字符串。
Entry point scripts
正如之前討論的，Babel需要一些helper來(lái)運(yùn)行你的應(yīng)用，你可以在webpack.config.js中的entry中加入polyfill來(lái)實(shí)現(xiàn)這些功能。
entry: [
// Set up an ES6-ish environment
'babel-polyfill',
// Add your application's scripts below
'./src/main',
],
Examples
這里有個(gè)比較簡(jiǎn)單的使用Webpack打包使用Babel6的栗子webpack-black-triangle
一個(gè)更加完善的基于React的使用Webpack打包的栗子Unicorn Standard Starter Kit
More ways to Babel
現(xiàn)在你已經(jīng)使用ES6寫(xiě)你的應(yīng)用了，那么為什么不嘗試使用ES6寫(xiě)測(cè)試，或者使用它寫(xiě)一些庫(kù)，或者使用它寫(xiě)一些任務(wù)腳本
Testing with Mocha and Babel’s register script
