ES6 兼容浏览器

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

• 此外，浏览器自身也加快速度兼容ES6的新特性，其中对ES6新特性最友好的是Chrome和Firefox浏览器。各大转换工具、javascript解析引擎对ES6的支持程度情况，可以参查看这个地址：
• http://kangax.github.io/compat-table/es6/

  使用转换工具babel

• 新建一个html文件，取名为：ES6.html，加上含有ES6新特性的代码，比如：

  <script>
      const Name = '张三';//使用新增的关键字：const声明常量
      alert(Name);
  </script>

• 我们在chrome浏览器（版本不能太低）运行ES6.html，会正常运行，弹出“张三”。
• IE 9浏览器会提示我们第9行出现一个语法错误，相当于告诉我们它看不懂const是什么鬼，

  开始用Babel兼容ES6语法。

  第一步安装nodejs

• node官网：https://nodejs.org/
• 检测node是否安装成功 “node –version”

  第二步用npm安装babel

• 启动命令提示符窗口并且输入：npm install babel-core@5
• 你会在安装目录中找到这样的目录：C:\Users\Administrator\node_modules\babel-core
• 在这个目录里面我们找到babel的浏览器版本browser.js(未压缩版)和browser.min.js(压缩版)。

  第三步使用babel

  <script src="browser.min.js"></script>
  <script type="text/babel">
      const Name = '张三';//使用新增的关键字：const声明常量
      alert(Name);
  </script>

• 我们把browser.min.js引入
• 并且设置第二个script标签的type为”text/babel”否则不好使。

赏

谢谢你请我吃糖果

支付宝

微信