搭建步驟：1、安裝babel-cli工具，語(yǔ)法“npm install –save-dev babel-cli”；2、安裝依賴，語(yǔ)法“npm install –save-dev babel-preset-es2015 babel-cli”；3、配置根目錄下的“.babelrc”文件，設(shè)定轉(zhuǎn)碼規(guī)則；4、在package.json中修改scripts命令執(zhí)行項(xiàng)即可。

前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

es6的優(yōu)點(diǎn)（題外話）:

es6是ECMAScript2015。es6是js的子集，但是我們一般說(shuō)的js是es6之前的版本。js本身是很不完美的語(yǔ)言，但是es6將js很多丑陋的部分通過(guò)語(yǔ)法糖隱藏了。它提供了很多特性，像jascript數(shù)據(jù)處理，箭頭函數(shù)，解構(gòu)賦值，Default Parameters(默認(rèn)參數(shù)),Classes(類)，Modules(模塊)等，包括前后端分離用的這些異步請(qǐng)求方法，能非常好的解決大前端遇到的問(wèn)題。

es6的開(kāi)發(fā)環(huán)境搭建（es6轉(zhuǎn)碼為es5）

工欲善其事必先利其器，哈哈，所以第一步就是搭建一個(gè)es6的開(kāi)發(fā)環(huán)境。低版本的瀏覽器不支持es6的語(yǔ)法，這就需要在運(yùn)行環(huán)境中把es6的語(yǔ)法轉(zhuǎn)換成es5的語(yǔ)法 ，在vue中Webpack是有自動(dòng)編譯和轉(zhuǎn)換能力的，除了Webpack還有babel可以使用

Babel使用規(guī)則

Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。

這意味著，你可以現(xiàn)在就用 ES6 編寫程序，而不用擔(dān)心現(xiàn)有環(huán)境是否支持。下面是一個(gè)例子。

// 轉(zhuǎn)碼前 input.map(item => item + 1);  // 轉(zhuǎn)碼后 input.map(function (item) {   return item + 1; }); //上面的原始代碼用了箭頭函數(shù)，這個(gè)特性還沒(méi)有得到廣泛支持，Babel將其轉(zhuǎn)為普通函數(shù)，就能在現(xiàn)有的JavaScript環(huán)境執(zhí)行了。

1.安裝babel

Babel提供babel-cli工具，用于命令行轉(zhuǎn)碼。

它的安裝命令如下：

//需要先安裝babel-cli npm install --global babel-cli

2.配置文件.babelrc

Babel的配置文件是.babelrc，存放在項(xiàng)目的根目錄下。使用Babel的第一步，就是配置這個(gè)文件。

該文件用來(lái)設(shè)置轉(zhuǎn)碼規(guī)則和插件，基本格式如下。

{   "presets": [],   "plugins": [] }

presets字段設(shè)定轉(zhuǎn)碼規(guī)則，官方提供以下的規(guī)則集，你可以根據(jù)需要安裝。

# ES2015轉(zhuǎn)碼規(guī)則 npm install --save-dev babel-preset-es2015  # ES7不同階段語(yǔ)法提案的轉(zhuǎn)碼規(guī)則（共有4個(gè)階段），選裝一個(gè) npm install --save-dev babel-preset-stage-0 npm install --save-dev babel-preset-stage-1 npm install --save-dev babel-preset-stage-2 npm install --save-dev babel-preset-stage-3

然后，將這些規(guī)則加入.babelrc。

//例如：按需求添加 {     "presets": [       	"es2015",       	"stage-2"     ], 	"plugins": [] }

3.用法

# 轉(zhuǎn)碼結(jié)果輸出到標(biāo)準(zhǔn)輸出 $ babel example.js  # 轉(zhuǎn)碼結(jié)果寫入一個(gè)文件 # --out-file 或 -o 參數(shù)指定輸出文件 $ babel example.js --out-file compiled.js # 或者 $ babel example.js -o compiled.js  # 整個(gè)目錄轉(zhuǎn)碼 # --out-dir 或 -d 參數(shù)指定輸出目錄 $ babel src --out-dir lib # 或者 $ babel src -d lib  # -s 參數(shù)生成source map文件 $ babel src -d lib -s

上面代碼是在全局環(huán)境下，進(jìn)行Babel轉(zhuǎn)碼。這意味著，如果項(xiàng)目要運(yùn)行，全局環(huán)境必須有Babel，也就是說(shuō)項(xiàng)目產(chǎn)生了對(duì)環(huán)境的依賴。另一方面，這樣做也無(wú)法支持不同項(xiàng)目使用不同版本的Babel。

一個(gè)解決辦法是將babel-cli安裝在項(xiàng)目之中。

# 安裝 npm install --save-dev babel-cli

然后，改寫package.json。

{   // ...   "devDependencies": {     "babel-cli": "^6.0.0"   },   "scripts": {     "build": "babel src -d lib"   }, }

轉(zhuǎn)碼的時(shí)候，就執(zhí)行下面的命令。

npm run build

看一萬(wàn)遍，不如自己真正實(shí)踐一遍

第一步：（創(chuàng)建本地項(xiàng)目以及目錄）

本地新建文件夾，重命名為es6test,用vscode代碼編輯器打開(kāi)，在文件夾下新建兩個(gè)文件，分別是項(xiàng)目文件src，以及打包文件dist文件，在src文件夾下新建index.html文件，并列新建index.js文件，并將index.js文件引入index.html

第二步：（初始化項(xiàng)目，添加轉(zhuǎn)碼依賴包）

打開(kāi)vscode終端 ctrl +~,在文件根目錄下初始化項(xiàng)目：

npm init -y

會(huì)生成一個(gè)package.json文件, -y的目的是在初始化時(shí)配置默認(rèn)值，后續(xù)在生成的文件中修改即可。

npm太慢,先安裝個(gè)cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

在終端全局安裝babel-cli工具，用于命令行轉(zhuǎn)碼

cnpm install -g babel-cli

這里迫不及待的想試一試有沒(méi)有用，能轉(zhuǎn)碼不，就先在終端測(cè)了一下

babel src/index.js -o dist/index.js

不出我所料啊，肯定不行！dist文件下是生成了個(gè)index.js文件，但是并未轉(zhuǎn)換成es5的語(yǔ)法

再在本地安裝兩個(gè)依賴包

cnpm install --save-dev babel-preset-es2015 babel-cli

package.json中如果出現(xiàn)下面的內(nèi)容，恭喜你，所有的依賴包都安裝完了

第三步：（根目錄下.babelrc文件配置）

第四步：（package.json中修改scripts命令執(zhí)行項(xiàng)）

第五步：（驗(yàn)收成果，哈哈?。?/span>

cnpm run build

你也可以在src/index.js中再寫些es6的語(yǔ)法，測(cè)試下。

【