如何使用babel，把寫好的es6代碼，轉化爲es5，讓ie8兼容。

如今有很過編譯的工具，好比是babel編譯，webpack，grunt，gulp。
這篇文字很簡單，就是讓咱們使用es6語法的代碼，不單單能夠讓谷歌瀏覽器看，還能夠使用ie8以上的瀏覽器看，其實就是把咱們的代碼，把es6語法轉化爲es5語法。
下面咱們以使用babel爲例。
1.咱們新建一個文件夾，名字就叫babel好啦。
而後在這個文件夾裏，進入cmd，使用npm init。建立一個package.json（配置信息）。一路回車便可。
package.json裏面的內容是

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

2.全局安裝babel。

npm install --g babel-cli

3.建立一個src（叫啥均可以）文件夾。裏面有個1.js。寫點es66代碼。

1. 添加build命令行。

在scripts裏面能夠剛一些，咱們本身寫的命令行。這裏咱們添加一條命令。"build": "babel src -d lib"，意思就是當咱們npm run build 即就是npm run babel src -d lib。babel src -d lib，就是babel（編譯） src（送住文件夾的src裏），-d（目標），lib（到文件夾的lib裏）

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d lib"
  },

5.安裝開發依賴
在package.json裏添加

"devDependencies": {
    "babel-cli": "^6.0.0"
  },

而後在npm i。
6.如今你能夠在cmd裏運行npm run build。能夠看到。babel文件夾裏自動生成了一個lib文件夾。裏面也對應生成了一個1.js。這就是「babel src -d lib」。可是這個1.js和src裏面的1.js一抹同樣，沒有進行編譯，這是爲啥？
7.在babel文件夾沒新建.babelrc文件。裏面的內容是：

{
    "presets": ["env"]
}
能夠理解爲presets環境變量的意思。env模式。

8.安裝babel-preset-env到開發依賴。

"devDependencies": {
    "babel-preset-env": "^1.7.0",
    "babel-cli": "^6.0.0"
  },

而後在npm i
9.而後在npm run build。就能夠看到lib裏面的文件被編譯了。
固然了 src裏面能夠有多個js。那麼lib也就是對應編譯出多個js了。