浏览器不识别ES6语法的解决方法

2017-10-24  本文已影响0人  杜小黑妞

1、为什么ES6会有兼容性问题?

由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性进行兼容,那么浏览器肯定无法识别我们的ES6代码,好比浏览器根本看不懂我写的let和const是什么东西?只能报错了。这就是浏览器对ES6的兼容性问题。

  1.1、Good news

 针对ES6的兼容性问题,很多团队为此开发出了多种语法解析转换工具,把我们写的ES6语法转换成ES5,相当于在ES6和浏览器之间做了一个翻译官。比较通用的工具方案有babel,jsx,traceur,es6-shim等。

此外,浏览器自身也加快速度兼容ES6的新特性,其中对ES6新特性最友好的是Chrome和Firefox浏览器。

各大转换工具、JavaScript解析引擎对ES6的支持程度情况,可以参查看这个地址:

http://kangax.github.io/compat-table/es6/

   1.2、Bad  news

即使浏览器对ES6新特性开始渐渐支持,但是这还需要很长一段时间,我们不能百分百依赖浏览器本身对ES6的支持度来开发。

虽然出现了各种转换工具,但是到目前为止,还没有一款工具能百分百将ES6的新特性完美地转换成ES5,因为在ES6新增的内容中,存在一些无法在ES5中找到与之匹配的语法,所以不建议在生产环境中使用支持度较低的新特性,后续的教程章节中介绍的新特性前端君也会特意提醒它的兼容性。

   1.3、But

但是,这并不影响我们学习ES6的热情,因为ES6是未来的标准,浏览器支持只是迟早的事。

本节介绍其中一个转换工具的安装和使用情况,安装使用以简单为主,主要是让新手和刚接触的同学对转换工具有感性的认知。再次表明,即使使用了转换工具,我们还是不建议在生产环境大量地使用ES6的特性。

2、使用转换工具babel(步骤如下)

  2.1、制作ES6文件

      新建一个html文件,取名为:ES6.html,加上含有ES6新特性的代码,

          例,

  2.2、测试const兼容性

      我们在chrome浏览器(版本不能太低)运行ES6.html,会正常运行,弹出“张三”。

       但是我们运行在IE 9,会看到这样的情况:

       IE9浏览器会提示我们第9行出现一个语法错误,相当于告诉我们它看不懂const是什么鬼,但是学过ES6入门系列第三节的我们都知道const是ES6的新增关键字,用于声明一个常量。这个时候我们知道const在IE9浏览器出现了兼容性问题了。

    2.3、安装node

        我们可以使用npm来安装babel,npm是随同Nodejs一起安装的包管理工具,新版的nodejs已经继承了npm,我们只要安装nodejs即可。

        (1)node官网(下载安装包.msi):https://nodejs.org/

      (2)我们点击v4.4.5LTS进行下载,下载后找到node-v4.4.5-x64.msi双击运行,点击next(下一步)安装即可。期间你可以自定义选择安装的位置,默认是C:\ProgramFiles\。最后一步点击 Finish(完成)按钮退出安装向导。

      2.4、检测node是否安装成功

          安装结束后,我们检测是否安装成功:

点击 “开始”-> “运行”-> 输入“cmd”-> 进入命令提示符窗口,输入“node –version”来检测当前node的版本。

出现:v4.4.5就表示安装成功,因为我们下载的就是v4.4.5LTS。

     2.5、用npm安装babel

        启动命令提示符窗口并且输入:npm install babel-core@5,然后回车,这里要稍等片刻:

      看到上面的界面就是表示你安装babel成功,你会在电脑盘中找到这样的目录:C:\Users\Administrator\node_modules\babel-core,打开后你会看到:

            在这个目录里面我们找到babel的浏览器版本browser.js(未压缩版)和browser.min.js(压缩版)。

        2.6、使用babel

          然后我们将这个文件使用在我们的ES6.html中。

        我们把browser.min.js引入(文件位置的路径要确保正确)。并且设置第二个script标签的type为”text/babel”。

        2.7、让const运行在IE9浏览器上

        这个时候IE9能正常运行我们的ES6新特性了,也就是babel转换起作用了,讲const转换成IE9能执行的代码了。

3、结语

    总结:目前,浏览器和转换工具并没有百分百支持ES6的全部新特性,但并不影响大家对ES6的学习热情,因为这是未来的行业标准,前端开发者必须掌握的技能;而今天介绍的babel就是目前对 ES6 的支持程度较高,使用广泛的ES6转码器。

上一篇下一篇

猜你喜欢

热点阅读