摘要：是目前最常用的转的工具，但即使是，各浏览器的支持度也是不一的，因此便产生了本文，找出一些能够被翻译成兼容性高代码的语法。不可用因为会使用到参考资料，用来查浏览器兼容性。到底将代码转换成什么鸟样，感谢。官网试验转换后的代码
前言
由于目前各浏览器对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 #经查证，发现是构建中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
参考资料caniuse.com，用来查浏览器兼容性。
babel 到底将代码转换成什么鸟样？，感谢@lcxfs1991。
babel官网 - 试验转换后的代码
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/86361.html
摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。只是最近学习生态，用起来转换之余，也不免碰到诸多用上的教程案例，因此便稍作学习。在当前的浏览器市场下，想在生产环境用上，是必不可少的。 本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000006992218如果您对本系列文章感兴...
摘要：在上篇，我们主要抛出了两个问题，并给出了第一个问题的解决方案。没有的实例方法可以采用方案三委屈下。放弃模式，放弃上篇中提到了开启了模式来解决低版本浏览器无法继承到在构造函数里定义的属性或方法。 回顾 起因： 某天，某测试说：这个页面在 IE8 下白屏，9也白。。某前端开发: 吭哧吭哧。。。一上午的时间就过去了，搞定了。第二天，某测试说：IE 又白了。。某前端开发: 嘿咻嘿咻。。。谁用的...
摘要：起因某天，某测试说这个页面在下白屏，也白。。某前端开发吭哧吭哧。。。一上午的时间就过去了，搞定了。第二天，某测试说又白了。。某前端开发吭哧吭哧。。。谁用的，出来我保证削不屎你。原谅我不禁又黑了一把。 起因 某天，某测试说：这个页面在 IE8 下白屏，9也白。。 某前端开发: 吭哧吭哧。。。一上午的时间就过去了，搞定了。 第二天，某测试说：IE 又白了。。 某前端开发: 吭哧吭哧。。。谁...
摘要：它适用于普通的，而你无需关心要为哪些浏览器加前缀，只需全新关注于实现，并使用最新的规范。会调用所依赖的模块对文件进行编译包括语法。 前言 最近看到一篇文章《迷茫时学习Node.js最好的方法》一直以来对node的个人心理倾向于做前端工具，而不是web服务。所以一直以来都没好好学node。 基础配置 1.html-webpack-plugin 为html文件中引入的外部资源如script...
摘要：一作用根据你支持的环境自动决定适合你的插件二历史版本已被弃用特点包含了所有年度预设，无需用户单独指定某个预设。特点分别支持不同版本的规范，将转成，只将比新增加的特性转成。比如在整个应用里只能引入一次，可以在模块里一次引入。 一、作用 根据你支持的环境自动决定适合你的Babel插件 二、历史版本（已被弃用） 1、babel-preset-latest 1.1 特点 包含了所有年度预设（ ...
阅读 1444·2023-04-26 00:20
阅读 856·2023-04-25 21:49
阅读 780·2021-09-22 15:52
阅读 556·2021-09-07 10:16
阅读 919·2021-08-18 10:22
阅读 2628·2019-08-30 14:07
阅读 2207·2019-08-30 14:00
阅读 2613·2019-08-30 13:00
