1. 程式人生 > 其它 >搭建基於babel的ES6開發環境

搭建基於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