原文地址：https://www.jspang.com/detailed?id=40#toc21
ECMAScript 6.0（簡稱ES6）是JavaScript語言的下一代標(biāo)準(zhǔn)掰茶，已經(jīng)在2015年6月正式發(fā)布了讨勤。它的目標(biāo)菌仁，是使得JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序醉箕，成為企業(yè)級開發(fā)語言书妻。
ECMAScript和JavaScript的關(guān)系是，前者是后者的規(guī)格，后者是前者的一種實(shí)現(xiàn)袍冷。
工欲善其事，必先利其器猫牡。所以我們第1節(jié)就是搭建一個(gè)基本的ES6開發(fā)環(huán)境『現(xiàn)在的Chrome瀏覽器已經(jīng)支持ES6了，但是有些低版本的瀏覽器還是不支持ES6的語法淌友，這就需要我們把ES6的語法自動的轉(zhuǎn)變成ES5的語法煌恢。如果你聽過我Vue課程的話，應(yīng)該知道Webpack是有自動編譯轉(zhuǎn)換能力的震庭，除了Webpack自動編譯瑰抵，我們還可以用Babel來完成。這節(jié)課我們就使用Babel把ES6編譯成ES5器联。
建立工程目錄： 先建立一個(gè)項(xiàng)目的工程目錄二汛，并在目錄下邊建立兩個(gè)文件夾：src和dist
src：書寫ES6代碼的文件夾，寫的js程序都放在這里拨拓。
dist：利用Babel編譯成的ES5代碼的文件夾肴颊，在HTML頁面需要引入的時(shí)這里的js文件。
編寫index.html：
文件夾建立好后渣磷，我們新建一個(gè)index.html文件婿着。
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./dist/index.js"></script>
</head>
<body>
Hello ECMA Script 6
</body>
</html>
需要注意的是在引入js文件時(shí)，引入的是dist目錄下的文件醋界。
<script src="./dist/index.js"></script>
編寫index.js
在src目錄下竟宋，新建index.js文件。這個(gè)文件很簡單形纺，我們只作一個(gè)a變量的聲明丘侠，并用console.log()打印出來。
let a=1;
console.log(a);
我們用了let聲明挡篓，這里let是ES6的一種聲明方式，接下來我們需要把這個(gè)ES6的語法文件自動編程成ES5的語法文件帚称。
初始化項(xiàng)目
在安裝Babel之前官研，需要用npm init先初始化我們的項(xiàng)目。打開終端或者通過cmd打開命令行工具闯睹，進(jìn)入項(xiàng)目目錄戏羽，輸入下邊的命令：
npm init -y
-y代表全部默認(rèn)同意，就不用一次次按回車了楼吃。命令執(zhí)行完成后始花，會在項(xiàng)目根目錄下生產(chǎn)package.json文件妄讯。
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
可以根據(jù)自己的需要進(jìn)行修改，比如我們修改name的值酷宵。
全局安裝Babel-cli
在終端中輸入以下命令,如果你安裝很慢的話亥贸，可以使用淘寶鏡像的cnpm來進(jìn)行安裝。安裝cnpm的方法浇垦，大家自己百度吧炕置。
npm install -g babel-cli
雖然已經(jīng)安裝了babel-cli，只是這樣還不能成功進(jìn)行轉(zhuǎn)換男韧，如果你不相信可以輸入下邊的命令試一下朴摊。
babel src/index.js -o dist/index.js
你會發(fā)現(xiàn)，在dist目錄下確實(shí)生產(chǎn)了index.js文件此虑，但是文件并沒有變化甚纲，還是使用了ES6的語法。因?yàn)槲覀冞€需要安裝轉(zhuǎn)換包才能成功轉(zhuǎn)換朦前，繼續(xù)往下看吧介杆。
本地安裝babel-preset-es2015 和 babel-cli
npm install --save-dev babel-preset-es2015 babel-cli
安裝完成后，我們可以看一下我們的package.json文件况既，已經(jīng)多了devDependencies選項(xiàng)这溅。
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1"
}
新建.babelrc
在根目錄下新建.babelrc文件，并打開錄入下面的代碼
{
"presets":[
"es2015"
],
"plugins":[]
}
這個(gè)文件我們建立完成后棒仍，現(xiàn)在可以在終端輸入的轉(zhuǎn)換命令了悲靴，這次ES6成功轉(zhuǎn)化為ES5的語法。
babel src/index.js -o dist/index.js
簡化轉(zhuǎn)化命令：
在學(xué)習(xí)vue 的時(shí)候莫其，可以使用npm run build 直接利用webpack進(jìn)行打包癞尚，在這里也希望利用這種方式完成轉(zhuǎn)換。打開package.json文件乱陡，把文件修改成下面的樣子浇揩。
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "babel src/index.js -o dist/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1"
}
}
修改好后，以后我們就可以使用 npm run build 來進(jìn)行轉(zhuǎn)換了憨颠。
