babel實踐

 

如今的主流瀏覽器尚未徹底兼容ES6的語法，如ie11就不支持箭頭函數。

使用過es6的人都知道，es6更加簡潔和強大，但是使用es6寫出來的代碼並不能獲得全部主流js引擎的支持，針對這一點，一個解決方案就是使用babel這個工具。

babel是一個js處理器，能夠對js代碼進行轉換，能夠轉換jsx、es6代碼等。這裏咱們使用它來把es6代碼轉爲es5代碼。

有以下js代碼：

let add = item => item + 1
console.log(add(1));

以上代碼能夠在chrome61 和 node 6.11 下執行，對於ie11，則運行報錯。

首先安裝babel指令：

npm install -g babel-cli

接着再安裝一個咱們須要用到的babel轉換規則（把js代碼轉爲es5）：

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

通知babel去應用這個規則，咱們要在項目的根目錄添加一個 .babelrc 文件：

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

以上三個步驟完成後，能夠開始進行轉換了。執行：

babel -d dist/ index.js

以上會把index.js文件轉換的代碼存放在當前目錄的dist目錄下。轉換結果：

let add = item => item + 1
console.log(add(1));

// after convert :


"use strict";

var add = function add(item) {
  return item + 1;
};
console.log(add(1));

轉換後的代碼能夠在ie11中運行了。

---

 以上這個小例子明白後，來看看第二個例子。

class Person {
    constructor( name ) {
        this.name = name;
    }
    sayHello() {
        return `Hello ${ this.name }!`;
    }
    sayHelloThreeTimes() {
        let hello = this.sayHello();
        console.log(`${ hello } `.repeat(3));
    }
}
new Person('ben').sayHelloThreeTimes()

　　這段代碼一樣沒辦法直接在ie11上運行，對這段代碼進行相似第一個例子中的轉換後，依然沒法運行，提示以下：對象不支持「repeat」屬性或方法 

　　這裏有很重要的一點值得關注，babel 中的  babel-preset-es2015 這條規則只會轉換語法，卻不會轉換新的api 。而以上的字符串repeat方法是es6新增的api，ie11不支持這個特性，就報錯了。

　　使瀏覽器支持新的api。這個需求很經常使用，一般的解決辦法就是使用墊片庫（polyfill），而在babel生態裏邊就有對應的墊片庫，叫作babel-polyfill。首先下載：

npm install --save babel-polyfill

　　下載好了以後，使用這個墊片庫有兩種方式：

// 使用方式1：在新api所在的js中引入這個模塊，以下：
import 'babel-polyfill';

// 使用方式2：在html的頭部引入
<script src="node_modules/babel-polyfill/dist/polyfill.js"></script>

　　能夠這麼理解，只要這個庫被引入了，它就會自動往對應對象的原型上添加新api的定義，這樣後續你直接在js中使用新的api，也就不會報錯了。

雖然以上例子中的代碼只有十多行，可是查看編譯後的代碼，能明顯感受到稍微複雜了一些

對於這樣的代碼感受無法調試啊，裏面的代碼和本身寫的代碼都不同的。解決辦法是使用sourceMap，這個功能能將原來的代碼與編譯後的代碼進行關聯，雖然運行的是編譯後的代碼，可是裏面代碼的相對執行次序會反映到原來的代碼上。在編譯時多加一個參數：

babel -d dist/ index.js --source-maps

從新訪問頁面，調試窗口多出來一個文件，是能夠在裏面打斷點進行調試的：

裏面的代碼就是編譯前的代碼了