搭建基於babel的ES6開發環境
babel是一個轉碼器,能將ES6程式碼轉碼成我們現在的瀏覽器能執行的ES5程式碼。
使用3步來配置好一個基本的編譯環境:
1.安裝babel包
和一般的npm包一樣,babel在使用之前也需要進行安裝,使用全域性安裝
或者本地安裝
安裝都可以。
全域性安裝方式如下:
npm install --global babel-cli
2.配置.babelrc檔案
安裝完成之後,需要在專案根目錄下建立.babelrc檔案來來配置轉碼規則。windows系統無法直接建立.babelrc檔案,需要在根目錄下開啟cmd輸入以下命令建立:
type nul>.babelrc
建立之後開啟.babelrc檔案,寫入如下配置:
{
"presets":[
"es2015"
]
}
presets
引數是指需要轉碼的規則集合,我們需要將ES6程式碼轉為ES5,所以只需要寫入es2015
即可。
3.安裝轉碼規則集
配置好.babelrc中的轉碼規則之後,需要在本地安裝規則集。安裝方式如下:
npm install --save-dev babel-preset-es2015
以上3步安裝完成之後,就可以使用babel
來嘗試對檔案進行轉碼。
在專案根目錄中建立main.js
檔案,寫入如下程式碼:
let a = 1; let b = 2; const main=(a,b) => { return a+b; }
在根目錄下開啟cmd輸入如下轉碼命令:
babel main.js -o bundle.js
執行之後可以看到根目錄下建立了一個bundle.js
檔案,內容如下表示轉碼成功。
"use strict";
var a = 1;
var b = 2;
var main = function main(a, b) {
return a + b;
};
除了編譯單個檔案之外,babel還能將整個目錄的檔案統一編譯
babel app --out-dir dist
//或者
babel app -d dist
以上程式碼能將app
目錄下的檔案轉碼到dist
目錄中去。
全域性安裝方式使用babel,專案對全域性環境依賴性強,假如不同專案需要使用不同版本的babel就辦不到了。官方更加推薦使用本地安裝方式來使用babel,按照下面的的安裝方式來在專案中安裝babel。
npm install --save-dev babel-cli
安裝完成之後,就可以在package.json
檔案中配置babel的使用。
"scripts":{
"build":"babel app -d dist"
}
執行npm run build
就能實現和上面全域性方式使用的整個目錄轉碼了。
但是我們在開發的時候,每次檔案發生變化就需要重新執行一遍轉碼命令,實在太繁瑣了。
所以我們可以使用以下命令來監控檔案的實時變化,一旦檔案內容發生改變就自動進行轉碼(使用-w
或者--watch
)。
babel app/main.js --watch --out-file dist/main.js
babel app/main.js -w --out-file dist/main.js