ES6部份要领点评（三）：babel-preset-es2015-loose可转换且挪动端兼容性较好的语法

2019年8月30日 297次阅读 来源: array_huang

媒介

由于现在各浏览器对ES6兼容性较低，再加上须要兼容历史上种种版本的浏览器，因而，运用编译器将ES6语法转译成ES5语轨则势在必行了。babel是现在最经常使用的ES6转ES5的东西，但即使是ES5，各浏览器的支撑度也是不一的，因而便产生了本文，找出一些能够被翻译成兼容性高代码的ES6语法。

议论基本

  • 兼容IE10+、android4.0+、ios6+。
  • 运用babel的一个preset：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包。

  • 作者运用webpack作为构建东西，并运用babel-loader挪用babel来举行转换，但实际上不会对转换出来的代码形成任何影响。

可用的ES6语法

  • const、let

const是由babel本身来推断是不是抛出非常的，天生的代码只是一般的var；let则是改了下变量名，用的依然是var。

  • 简朴的构造

之所以加“简朴”，是由于简朴的构造转换出来的也就是简朴的代码，没啥题目。然则如果是庞杂的构造，那就会用到Symbol.iterator这兼容性不佳的要领了。

  • 函数参数默认值
  • 箭头函数
  • 函数盈余参数（Rest Parameters）
  • 对象字面量扩大（Object Literal Extensions）中的精简属性、精简要领

这俩实在没省若干事，所以转换也很简朴。

  • 模板字符串（template string）
  • 模块化

由于模块化重要照样用在开辟阶段，完事了打包到一同不会有什么新鲜的代码涌现，因而这一点不须要忧郁。

慎用的ES6语法

  • 对象字面量扩大（Object Literal Extensions）中的盘算属性
/* 转换前 */
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全系列的。

  • 类

转换出来的代码太多，没细看，咋一看也是有Object.defineProperty，慎用吧，有履历的兄弟也能够说一声会不会出题目。

不可用

  • for…of

由于会运用到Symbol.iterator

参考资料

    原文作者：array_huang
    原文地址: https://segmentfault.com/a/1190000005688656
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞