ES6于2015年6月正式发布,各大浏览器的最新版本对 ES6 的支持可以查看https://kangax.github.io/compat-table/es6/。

目前各大浏览器和开发环境对支持ES6的支持情况参差不齐,在实际项目开发中,我们仍旧不得不降级使用ES5语法以兼容各平台。幸好有几款工具可以将ES6语法转换成ES5,让我们在使用ES6新特性编写代码的同时,不需要考虑具体的兼容性情况。

将ES6代码转换成ES5代码工具中最主流的有以下两个:

Traceur(Google研发); Babel

下面介绍这两个工具的使用方法,以及Node.js中对ES6的支持情况。

一. Traceur转换器

1)第一种方法:直接在页面中使用:

<!-- 加载Traceur编译器 -->
<script src="http://google.github.io/traceur-compiler/bin/traceur.js" type="text/javascript"></script>
<!-- 打开实验选项,否则有些特性可能编译不成功 -->
<script>traceur.options.experimental = true;
</script>

写ES6代码,用:

<script type="module">// ES6代码
</script>

注意,script标签的type属性的值是module,而不是text/javascript。这是Traceur编译器识别ES6代码的标识。

2) 第二种方法:Traceur的在线编辑器:

http://google.github.io/traceur-compiler/demo/repl.html

3) 第三种方法:使用node.js工具:

安装:

$ npm install -g traceur

直接运行ES6代码:

$ traceur calc.js

将ES6输出为ES5脚本:

$ traceur --script calc.es6.js --out calc.es5.js

为了防止有些特性编译不成功,最好加上–experimental选项。

$ traceur --script calc.es6.js --out calc.es5.js --experimental

二. Babel转换器

1) 安装:

$ npm install --global babel

2) 直接运行ES6脚本:

$ babel-node es6.js

3) 将ES6编译成ES5:

$ babel es6.js

-o 参数将转换后的代码,从标准输出导入文件:

$ babel es6.js -o es5.js

三. Node.js支持ES6的情况:

Google公司的V8引擎已经部署了ES6的部分特性。使用Node.js 0.11版,就可以体验这些特性。在 Node.js 使用的 JS 引擎 V8 里面将不同状态 ES6 特性分成了 3 个等级:

  • shipping (默认开启的特性)
  • staged (需要使用 –harmony 参数开启的特性)
  • in progress(不稳定或者未实现的特性, 不推荐使用)

Node v4.4.4版本对ES6的支持情况如下:

 【备注:上图转自http://www.alloyteam.com/2016/07/nodejs-native-support-of-the-es6-features/】

在Node v4和 v5版本,可能需要运行node --harmony命令来打开所有已经部署的ES6功能。部分特性需要在严格模式下使用,即在文件中使用use strict

Node.js对ES6的具体支持情况可查看:

http://node.green/

参考:

JavaScript ECMA-262 规范:http://www.ecma-international.org/publications/standards/Ecma-262.htm

Node.js ES6 支持文档 https://nodejs.org/en/docs/es6/

ES6的各平台兼容性情况: https://kangax.github.io/compat-table/es6/

ES6转ES5,Traceur使用方式相关推荐

  1. ES6转ES5 Traceur转码器

    Traceur允许将ES6代码直接插入网页.首先,必须在网页头部加载Traceur库文件. <script src="https://google.github.io/traceur- ...

  2. es6转es5 的6种方式

    es6转码es5 一.Babel 在线转码 二.谷歌的Traceur 在线转码 三.es6console 在线转码并运行 四.Traceur 在页面中引入使用 //加载 Traceur 文件 < ...

  3. 重组es6之es6转es5的方式

    为什么要es6转es5? 答:es6代码在老版本的浏览器中无法执行. 怎么将es6代码转为es5代码,让其在老版本的浏览器中执行? 答:使用babel模块,babel是一个使用非常广泛的es6转换器, ...

  4. webpack实现es6转换为es5

    Webpack实现es6转换为es5 安装插件 npm install --save-dev babel-loader @babel/core @babel/preset-env 配置 在webpac ...

  5. 记录一次es6转es5的填坑历程

    背景 随着前端的技术的不断发展,JavaScript也在不断地版本迭代,但是浏览器厂商如果不支持新版的js,那么对于前端同学来说是一场灾难,最近小飞就遇到了这样的一个问题,好好的Vue项目在低版本安卓 ...

  6. Traceur 使用方式

    ES6于2015年6月正式发布,各大浏览器的最新版本对 ES6 的支持可以查看https://kangax.github.io/compat-table/es6/. 目前各大浏览器和开发环境对支持ES ...

  7. 本地实现ES6转ES5代码——gulpfile配置文件

    公司里很多同事在用ES6实现业务逻辑了,我也想试试.在公司的项目里,我写的ES6只要打开命令窗输入gulp watch 就自动将ES6转成ES5并放在相应的文件夹里了.我回家也想练习,但又不知道该怎么 ...

  8. es6 ik分词热更新MySQL_rollup环境搭建(es6转es5、压缩、本地服务器、热更新)

    文件目录 package.json { "name": "my-vue", "version": "1.0.0", &q ...

  9. ES6转ES5:Gulp+Babel

    目标: ES6代码转成ES5 对转换后的ES5进行压缩 以上步骤自动监控执行 步骤: 1.安装插件 在命令行中定位到项目根目录 安装全局 Gulp npm install -g gulp 安装项目中使 ...

最新文章

  1. c4d中的3D插图制作视频教程 Skillshare – 3D Illustration in Cinema 4D
  2. No.1010_第七次团队会议
  3. android wifi ap sta,WIFI的AP/Sta模式简单介绍
  4. [Ext JS6]路由(Routing)及使用
  5. JS对象 字符串分割 split() 方法将字符串分割为字符串数组,并返回此数组。 语法: stringObject.split(separator,limit)...
  6. 解决:Failed to create 'build\outputs\apk\watch-debug-unaligned.apks': 拒绝访问。
  7. Mysql数据库详解
  8. tomcat 启动出现 org.apache.tomcat.util.compat.JreCompat.isGraalAvailable()Z错误
  9. nano编辑器的使用
  10. Neo4j CQL - DELETE删除
  11. python通过什么对象连接数据库步骤_Python连接MySQL数据库方法介绍(超详细!手把手项目案例操作)...
  12. mmap()、munmap()的用法、例子
  13. 计算机夏令营英语自我介绍,夏令营英语自我介绍
  14. 前端性能优化指标 + 检测工具
  15. electron-vue 引入electron-updater提示unexpected token
  16. matlab绘制河北大学简约版校徽(彩色、matlab绘图、)
  17. Pygame学习笔记11:三角函数及Tank Battle游戏
  18. 2017湖北职称计算机考试,2017湖北职称计算机考试报名:黄石职称计算机报名入口...
  19. 根据列名提取指定列 shell awk
  20. 购买计算机配件时需要考虑什么因素,哪些配置和参数是购买和组装计算机的主要因素?阅读后您会理解的!...

热门文章

  1. SwiftUI视图onReceive方法接收“冗余”事件的解决
  2. Java-并发和并行的区别
  3. Cad二次开发之未知命令
  4. mac怎么打开home文件夹?
  5. 实现 图片由远及近的效果
  6. Android 覆盖安装失败
  7. ?. 与? ?的用法
  8. 【博弈论】最后拿球者输
  9. Java实现远程开关机(网络唤醒)
  10. 文献阅读(52)—— Integration self-attention and convolution