使用babel將ES6轉化成ES5

有些瀏覽器還不支援ES6語法，這是我們需要將ES6語法轉換成ES5，除了可以利用webpack的自動編譯轉換功能之外，也可使用babel進行轉換。

出處：https://blog.csdn.net/kerelee_li/article/details/82349131

轉換步驟如下：

1.建立檔案及目錄如下，dist資料夾下為Babel轉化後的ES5檔案；src資料夾下為自己編寫的ES6檔案

2.開啟終端，輸入以下命令。在安裝babel之前，需要初始化我們的專案

F:\HTMl\babel> npm init -y

3.這時會產生一個package.json檔案，name可以進行修改

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

4.全域性安裝Babel-cli

npm install -g babel-cli

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

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

這時開啟package.json檔案，多了一個

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

6.新建.babelrc ，在根目錄下新建.babelrc檔案，並錄入以下的程式碼

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

這個檔案建立後，就可以在終端輸入的轉換命令了，將ES6成功轉化為ES5的語法。

F:\HTMl\babel>babel src/index.js -o dist/index.js

問題：

Couldn't find preset "es2015" relative to directory

解決方法：

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

出處：https://blog.csdn.net/qq_36525300/article/details/100905194