• 简单搭建ES6的环境


    一、兼容情况

    说到ECMAScript6,顺便提一下ECMAScript5,先看一下ES5的兼容情况。ES5浏览器支持情况:
    Opera 11.60;Internet Explorer 9*;Firefox 4;Safari 5.1**;Chrome 13
    * IE9不支持严格模式 — IE10 添加
    ** Safari 5.1 仍不支持 Function.prototype.bind, 尽管Function.prototype.bind现在已经被
    Webkit所支持。

    具体ES5、ES6各浏览器支持情况可以查看
    ECMAScript5:http://kangax.github.io/compat-table/es5/
    ECMAScript6:http://kangax.github.io/compat-table/es6/

    二、兼容方法

    针对ES6的兼容性问题,很多团队为此开发出了多种语法解析转换工具,把ES6语法转换成ES5。
    比较通用的工具方案有babel,traceur,jsx,es6-shim等。
    此外,浏览器自身也加快速度兼容ES6的新特性,其中对ES6新特性最友好的是Chrome和Firefox
    浏览器。在使用ES6时,先不用引入任何东西,去测试,因为现在浏览器已经支持部分ES6功能,有的
    不需要转码,转码反而错误。
    我们用下面的代码去测试浏览器是否兼容ES6语法const
    <script>
    const Name = '张三';//使用新增的关键字:const声明常量
    alert(Name);
    </script>

    正常运行,会弹出“张三”,如果报错我们就知道是浏览器出现了兼容问题。当浏览器不支持
    ES6时,再用Babel和Traceur对ES6进行转码。

    三、使用Babel来兼容

    使用npm来安装babel,npm是和Nodejs一起安装的包管理工具,新版的nodejs已经继承了npm,我
    们只要安装nodejs即可。在node官网下载后缀为msi的最新安装包,下载后找到文件双击运行,点击下
    一步安装即可,期间可以自定义选择安装的位置,默认是C:ProgramFiles。启动命令提示符窗口,
    输入“node --version”来检测当前node的版本,当有版本号显示说明Node成功安装。
    下面我们用npm安装babel,启动命令提示符窗口并且输入:npm install babel-core@5,然后回
    车,安装成功后,打开目录:C:UsersAdministrator ode_modulesabel-core,在这个目录里面
    我们找到babel的浏览器版本browser.js(未压缩版)和browser.min.js(压缩版)。把browser.min.js
    引入(文件位置的路径要确保正确)。并且设置第二个script标签的type为”text/babel”。
    <script src="browser.min.js"></script>
    <script type="text/babel">
    const Name = '张三';
    alert(Name);
    </script>

    四、使用Traceur转码器直接插入网页的方法来转码ES6

    在网页头部加载Traceur库文件。
    <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
    <script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
    <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
    <script type="module">
    const Name = '张三';
    alert(Name);
    </script>

    1.traceur:是由Google出的编译器,可以将ES5编译成ES6
    2.bootstrap:是一个引导程序(与响应式的bootstrap不同)
    3.需要将traceur.js和bootstrap.js下载下来,引入到当前文件中即可
    4.最后的script标签的type属性的值是module,而不是text/javascript。这是Traceur编译器识别
    ES6代码的标志,编译器会自动将所有type=module的代码编译为ES5,然后再交给浏览器执行。

    五、另外还有Babel转码器的其他使用方法,Traceur的命令行转换方法和Node.js环境的用法,这里的
    方法只是作为一个学习的入门案例,起到抛砖引玉的作用,让新手们能对ES6的兼容问题和转换工具
    有个认识,并没有覆盖所有兼容方案的介绍,希望大家随着对ES6越来越深入学习,对转换工具的掌
    握也越来越全面和熟练。

  • 相关阅读:
    Python Twisted系列教程8:使用Deferred的诗歌下载客户端
    Python Twisted系列教程7:小插曲,Deferred
    Python Twisted系列教程6:抽象地利用Twisted
    Python Twisted系列教程5:由Twisted支持的诗歌客户端
    Python Twisted系列教程4:由Twisted支持的诗歌客户端
    Python Twisted系列教程2:异步编程初探与reactor模式
    多线程--future模式初体验
    【java工具类】生成二维码
    Maven手动命令行导入ojdbc6
    【javascript】生成二维码
  • 原文地址:https://www.cnblogs.com/toggle/p/8232947.html
Copyright © 2020-2023  润新知