使用Babel把ES6編譯成ES5
建立工程目錄：
先建立一個專案的工程目錄，並在目錄下邊建立兩個資料夾：src和dist
- src：書寫ES6程式碼的資料夾，寫的js程式都放在這裡。
- dist：利用Babel編譯成的ES5程式碼的資料夾，在HTML頁面需要引入的時這裡的js檔案。
編寫index.html：
資料夾建立好後，我們新建一個index.html檔案。
| 1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <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> |
需要注意的是在引入js檔案時，引入的是dist目錄下的檔案。
| 1 |
<script src="./dist/index.js"></script> |
編寫index.js
在src目錄下，新建index.js檔案。這個檔案很簡單，我們只作一個a變數的宣告，並用console.log()打印出來。
| 1 2 |
let a=1; console.log(a); |
我們用了let宣告，這裡let是ES6的一種宣告方式，接下來我們需要把這個ES6的語法檔案自動程式設計成ES5的語法檔案。
初始化專案
在安裝Babel之前，需要用npm init先初始化我們的專案。開啟終端或者通過cmd開啟命令列工具，進入專案目錄，輸入下邊的命令：
| 1 |
npm init -y |
-y代表全部默認同意，就不用一次次按回車了。命令執行完成後，會在專案根目錄下生產package.json檔案。
| 1 2 3 4 5 6 7 8 9 10 11 12 |
{ "name": "es6", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } |
可以根據自己的需要進行修改，比如我們修改name的值。
全域性安裝Babel-cli
在終端中輸入以下命令,如果你安裝很慢的話，可以使用淘寶映象的cnpm來進行安裝。安裝cnpm的方法，大家自己百度吧。
| 1 |
npm install -g babel-cli |
雖然已經安裝了babel-cli，只是這樣還不能成功進行轉換，如果你不相信可以輸入下邊的命令試一下。
| 1 |
babel src/index.js -o dist/index.js |
你會發現，在dist目錄下確實生產了index.js檔案，但是檔案並沒有變化，還是使用了ES6的語法。因為我們還需要安裝轉換包才能成功轉換，繼續往下看吧。
本地安裝babel-preset-es2015 和 babel-cli
| 1 |
npm install --save-dev babel-preset-es2015 babel-cli |
安裝完成後，我們可以看一下我們的package.json檔案，已經多了devDependencies選項。
| 1 2 3 4 |
"devDependencies": { "babel-cli": "^6.24.1", "babel-preset-es2015": "^6.24.1" } |
新建.babelrc
在根目錄下新建.babelrc檔案，並開啟錄入下面的程式碼
| 1 2 3 4 5 6 |
{ "presets":[ "es2015" ], "plugins":[] } |
這個檔案我們建立完成後，現在可以在終端輸入的轉換命令了，這次ES6成功轉化為ES5的語法。
| 1 |
babel src/index.js -o dist/index.js |
簡化轉化命令：
在學習vue 的時候，可以使用npm run build 直接利用webpack進行打包，在這裡也希望利用這種方式完成轉換。開啟package.json檔案，把檔案修改成下面的樣子。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "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 來進行轉換了。