因为目前各浏览器对ES6兼容性较低,再加上须要兼容历史上各类版本的浏览器,所以,使用编译器将ES6语法转译成ES5语法则势在必行了。babel是目前最经常使用的ES6转ES5的工具,但即便是ES5,各浏览器的支持度也是不一的,所以便产生了本文,找出一些可以被翻译成兼容性高代码的ES6语法。javascript
IE10+
、android4.0+
、ios6+
。babel-preset-es2015-loose
,缘由以下:在android4.0下面报esModule错误的问题,以下:
Uncaught TypeError: Cannot assign to read only property '__esModule' of #<Object>。
经查证,发现是构建中babel-es2015 loader的模式问题,会致使Android4.0的用户有报错。只须要使用loose mode就能够解决问题。下面是相关的stackoverflow issue以及对应解决问题的npm包。java
const是由babel本身来判断是否抛出异常的,生成的代码只是普通的var;let则是改了下变量名,用的依然是var。android
之因此加“简单”,是由于简单的结构
转换出来的也就是简单的代码,没啥问题。可是若是是复杂的结构
,那就会用到Symbol.iterator
这兼容性不佳的方法了。webpack
这俩其实没省多少事,因此转换也很简单。ios
因为模块化主要仍是用在开发阶段,完事了打包到一块儿不会有什么奇怪的代码出现,所以这一点不须要担忧。web
/* 转换前 */ const prop2 = "PROP2"; var obj = { [prop2]: 3 }; /* 转换后 */ 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 prop2 = "PROP2"; var obj = _defineProperty({}, prop2, 3);
由上可知,这里用到了一个ES5方法Object.defineProperty
,MDN说是IE9+,android/ios全系列的。npm
转换出来的代码太多,没细看,咋一看也是有Object.defineProperty
,慎用吧,有经验的兄弟也能够说一声会不会出问题。segmentfault
由于会使用到Symbol.iterator
浏览器
@lcxfs1991
。