在搭建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ì)報(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文件。

Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

<!DOCTYPE html> <html>     <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>

Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

需要注意的是在引入js文件時(shí)，引入的是dist目錄下的文件。

<script src="./dist/index.js"></script>

Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

編寫(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ǔ)法文件。

Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

初始化項(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文件。

Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

{   "name": "es6",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "test": "echo \"Error: no test specified\" && exit 1"   },   "keywords": [],   "author": "",   "license": "ISC" }

Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

可以根據(jù)自己的需要進(jìn)行修改，比如我們修改name的值。

Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

全局安裝Babel-cli

在終端中輸入以下命令,如果你安裝很慢的話，可以使用淘寶鏡像的cnpm來(lái)進(jìn)行安裝。安裝cnpm的方法，大家自己百度吧。

cnpm install -g babel-cli

Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

雖然已經(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ù)往下看吧。

Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

本地安裝babel-preset-es2015 和 babel-cli

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

Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

安裝完成后，我們可以看一下我們的package.json文件，已經(jīng)多了devDependencies選項(xiàng)。

"devDependencies": {     "babel-cli": "^6.24.1",     "babel-preset-es2015": "^6.24.1"   }

Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

新建.babelrc

在根目錄下新建.babelrc文件(注意，以點(diǎn)開(kāi)頭的文件是隱藏文件，需要在linux環(huán)境通過(guò)命令創(chuàng)建)，并打開(kāi)錄入下面的代碼

Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

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

Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

這個(gè)文件我們建立完成后，現(xiàn)在可以在終端輸入的轉(zhuǎn)換命令了，這次ES6成功轉(zhuǎn)化為ES5的語(yǔ)法。

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

Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

簡(jiǎn)化轉(zhuǎn)化命令

在學(xué)習(xí)vue 的時(shí)候，可以使用npm run build 直接利用webpack進(jìn)行打包，在這里也希望利用這種方式完成轉(zhuǎn)換。打開(kāi)package.json文件，把文件修改成下面的樣子。

Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

 {   "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"   } }

Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

修改好后，以后我們就可以使用 npm run build 來(lái)進(jìn)行轉(zhuǎn)換了。

這樣，一個(gè)簡(jiǎn)單的基本的編譯環(huán)境就OK了。

http://www.cnblogs.com/zhouyangla/p/7076292.html