2023年6月21日发(作者：)
解决⽼浏览器不⽀持ES6的⽅法转载地址：/?p=669
为什么ES6会有兼容性问题？由于⼴⼤⽤户使⽤的浏览器版本在发布的时候也许早于ES6的定稿和发布，⽽到了今天，我们在编程中如果使⽤了ES6的新特性，浏览器若没有更新版本，或者新版本中没有对ES6的特性进⾏兼容，那么浏览器肯定⽆法识别我们的ES6代码，好⽐浏览器根本看不懂我写的let和const是什么东西？只能报错了。这就是浏览器对ES6的兼容性问题。好消息哪⾥有灾难，哪⾥就有勇⼠和救兵，针对ES6的兼容性问题，很多团队为此开发出了多种语法解析转换⼯具，把我们写的ES6语法转换成ES5，相当于在ES6和浏览器之间做了⼀个翻译官。⽐较通⽤的⼯具⽅案有babel，jsx，traceur，es6-shim等。此外，浏览器⾃⾝也加快速度兼容ES6的新特性，其中对ES6新特性最友好的是Chrome和Firefox浏览器。各⼤转换⼯具、解析引擎对ES6的⽀持程度情况，可以参查看这个地址：坏消息即使浏览器对ES6新特性开始渐渐⽀持，但是这还需要很长⼀段时间，我们不能百分百依赖浏览器本⾝对ES6的⽀持度来开发。虽然出现了各种转换⼯具，但是到⽬前为⽌，还没有⼀款⼯具能百分百将ES6的新特性完美地转换成ES5，因为在ES6新增的内容中，存在⼀些⽆法在ES5中找到与之匹配的语法，所以不建议在⽣产环境中使⽤⽀持度较低的新特性，后续的教程章节中介绍的新特性前端君也会特意提醒它的兼容性。学习热情不减但是，这并不影响我们学习ES6的热情，因为ES6是未来的标准，浏览器⽀持只是迟早的事。本节介绍其中⼀个转换⼯具的安装和使⽤情况，安装使⽤以简单为主，主要是让新⼿和刚接触的同学对转换⼯具有感性的认知。再次表明，即使使⽤了转换⼯具，我们还是不建议在⽣产环境⼤量地使⽤ES6的特性。使⽤转换⼯具babel我们选择Babel作为学习和讲解的⼯具，以及最多⼈使⽤的windows作为。接下来的前端君建议你打开电脑，跟着教程⼀步步操作。（没有也不要紧，先收藏此⽂）步骤1：制作ES6⽂件新建⼀个html⽂件，取名为：，加上含有ES6新特性的代码，⽐如：步骤2：测试const兼容性我们在chrome浏览器（版本不能太低）运⾏，会正常运⾏，弹出“张三”。接下来我们运⾏在IE 9，会看到这样的情况：IE 9浏览器会提⽰我们第9⾏出现⼀个语法错误，相当于告诉我们它看不懂const是什么⿁，但是学过ES6⼊门系列第三节的我们都知道const是ES6的新增关键字，⽤于声明⼀个常量。这个时候我们知道const在IE9浏览器出现了兼容性问题了。下⾯我们开始⽤Babel来兼容它。我们可以使⽤npm来安装babel，npm是随同Nodejs⼀起安装的包管理⼯具，新版的nodejs已经继承了npm，我们只要安装nodejs即可。对于nodejs的安装，不在本节的学习范围，我就不作展开说明了……….才怪。（说好的简单易懂，前端君怎么会半途掉链⼦）步骤3：安装node来，没安装过的node的同学，我们来⼀起安装：（nodejs官⽹⾸页截图）我们点击v4.4.5LTS进⾏下载，下载后找到双击运⾏,点击next（下⼀步）安装即可。期间你可以⾃定义选择安装的位置，默认是C:ProgramFiles。最后⼀步点击 Finish（完成）按钮退出安装向导。步骤4：检测node是否安装成功安装结束后，我们检测是否安装成功：点击 “开始”-> “运⾏”-> 输⼊“cmd”-> 进⼊命令提⽰符窗⼝，输⼊“node –version”来检测当前node的版本。出现：v4.4.5就表⽰安装成功，因为我们下载的就是v4.4.5LTS。步骤5：⽤npm安装babel好了，node安装好了，也就是它集成的npm包管理⼯具也安装好了，接下来，我们利⽤npm来安装我们最想要的babel。同样我们启动命令提⽰符窗⼝并且输⼊：npm install babel-core@5，然后回车，这⾥要稍等⽚刻：看到上⾯的界⾯就是表⽰你安装babel成功，你会在电脑盘中找到这样的⽬录：C:UsersAdministratornode_modulesbabel-core，打开后你会看到：在这个⽬录⾥⾯我们找到babel的浏览器版本(未压缩版)和(压缩版)。步骤6：使⽤babel然后我们将这个⽂件使⽤在我们的中。我们把引⼊（⽂件位置的路径要确保正确）。并且设置第⼆个script标签的type为”text/babel”。步骤7：让const运⾏在IE9浏览器上然后我们再在IE9浏览器上运⾏⼀下：这个时候IE9能正常运⾏我们的ES6新特性了，也就是babel转换起作⽤了，讲const转换成IE9能执⾏的代码了。这节内容操作教学的⽐较多，属于很⼲的⼲货，很多东西没有展开讲解，⽐如：node是什么？命令提⽰符怎么操作等问题，对于刚刚接触编程的新⼿来说，如果看不懂或者很多不理解也没关系，不会阻碍后⾯章节的学习，因为你可以使⽤Chrome或者Firefox浏览器进⾏学习和练习，在这两款浏览器上可以执⾏⼤部分的ES6新特性，不需要使⽤类似babel的转换⼯具。这⼀节的讲解只是作为⼀个学习的⼊门案例，起到抛砖引⽟的作⽤，让新⼿们能对ES6的兼容问题和babel转换⼯具有个感性认知，并没有覆盖所有兼容⽅案的介绍，以后的开发中我们⼀定会发现更多关于ES6特性的坑，也会找到更多相对应的解决办法。填上这些坑，就是进步的表现。本节总结总结：⽬前，浏览器和转换⼯具并没有百分百⽀持ES6的全部新特性，但并不影响⼤家对ES6的学习热情，因为这是未来的⾏业标准，者必须掌握的技能；⽽今天介绍的babel就是⽬前对 ES6 的⽀持程度较⾼，使⽤⼴泛的ES6转码器。
2023年6月21日发(作者：)
解决⽼浏览器不⽀持ES6的⽅法转载地址：/?p=669
为什么ES6会有兼容性问题？由于⼴⼤⽤户使⽤的浏览器版本在发布的时候也许早于ES6的定稿和发布，⽽到了今天，我们在编程中如果使⽤了ES6的新特性，浏览器若没有更新版本，或者新版本中没有对ES6的特性进⾏兼容，那么浏览器肯定⽆法识别我们的ES6代码，好⽐浏览器根本看不懂我写的let和const是什么东西？只能报错了。这就是浏览器对ES6的兼容性问题。好消息哪⾥有灾难，哪⾥就有勇⼠和救兵，针对ES6的兼容性问题，很多团队为此开发出了多种语法解析转换⼯具，把我们写的ES6语法转换成ES5，相当于在ES6和浏览器之间做了⼀个翻译官。⽐较通⽤的⼯具⽅案有babel，jsx，traceur，es6-shim等。此外，浏览器⾃⾝也加快速度兼容ES6的新特性，其中对ES6新特性最友好的是Chrome和Firefox浏览器。各⼤转换⼯具、解析引擎对ES6的⽀持程度情况，可以参查看这个地址：坏消息即使浏览器对ES6新特性开始渐渐⽀持，但是这还需要很长⼀段时间，我们不能百分百依赖浏览器本⾝对ES6的⽀持度来开发。虽然出现了各种转换⼯具，但是到⽬前为⽌，还没有⼀款⼯具能百分百将ES6的新特性完美地转换成ES5，因为在ES6新增的内容中，存在⼀些⽆法在ES5中找到与之匹配的语法，所以不建议在⽣产环境中使⽤⽀持度较低的新特性，后续的教程章节中介绍的新特性前端君也会特意提醒它的兼容性。学习热情不减但是，这并不影响我们学习ES6的热情，因为ES6是未来的标准，浏览器⽀持只是迟早的事。本节介绍其中⼀个转换⼯具的安装和使⽤情况，安装使⽤以简单为主，主要是让新⼿和刚接触的同学对转换⼯具有感性的认知。再次表明，即使使⽤了转换⼯具，我们还是不建议在⽣产环境⼤量地使⽤ES6的特性。使⽤转换⼯具babel我们选择Babel作为学习和讲解的⼯具，以及最多⼈使⽤的windows作为。接下来的前端君建议你打开电脑，跟着教程⼀步步操作。（没有也不要紧，先收藏此⽂）步骤1：制作ES6⽂件新建⼀个html⽂件，取名为：，加上含有ES6新特性的代码，⽐如：步骤2：测试const兼容性我们在chrome浏览器（版本不能太低）运⾏，会正常运⾏，弹出“张三”。接下来我们运⾏在IE 9，会看到这样的情况：IE 9浏览器会提⽰我们第9⾏出现⼀个语法错误，相当于告诉我们它看不懂const是什么⿁，但是学过ES6⼊门系列第三节的我们都知道const是ES6的新增关键字，⽤于声明⼀个常量。这个时候我们知道const在IE9浏览器出现了兼容性问题了。下⾯我们开始⽤Babel来兼容它。我们可以使⽤npm来安装babel，npm是随同Nodejs⼀起安装的包管理⼯具，新版的nodejs已经继承了npm，我们只要安装nodejs即可。对于nodejs的安装，不在本节的学习范围，我就不作展开说明了……….才怪。（说好的简单易懂，前端君怎么会半途掉链⼦）步骤3：安装node来，没安装过的node的同学，我们来⼀起安装：（nodejs官⽹⾸页截图）我们点击v4.4.5LTS进⾏下载，下载后找到双击运⾏,点击next（下⼀步）安装即可。期间你可以⾃定义选择安装的位置，默认是C:ProgramFiles。最后⼀步点击 Finish（完成）按钮退出安装向导。步骤4：检测node是否安装成功安装结束后，我们检测是否安装成功：点击 “开始”-> “运⾏”-> 输⼊“cmd”-> 进⼊命令提⽰符窗⼝，输⼊“node –version”来检测当前node的版本。出现：v4.4.5就表⽰安装成功，因为我们下载的就是v4.4.5LTS。步骤5：⽤npm安装babel好了，node安装好了，也就是它集成的npm包管理⼯具也安装好了，接下来，我们利⽤npm来安装我们最想要的babel。同样我们启动命令提⽰符窗⼝并且输⼊：npm install babel-core@5，然后回车，这⾥要稍等⽚刻：看到上⾯的界⾯就是表⽰你安装babel成功，你会在电脑盘中找到这样的⽬录：C:UsersAdministratornode_modulesbabel-core，打开后你会看到：在这个⽬录⾥⾯我们找到babel的浏览器版本(未压缩版)和(压缩版)。步骤6：使⽤babel然后我们将这个⽂件使⽤在我们的中。我们把引⼊（⽂件位置的路径要确保正确）。并且设置第⼆个script标签的type为”text/babel”。步骤7：让const运⾏在IE9浏览器上然后我们再在IE9浏览器上运⾏⼀下：这个时候IE9能正常运⾏我们的ES6新特性了，也就是babel转换起作⽤了，讲const转换成IE9能执⾏的代码了。这节内容操作教学的⽐较多，属于很⼲的⼲货，很多东西没有展开讲解，⽐如：node是什么？命令提⽰符怎么操作等问题，对于刚刚接触编程的新⼿来说，如果看不懂或者很多不理解也没关系，不会阻碍后⾯章节的学习，因为你可以使⽤Chrome或者Firefox浏览器进⾏学习和练习，在这两款浏览器上可以执⾏⼤部分的ES6新特性，不需要使⽤类似babel的转换⼯具。这⼀节的讲解只是作为⼀个学习的⼊门案例，起到抛砖引⽟的作⽤，让新⼿们能对ES6的兼容问题和babel转换⼯具有个感性认知，并没有覆盖所有兼容⽅案的介绍，以后的开发中我们⼀定会发现更多关于ES6特性的坑，也会找到更多相对应的解决办法。填上这些坑，就是进步的表现。本节总结总结：⽬前，浏览器和转换⼯具并没有百分百⽀持ES6的全部新特性，但并不影响⼤家对ES6的学习热情，因为这是未来的⾏业标准，者必须掌握的技能；⽽今天介绍的babel就是⽬前对 ES6 的⽀持程度较⾼，使⽤⼴泛的ES6转码器。
发布评论