學習ES6首先需要有ES6開發環境，高版本的瀏覽器都實現了ES6的支持，但是有些低版本還是不支持es6的語法，所有，我們這個時候需要使用一個轉換器來將ES6的語法轉換成ES5的語法，我們這裏使用Babel將ES6轉換成ES5

初期工作簡單點，直接建立一個index.html在index.html中引入es5.js,在分別創建es5.js和es6.js

首先開始第一步，初始化項目

　　1.打開黑窗口（window+r），進入項目目錄，輸入命令

npm init -y

-y 表示默認同意，就不用來回的按回車確定默認選項。執行完成後，項目的根目錄會生產package.json文件

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

2.全局安裝Babel-cli（繼續在黑窗口中輸入下面的代碼）

npm install -g babel-cli

3.本地安裝babel-preset-se2015 和babel-cli（繼續在黑窗口中輸入下面的代碼

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

這個時候可以發現，我們的packjage,json,多了一個devDependencies這個選項

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

4.新建文件.babelrc

在根目錄下面新建 .babelrc文件，並打開寫上下面的代碼

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

這樣，我們的工作就做好了，我們可以在終端輸入轉換命令

babel es6.js -o es5.js

****其實這麽做也是可以的，但是為了節省我們的學習時間成本，我們可以打開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 來進行轉換了！

！！！！還沒完，這樣並沒有完，這樣確實可以愉快的使用es6學習開發了，但是很麻煩是不是，我們每次輸入es6代碼的時候，想輸出的時候看一下的時候，都要npm run build一下，會不會很尷尬！！

所以，還有一個更好的方法 live-server

建立新的文件夾，新建文件index.html和es6.js

1.打開黑窗口(window + r) 輸入命令npm install live-server -g

2.進入文件根目錄，進入黑窗口，輸入live-server

3.瀏覽器會自動打開，此時顯示的頁面就是index.html,這樣直接在index.html中引入es6.js，在es6.js編碼直接反饋在index.html中，舒不舒服，爽不爽？

但是學習ES6，首先學習要紮實學好ES5，否則學習起來特別吃力，如果還不熟悉ES5語法，還是踏踏實實先學習ES5的語法先！

練習es6第一步 環境搭建！