使用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 來進行轉換了。