在搭建es6開發(fā)環(huán)境之前，先簡單介紹一下es6。
ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標準，已經(jīng)在2015年6月正式發(fā)布了。它的目標，是使得 JavaScript 語言可以用來編寫復雜的大型應用程序，成為企業(yè)級開發(fā)語言。
我們?yōu)槭裁匆褂胑s6？es6有什么優(yōu)點？......，我會在后面寫一個es6專題系列，來介紹es6的使用。本次分享的內(nèi)容是 es6的開發(fā)環(huán)境搭建。
那么，你肯定又要問，問什么要搭建es的開發(fā)環(huán)境，上面不都說 es6是JavaScript 語言的下一代標準了嘛，我們平時寫的js都不需要搭建環(huán)境，直接在瀏覽器里就能運行。
因為至今各大瀏覽器廠商所開發(fā)的 JavaScript 引擎都還沒有完成對 ES2015 中所有特性的完美支持，如果直接使用的話，會報錯的。
所以我們既想使用es6帶來的新語法、新特性，又想讓現(xiàn)在的瀏覽器支持es6語法，于是乎像 babel、Traceur 等編譯器便出現(xiàn)了。它們能將尚未得到支持的 ES2015 特性轉(zhuǎn)換為 ES5 標準的代碼，使其得到瀏覽器的支持。
這里我們就使用Babel把ES6編譯成ES5。
建立工程目錄
先建立一個項目的工程目錄，并在目錄下邊建立兩個文件夾：src和dist
- src：書寫ES6代碼的文件夾，寫的js程序都放在這里。
- dist：利用Babel編譯成的ES5代碼的文件夾，在HTML頁面需要引入的時這里的js文件。
編寫index.html
文件夾建立好后，我們新建一個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文件時，引入的是dist目錄下的文件。
<script src="./dist/index.js"></script>
編寫index.js
在src目錄下，新建index.js文件。這個文件很簡單，我們只作一個a變量的聲明，并用console.log()打印出來。
let a=1;
console.log(a);
我們用了let聲明，這里let是ES6的一種聲明方式，接下來我們需要把這個ES6的語法文件自動編程成ES5的語法文件。
初始化項目
在安裝Babel之前，需要用npm init先初始化我們的項目。打開終端或者通過cmd打開命令行工具，進入項目目錄，輸入下邊的命令：
npm init -y
-y代表全部默認同意，就不用一次次按回車了。命令執(zhí)行完成后，會在項目根目錄下生產(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ù)自己的需要進行修改，比如我們修改name的值。
全局安裝Babel-cli
在終端中輸入以下命令,如果你安裝很慢的話，可以使用淘寶鏡像的cnpm來進行安裝。安裝cnpm的方法，大家自己百度吧。
cnpm install -g babel-cli
雖然已經(jīng)安裝了babel-cli，只是這樣還不能成功進行轉(zhuǎn)換，如果你不相信可以輸入下邊的命令試一下。
babel src/index.js -o dist/index.js
你會發(fā)現(xiàn)，在dist目錄下確實生產(chǎn)了index.js文件，但是文件并沒有變化，還是使用了ES6的語法。因為我們還需要安裝轉(zhuǎn)換包才能成功轉(zhuǎn)換，繼續(xù)往下看吧。
本地安裝babel-preset-es2015 和 babel-cli
cnpm install --save-dev babel-preset-es2015 babel-cli
安裝完成后，我們可以看一下我們的package.json文件，已經(jīng)多了devDependencies選項。
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1"
}
新建.babelrc
在根目錄下新建.babelrc文件(注意，以點開頭的文件是隱藏文件，需要在linux環(huán)境通過命令創(chuàng)建)，并打開錄入下面的代碼
{
"presets":[
"es2015"
],
"plugins":[]
}
這個文件我們建立完成后，現(xiàn)在可以在終端輸入的轉(zhuǎn)換命令了，這次ES6成功轉(zhuǎn)化為ES5的語法。
babel src/index.js -o dist/index.js
簡化轉(zhuǎn)化命令
在使用vue 的時候，可以使用npm run build 直接利用webpack進行打包，在這里也希望利用這種方式完成轉(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 來進行轉(zhuǎn)換了。
這樣，一個簡單的基本的編譯環(huán)境就OK了。
作者：foreknow
鏈接：http://m.itdecent.cn/p/7e8d5b163e94
來源：簡書
簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處。
