在搭建es6開發(fā)環(huán)境之前，先簡單介紹一下es6漫仆。
ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布了。它的目標(biāo)死陆，是使得 JavaScript 語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級開發(fā)語言唧瘾。
我們?yōu)槭裁匆褂胑s6措译？es6有什么優(yōu)點(diǎn)？......饰序，我會(huì)在后面寫一個(gè)es6專題系列领虹，來介紹es6的使用。本次分享的內(nèi)容是 es6的開發(fā)環(huán)境搭建求豫。
那么塌衰，你肯定又要問诉稍，問什么要搭建es的開發(fā)環(huán)境，上面不都說 es6是JavaScript 語言的下一代標(biāo)準(zhǔn)了嘛最疆，我們平時(shí)寫的js都不需要搭建環(huán)境均唉，直接在瀏覽器里就能運(yùn)行。
因?yàn)橹两窀鞔鬄g覽器廠商所開發(fā)的 JavaScript 引擎都還沒有完成對 ES2015 中所有特性的完美支持肚菠，如果直接使用的話舔箭，會(huì)報(bào)錯(cuò)的。
所以我們既想使用es6帶來的新語法蚊逢、新特性层扶，又想讓現(xiàn)在的瀏覽器支持es6語法，于是乎像 babel烙荷、Traceur 等編譯器便出現(xiàn)了镜会。它們能將尚未得到支持的 ES2015 特性轉(zhuǎn)換為 ES5 標(biāo)準(zhǔn)的代碼，使其得到瀏覽器的支持终抽。
這里我們就使用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>
![]()
image
編寫index.js
在src目錄下，新建index.js文件逸寓。這個(gè)文件很簡單居兆，我們只作一個(gè)a變量的聲明，并用console.log()打印出來竹伸。
let a=1;
console.log(a);
我們用了let聲明泥栖，這里let是ES6的一種聲明方式，接下來我們需要把這個(gè)ES6的語法文件自動(dòng)編程成ES5的語法文件佩伤。
初始化項(xiàng)目
在安裝Babel之前聊倔，需要用npm init先初始化我們的項(xiàng)目晦毙。打開終端或者通過cmd打開命令行工具生巡，進(jìn)入項(xiàng)目目錄，輸入下邊的命令：
npm init -y
-y代表全部默認(rèn)同意见妒，就不用一次次按回車了孤荣。命令執(zhí)行完成后，會(huì)在項(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的值钱豁。
![]()
image
全局安裝Babel-cli
在終端中輸入以下命令,如果你安裝很慢的話，可以使用淘寶鏡像的cnpm來進(jìn)行安裝疯汁。安裝cnpm的方法牲尺，大家自己百度吧。
cnpm install -g babel-cli
雖然已經(jīng)安裝了babel-cli幌蚊，只是這樣還不能成功進(jìn)行轉(zhuǎn)換谤碳，如果你不相信可以輸入下邊的命令試一下。
babel src/index.js -o dist/index.js
你會(huì)發(fā)現(xiàn)溢豆，在dist目錄下確實(shí)生產(chǎn)了index.js文件蜒简，但是文件并沒有變化，還是使用了ES6的語法漩仙。因?yàn)槲覀冞€需要安裝轉(zhuǎn)換包才能成功轉(zhuǎn)換搓茬，繼續(xù)往下看吧。
本地安裝babel-preset-es2015 和 babel-cli
cnpm 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"
}
![]()
image
新建.babelrc
在根目錄下新建.babelrc文件(注意麸折，以點(diǎn)開頭的文件是隱藏文件系枪，需要在linux環(huán)境通過命令創(chuàng)建)，并打開錄入下面的代碼
{
"presets":[
"es2015"
],
"plugins":[]
}
這個(gè)文件我們建立完成后磕谅，現(xiàn)在可以在終端輸入的轉(zhuǎn)換命令了私爷，這次ES6成功轉(zhuǎn)化為ES5的語法。
babel src/index.js -o dist/index.js
![]()
image
簡化轉(zhuǎn)化命令
在使用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)換了进统。
這樣助币，一個(gè)簡單的基本的編譯環(huán)境就OK了。
