ES6的開發環境搭建

在搭建es6開發環境之前，先簡單介紹一下es6。

ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在2015年6月正式發佈了。它的目標，是使得 JavaScript 語言可以用來編寫複雜的大型應用程序，成為企業級開發語言。

我們為什麼要使用es6？es6有什麼優點？......，我會在後面寫一個es6專題系列，來介紹es6的使用。本次分享的內容是 es6的開發環境搭建。

那麼，你肯定又要問，問什麼要搭建es的開發環境，上面不都說 es6是JavaScript 語言的下一代標準了嘛，我們平時寫的js都不需要搭建環境，直接在瀏覽器裡就能運行。

因為至今各大瀏覽器廠商所開發的 JavaScript 引擎都還沒有完成對 ES2015 中所有特性的完美支持，如果直接使用的話，會報錯的。

所以我們既想使用es6帶來的新語法、新特性，又想讓現在的瀏覽器支持es6語法，於是乎像 babel、Traceur 等編譯器便出現了。它們能將尚未得到支持的 ES2015 特性轉換為 ES5 標準的代碼，使其得到瀏覽器的支持。

這裡我們就使用Babel把ES6編譯成ES5。

建立工程目錄

先建立一個項目的工程目錄，並在目錄下邊建立兩個文件夾：src和dist

• src：書寫ES6代碼的文件夾，寫的js程序都放在這裡。

• dist：利用Babel編譯成的ES5代碼的文件夾，在HTML頁面需要引入的時這裡的js文件。

編寫index.html

文件夾建立好後，我們新建一個index.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代表全部默認同意，就不用一次次按回車了。命令執行完成後，會在項目根目錄下生產package.json文件。

可以根據自己的需要進行修改，比如我們修改name的值。

全局安裝Babel-cli

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

cnpm install -g babel-cli

雖然已經安裝了babel-cli，只是這樣還不能成功進行轉換，如果你不相信可以輸入下邊的命令試一下。

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

你會發現，在dist目錄下確實生產了index.js文件，但是文件並沒有變化，還是使用了ES6的語法。因為我們還需要安裝轉換包才能成功轉換，繼續往下看吧。

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

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

安裝完成後，我們可以看一下我們的package.json文件，已經多了devDependencies選項。

"devDependencies": {

"babel-cli": "^6.24.1",

"babel-preset-es2015": "^6.24.1"

}

新建.babelrc

在根目錄下新建.babelrc文件(注意，以點開頭的文件是隱藏文件，需要在linux環境通過命令創建)，並打開錄入下面的代碼

這個文件我們建立完成後，現在可以在終端輸入的轉換命令了，這次ES6成功轉化為ES5的語法。

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

簡化轉化命令

在學習vue 的時候，可以使用npm run build 直接利用webpack進行打包，在這裡也希望利用這種方式完成轉換。打開package.json文件，把文件修改成下面的樣子。

修改好後，以後我們就可以使用 npm run build 來進行轉換了。

這樣，一個簡單的基本的編譯環境就OK了。

更多優質內容推薦：

體驗別樣旅遊感受 中公教育推出全新互聯網+北京遊，零利潤體驗10天9晚帝都風情：

http://www.ujiuye.com/zt/qgsqxly/?wt.bd=zdy35845tt

有錢任性，某公司豪擲500萬幫助20左右年輕人找工作，起因是做善良的人：

http://www.ujiuye.com/zt/jyfc/?wt.bd=zdy35845tt