Babel下的ES6兼容性与规范

ES6标准发布后，前端人员也开发渐渐了解到了es6，但是由于兼容性的问题，仍然没有得到广泛的推广，不过业界也用了一些折中性的方案来解决兼容性和开发体系问题，但大家仍很疑惑，使用ES6会有哪些兼容性问题。

一、兼容性问题现状

针对ES6的新特性兼容性问题，目前解决的方案是使用语法解析转换工具将es6语法转化为大部分浏览器识别的es5语法，通用的转化方案有babel，traceur，jsx，typescript，es6-shim。当然es6在服务器端也存在兼容性问题，这里由于只考虑到浏览器端的开发，暂不讨论。下面有一些常用的解决方案和兼容es6的兼容性比较~

https://github.com/babel/babel/issues/596 (es6的兼容解决方案很多，这里只讨论最常用的几种) http://kangax.github.io/compat-table/es6/

考虑到解决方案的多样性，我么会着重考虑以下几个问题： 1，兼容性：是否能解决目前常见的所有语法兼容转换 2，易用性：能够很方便的接入到现有的开发构建体系中 3，通用性：业界有较大认可，目前没有很大问题 4，持续性：有较权威的团队维护，并能不断更新

综合四点，我们仍然考虑使用babel作为我们的兼容性解决方案。即使以后需要更换，只需要更换更换工具就可以了，原有代码的写法可以不动。 除了后面三点，我们可能比较关注babel处理es6时的兼容性问题。因为es6里面增加了较多的内容，转换为es5没有对应语法与之对应，所以使用时要尤为注意。为此也没有很好的方法进行判断，只能对于es6里的新增内容进行编译，判断是否可以转为es5语法。

ES6新特性在Babel下的兼容性列表

ES6特性 兼容性
箭头函数 支持
类的声明和继承 部分支持，IE8不支持
增强的对象字面量 支持
字符串模板 支持
解构 支持，但注意使用方式
参数默认值，不定参数，拓展参数 支持
let与const 支持
for of IE不支持
iterator, generator 不支持
模块 module、Proxies、Symbol 不支持
Map，Set 和 WeakMap，WeakSet 不支持
Promises、Math，Number，String，Object 的新API 不支持
export & import 支持
生成器函数 不支持
数组拷贝 支持

在es6的新特性中，复杂结构的仍然不支持对es5转换的兼容，具体兼容性可以从下面实例来看~

1.1 箭头操作符

箭头操作符可以简洁的描述一个函数

// ES6
var fn= (v=>console.log(v));

转换后

 // ES6
"use strict";

var fn = function fn(v) {
  return console.log(v);
};

该用法可以放心使用。

1.2 类的声明和继承

//类的定义
class Animal {
  //ES6中新型构造器
  constructor(name) {
    this.name = name;
  }
  //实例方法
  sayName() {
    console.log(‘My name is ‘+this.name);
  }
}
//类的继承
class Programmer extends Animal {
  constructor(name) {
    //直接调用父类构造器进行初始化
    super(name);
  }
  program() {
    console.log("I‘m coding...");
  }
}
//测试我们的类
var animal=new Animal(‘dummy‘),
wayou=new Programmer(‘wayou‘);
animal.sayName();//输出 ‘My name is dummy’
wayou.sayName();//输出 ‘My name is wayou’
wayou.program();//输出 ‘I‘m coding...’

转换后

//类的定义
‘use strict‘;
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if (‘value‘ in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (‘value‘ in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
function _inherits(subClass, superClass) { if (typeof superClass !== ‘function‘ && superClass !== null) { throw new TypeError(‘Super expression must either be null or a function, not ‘ + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(‘Cannot call a class as a function‘); } }
var Animal = (function () {
  //ES6中新型构造器
  function Animal(name) {
    _classCallCheck(this, Animal);
    this.name = name;
  }
  //类的继承
  //实例方法
  _createClass(Animal, [{
    key: ‘sayName‘,
    value: function sayName() {
      console.log(‘My name is ‘ + this.name);
    }
  }]);
  return Animal;
})();
var Programmer = (function (_Animal) {
  _inherits(Programmer, _Animal);
  function Programmer(name) {
    _classCallCheck(this, Programmer);
    //直接调用父类构造器进行初始化
    _get(Object.getPrototypeOf(Programmer.prototype), ‘constructor‘, this).call(this, name);
  }
  //测试我们的类
  _createClass(Programmer, [{
    key: ‘program‘,
    value: function program() {
      console.log("I‘m coding...");
    }
  }]);
  return Programmer;
})(Animal);
var animal = new Animal(‘dummy‘),
  wayou = new Programmer(‘wayou‘);
animal.sayName(); //输出 ‘My name is dummy’
wayou.sayName(); //输出 ‘My name is wayou’
wayou.program(); //输出 ‘I‘m coding...’

转换过程使用了Object.defineProperty，在ie8下不兼容，除此外可以任意使用

1.3 增强的对象字面量

//通过对象字面量创建对象
var human = {
  breathe() {
    console.log(‘breathing...‘);
  }
};
var worker = {
  __proto__: human, //设置此对象的原型为human,相当于继承human
  company: ‘freelancer‘,
  work() {
    console.log(‘working...‘);
  }
};
human.breathe();//输出 ‘breathing...’
//调用继承来的breathe方法
worker.breathe();//输出 ‘breathing...’

转换后

//通过对象字面量创建对象
‘use strict‘;
var human = {
  breathe: function breathe() {
    console.log(‘breathing...‘);
  }
};
var worker = {
  __proto__: human, //设置此对象的原型为human,相当于继承human
  company: ‘freelancer‘,
  work: function work() {
    console.log(‘working...‘);
  }
};
human.breathe(); //输出 ‘breathing...’
//调用继承来的breathe方法
worker.breathe(); //输出 ‘breathing...’

这个可以任意使用

1.4 字符串模板

//产生一个随机数
var num=Math.random();
console.log(`your num is ${num}`);

转换后

//产生一个随机数
"use strict";

var num = Math.random();
console.log("your num is " + num);

1.5 解构

var [name,gender,age]=[‘wayou‘,‘male‘,‘secrect‘];//数组解构
console.log(‘name:‘+name+‘, age:‘+age);//输出： name:wayou, age:secrect

转化后

‘use strict‘;

var name = ‘wayou‘;
var gender = ‘male‘;
var age = ‘secrect‘;
//数组解构
console.log(‘name:‘ + name + ‘, age:‘ + age); //输出： name:wayou, age:secrect

此方法可以使用。但是尽量不要使用 var [a, b] = getVal(); 的方式，尽管getVal返回一个数组。因为此时会用到isArray，IE8上不能支持。

1.6 参数默认值，不定参数，拓展参数

  • 参数默认值
function sayHello(age, name=‘dude‘){
    console.log(`Hello ${name}`);
}
sayHello(12);

转换后

‘use strict‘;

function sayHello(age) {
    var name = arguments.length <= 1 || arguments[1] === undefined ? ‘dude‘ : arguments[1];

    console.log(‘Hello ‘ + name);
}
sayHello(12);
  • 不定参数
//将所有参数相加的函数
function add(...x){
  return x.reduce((m,n)=>m+n);
}
//传递任意个数的参数
console.log(add(1,2,3));//输出：6
console.log(add(1,2,3,4,5));//输出：15

转换后

//将所有参数相加的函数
"use strict";
function add() {
  for (var _len = arguments.length, x = Array(_len), _key = 0; _key < _len; _key++) {
    x[_key] = arguments[_key];
  }
  return x.reduce(function (m, n) {
    return m + n;
  });
}
//传递任意个数的参数
console.log(add(1, 2, 3)); //输出：6
console.log(add(1, 2, 3, 4, 5)); //输出：15
  • 扩展参数
var people=[‘Wayou‘,‘John‘,‘Sherlock‘];
//sayHello函数本来接收三个单独的参数人妖，人二和人三
function sayHello(people1,people2,people3){
  console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我们将一个数组以拓展参数的形式传递，它能很好地映射到每个单独的参数
sayHello(...people);//输出：Hello Wayou,John,Sherlock
//而在以前，如果需要传递数组当参数，我们需要使用函数的apply方法
sayHello.apply(null,people);//输出：Hello Wayou,John,Sherlock

转换后

‘use strict‘;
var people = [‘Wayou‘, ‘John‘, ‘Sherlock‘];
//sayHello函数本来接收三个单独的参数人妖，人二和人三
function sayHello(people1, people2, people3) {
  console.log(‘Hello ‘ + people1 + ‘,‘ + people2 + ‘,‘ + people3);
}
//但是我们将一个数组以拓展参数的形式传递，它能很好地映射到每个单独的参数
sayHello.apply(undefined, people); //输出：Hello Wayou,John,Sherlock
//而在以前，如果需要传递数组当参数，我们需要使用函数的apply方法
sayHello.apply(null, people); //输出：Hello Wayou,John,Sherlock

参数默认值，不定参数，拓展参数都可以完全使用

1.7 let与const

let和const完全支持，将都会被转为var，但是要理解let、var、const的区别。

1.8 for of

var someArray = [ "a", "b", "c" ];

for (v of someArray) {
    console.log(v);//输出 a,b,c
}

转换后

"use strict";

var someArray = ["a", "b", "c"];

var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
  for (var _iterator = someArray[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
    v = _step.value;

    console.log(v); //输出 a,b,c
  }
} catch (err) {
  _didIteratorError = true;
  _iteratorError = err;
} finally {
  try {
    if (!_iteratorNormalCompletion && _iterator["return"]) {
      _iterator["return"]();
    }
  } finally {
    if (_didIteratorError) {
      throw _iteratorError;
    }
  }
}

这里IE下面没有throw，所以无法支持

1.9 iterator, generator

var ids = {
  *[Symbol.iterator]: function () {
    var index = 0;

    return {
      next: function () {
        return { value: ‘id-‘ + index++, done: false };
      }
    };
  }
};

转换后

‘use strict‘;

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var ids = _defineProperty({}, Symbol.iterator, function () {
  var index = 0;

  return {
    next: function next() {
      return { value: ‘id-‘ + index++, done: false };
    }
  };
});

不建议使用，转换后仍需要浏览器支持

1.10 模块 module、Proxies、Symbol

// point.js
module "point" {
  export class Point {
    constructor (x, y) {
      public x = x;
      public y = y;
    }
  }
}

完全不支持，import也不支持，解析报错，所以建议不使用，使用原来的require

1.11 Map，Set 和 WeakMap，WeakSet

Map，Set 和 WeakMap，WeakSet在es5中都没有对应的类型与之对应，所以均不支持转换，由浏览器决定兼容性

1.12 Promises、Math，Number，String，Object 的新API

不做语法转换，由浏览器决定兼容性

1.13 export & import

export function myModule(someArg) {
  return someArg;
}

转换后

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.myModule = myModule;

function myModule(someArg) {
  return someArg;
}

import * as baz from ‘myModule‘;

转换后

‘use strict‘;

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj[‘default‘] = obj; return newObj; } }

var _myModule = require(‘myModule‘);

var baz = _interopRequireWildcard(_myModule);

所以可以使用export和import等方法来进行模块的加载处理依赖，同时export使用到了defineProperty，IE8兼容性存在问题。

1.14 生成器函数

function* foo() { };
var bar = foo();
bar.next(); // Object {value: undefined, done: true}

转换后

"use strict";

var marked0$0 = [foo].map(regeneratorRuntime.mark);
function foo() {
  return regeneratorRuntime.wrap(function foo$(context$1$0) {
    while (1) switch (context$1$0.prev = context$1$0.next) {
      case 0:
      case "end":
        return context$1$0.stop();
    }
  }, marked0$0[0], this);
};
var bar = foo();
bar.next(); // Object {value: undefined, done: true}

regeneratorRuntime在IE下面不能支持，所以不建议使用。

ES6新特性用到的就这些，其它的基本由浏览器本身决定。这部分代码Babel会像处理es5代码一样，不进行加工处理。对于部分ES6的语法，Babel会解析抛错，即使不抛错也不进行处理，建议不使用。 1.15 数组拷贝

const items = [1,2,3];
const itemsCopy = [...items];

转换后

"use strict";

var items = [1, 2, 3];
var itemsCopy = [].concat(items);

可以使用

二、ES6打包体系

使用babel处理了一部分ES6的兼容性转换问题，但是ES6的打包依然必须依赖目前通用的打包管理方案。目前流行的打包方案有以下几种 1，webpack+babel+browsify+gulp gulp负责构建、使用webpack打包、browsify管理组件，babel转换 这目前被说的最多的解决方案，因为github上一大堆例子，而且可以很简单的支持到react，但是这样不能形成一个完整的开发体系；另外过于统一，和所在团队使用的技术差异较大。

2，fis3 + babel + Qjs + lego 选择这样的方案一方面是因为团队目前的主要技术选型，另一方面则是每个工具的特有优势。目前这块仍在不断完善当中。

三、小结

所以使用ES6这一方案来进行实际开发是否有一定的必要性仍需要进行考虑，因为es6的高等特性在es5中没有对应的特性去代替，即使能够代替也是使用一些复杂的自定义函数去做，而部分可转换实现的特性仍然较少，而且写起来确实很简洁，这也是es6的一大优势。

另外为了让Babel能在实际的开发中使用，我们也自己总结了一份关于ES6部分的规范：

   https://github.com/ouvens/ecmaScript-2015-babel-rules

时间： 2024-10-27 04:22:47

Babel下的ES6兼容性与规范的相关文章

兼容性测试规范-移动端

摘要:一般的兼容性测试以版本迭代为周期.在产品测试阶段以及上线验证阶段进行.在此规范中将详细说明我们的规范形成依据,以及在此基础上的详细分析和对应的兼容性测试规范,包括如下方面:(1)需要进行兼容性测试的机型:(2)需要进行兼容性测试的项目种类:(2)进行兼容性测试设计的项目阶段:(3)兼容性测试计划的设计和创建:(4)兼容性测试用例设计:(5)兼容性测试计划执行.此规范每三个月将更新一次. 1       兼容性测试规范背景 在不同的操作系统.不同的生产厂家.不同的机型系列.设备分辨率.网络环

通过修改manifest文件来解决Vista/Win7/Win8下应用程序兼容性问题

在Vista/Win7/Win8下,有一个系统兼容性助手功能,在安装程序安装完成或卸载完成后,可能会弹出应用程序兼容性助手相关的提示,提示程序可能安装不正确,很是烦人.如下图所示: 事实上,我们的程序兼容性是没问题的,只不过是在程序中没有指定应用程序兼容的操作系统,所以导致了这些问题.      VS2008和VS2010可以生成一个与exe应用程序相关联的.manifest文件,微软已经为该文件中添加了一个新的<compatibility> 字段, 这个字段用来指定你的应用程序可以兼容的操作

利用babel自动编译es6文件

一.检查File-Watchers中Babel的Arguments,有一项presets的设置,把他更改为=es2015,详细设置如下: $FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets=es2015 二.把JavaScript language version改成ECMAScript 6: 安装base后,增加base的watch IDE会出现一个File watcher提示条 先别点Add watch

用babel转码ES6

首先可以用es-checker检测一下本机对ES6的支持程度 npm install -g es-checker && es-checker 可见,不支持ES6的import和export语法,我们可以写个有该语法的脚本运行下. 创建项目文件夹,结构如下: lib.js: export var a = 10; main.js: import { a } from './lib'; console.log(a); 执行  node main.js 发现确实无法执行.此时我们可以用babel进

babel转码es6具体说明

之前一直vue脚手架直接就建立了webpack很多东西都是自主转码的,今天仔细查看了一下babel,发现了这个还是有很多需要研究的东西. 1.babel-node babel-cli工具自带的babel-node命令,提供一个支持es6的REPL环境.支持在node的REPL环境的所有功能.可以直接运行ES6代码 2.babel-register 改写require命令,可以直接require在加载.js .jsx .es .es6 后缀名的文件,会事先用Babel进行转码 3.babel-co

IE6下CSS常见兼容性问题及解决方案

1. 在IE6元素浮动,如果宽度需要内容撑开,就给里面的块元素加浮动. 2. IE6下最小高度问题:在IE6下元素高度小于19px的时候,会被当作19px处理.解决方案:给元素加 overflow:hidden. 3. border:1px dotted #000: 1px dotted 在IE6下不支持 解决方案:切背景平铺 4. margin传递:解决方案:a.父级或自己浮动; b.给元素加 overflow:hidden;zoom:1; 5. 在IE6下父级有边框的时候,子元素的margi

【Linux笔记】细说linux系统下共享库的命名规范和使用方法

1. Shared Library的优势 共享库,又称动态库或so文件,顾名思义,它可以在可执行文件启动时加载或进程运行期被调用.使用共享库有很多好处,例如(包含但不限于下面提到的场景): 1) 减少了依赖共享库的模块的大小,因为它们不必把共享库提供的功能的实现代码静态编译到自己的模块代码中. 2) 在同一台机器上运行的多个进程会在内存中共享同一份动态库,操作系统采用的这种内存布局方式可以极大地节省机器内存资源. 3) 若很多模块依赖了以共享库形式提供的同一个底层库,则底层库升级时,只需升级该s

解决ie8下h5元素兼容性的问题

<header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义补充或相关内容: Ⅰ. <!--[if lt IE 9]> <script> (function() { if (! /*@[email protected]*/ 0) return;

[译]使用Babel和Broserify创建你的ES6项目

原文地址:Setting up an ES6 Project Using Babel and Browserify JavaScript的发展日新月异,ES6很快就要接管JS了.很多著名的框架像AngularJS 2.React Native已经开始支持ES6了.我们是时候准备拥抱变化了,所以我们应该开始在几乎所有的浏览器支持之前使用ES6码代码了. 本文将要介绍如何使用Babel和Browerify来创建项目并且编写能够运行在老版本浏览器上的现代代码.Babel将ES6代码编译为大多数浏览器(