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