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
    }]
  ]
}