babel-preset-es2015，babel-polyfill 與 babel-plugin-transform-runtime

babel-preset-es2015 是一個babel的插件，用於將部分ES6 語法轉換爲ES5 語法。轉換的語法包括：

1. 箭頭函數

   var a1 = () => 1
   編譯爲
   var a1 = function a1() {
       return 1;
   };

   var obj = {
       birth: 1990,
       getAge: function () {
           var fn = () => new Date().getFullYear() - this.birth
           return fn()
       }
   }
   
   編譯爲
   var obj = {
       birth: 1990,
       getAge: function getAge() {
           var _this = this;
   
           var fn = function fn() {
               return new Date().getFullYear() - _this.birth;
           };
           return fn();
       }
   };

    

2. class語法

   class Test {
       constructor (x, y) {
           this.x = x
           this.y = y
       }
   
       toString () {
           return '(' + this.x + ', ' + this.y + ')'
       }
   }

    

   繼承：
   class Testextend extends Test{
       constructor (x, y) {
           super(x, y)  // super表示父類的構造函數
           this.name = 'hello'
       }
   
       getName () {
           return 'haha'
       }
   }        

    

3. const和let  

   const con = 1
   con = 2  // babel編譯時會報錯 

   for (let i = 1; i < 5; i++) {
       setTimeout(function () {
           console.log(i)
       }, 100)
   }
   編譯爲：
   var _loop = function _loop(i) {
       setTimeout(function () {
           console.log(i);
       }, 100);
   };
   
   for (var i = 1; i < 5; i++) {
       _loop(i);
   }

    

4. 對象屬性名錶達式：

   let a = {
      ['a'+'b']: 1
   }

    

5. 對象簡寫

   var o = { a, b, c };
   
   var cat = {
     getName() {
        return name;
     }
   };

    

6. 函數參數的新語法：【默認參數 、剩餘參數 】

   function test1 (a = 1, b = 2) {
       alert(a + b)
   }
   編譯爲
   function test1() {
       var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
       var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
   
       alert(a + b);
   }

   function test2 (a, ...args) {
       console.log(args)
   }
   編譯爲
   function test2(a) {
       for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
           args[_key - 1] = arguments[_key];
       }
   
       console.log(args);
   }

    

7. 解構賦值

   let [q, w, e] = [1, 2, 3] 
   編譯爲
   var q = 1,
        w = 2,
        e = 3;
   

   let {r: ss, t, y} = {r: 1, t: 2, y: 3} 
   編譯爲
   var _r$t$y = { r: 1, t: 2, y: 3 },
       ss = _r$t$y.r,
       t = _r$t$y.t,
       y = _r$t$y.y;

    

8. 字符串模板

   let str1 = 'hel'
   let str2 = 'ld'
   let str3 = '科科'
   let str4 = `${str1}lo 
   wor${str2}!
   ${str3}`
   
   編譯爲
   var str1 = 'hel';
   var str2 = 'ld';
   var str3 = '科科';
   var str4 = str1 + 'lo \nwor' + str2 + '!\n' + str3;

   （8以後的須要polify支持才能在不徹底支持es2015的瀏覽器正常使用）

9. for-of
10. ES2015 modules 轉換爲 CommonJS
11. generator語法轉換
12. 正則表達式u修飾符 等

（項目中如今通常直接使用babel-preset-env，她整合了babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017，並且能夠配置須要支持的瀏覽器/運行環境，僅轉化須要支持的語法，使文件更輕量）

 

可是babel-preset-es2015並不會轉換promise、generator等函數，咱們還要引入babel-polify庫。

使用babel-polify時，須要在你的業務代碼中，在使用ES6的新函數 前經過<script> 或require 等 引入 babel-polyfill（就像引入jquery同樣），她會把promise等函數添加到全局對象上；

 

 

 

babel-plugin-transform-runtime 插件作了如下三件事：

 

• 當你使用 generators/async 函數時，自動引入 babel-runtime/regenerator （使用 regenerator 運行時而不會污染當前環境） 。
• 自動引入 babel-runtime/core-js 並映射 ES6 靜態方法和內置插件（實現polyfill的功能且無全局污染，可是實例方法沒法正常使用，如   "foobar".includes("foo") ）。
• 移除內聯的 Babel helper 並使用模塊 babel-runtime/helpers 代替（提取babel轉換語法的代碼）。

　　　　他們分別對應下面三個配置(默認都爲true)

{
  "plugins": [
    ["transform-runtime", {　　　 "regenerator": true,
      "polyfill": true, 　　　 "helpers": true
    }]
  ]
}