---恢复内容开始---

ES6代码转为ES5代码的转换器

1.Babel

2.Traceur,Google公司出品

Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。大家可以选择自己习惯的工具来使用使用Babel,具体过程可直接在Babel官网查看:

Babel转码器

Babel是另一个广泛使用的ES6转码器,安装命令如下。

  1. $ npm install --global babel

Babel自带一个 babel-node 命令,与Node命令行完全一致,而且可以直接运行ES6代码。

  1. $ babel-node
  2. >
  3. > console.log([1,2,3].map(x => x * x))
  4. [ 1, 4, 9 ]
  5. >

babel-node 命令也可以直接运行ES6脚本。假定将上面的代码放入脚本文件 es6.js 。

  1. $ babel-node es6.js
  2. [1, 4, 9]

babel 命令可以将ES6代码转为ES5代码。

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

  1. $ babel es6.js -o es5.js

Traceur转码器

Google公司的Traceur转码器,可以将ES6代码转为ES5代码。这意味着,你可以用ES6的方式编写程序,又不用担心浏览器是否支持。

它有多种使用方式。

直接插入网页

Traceur允许将ES6代码直接插入网页。

首先,必须在网页头部加载Traceur库文件。


  1. <!-- 加载Traceur编译器 -->
  2. <script src="http://google.github.io/traceur-compiler/bin/traceur.js"
  3. type="text/javascript"></script>
  4. <script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
  5. <!-- 将Traceur编译器用于网页 -->
  6. <script src="http://google.github.io/traceur-compiler/src/bootstrap.js"
  7. type="text/javascript"></script>

接下来,就可以把ES6代码放入上面这些代码的下方。

  1. <script type="module">
  2. class Calc {
  3. constructor(){
  4. console.log('Calc constructor');
  5. }
  6. add(a, b){
  7. return a + b;
  8. }
  9. }
  10. var c = new Calc();
  11. console.log(c.add(4,5));
  12. </script>

正常情况下,上面代码会在控制台打印出9。

注意,script标签的type属性的值是module,而不是text/javascript。这是Traceur编译器识别ES6代码的标识,编译器会自动将所有type=module的代码编译为ES5,然后再交给浏览器执行。

如果ES6代码是一个外部文件,也可以用script标签插入网页。

  1. <script type="module" src="calc.js" ></script>

在线转换

Traceur提供一个在线编译器,可以在线将ES6代码转为ES5代码。转换后的代码,可以直接作为ES5代码插入网页运行。

上面的例子转为ES5代码运行,就是下面这个样子。

  1. <script src="http://google.github.io/traceur-compiler/bin/traceur.js"
  2. type="text/javascript"></script>
  3. <script src="http://google.github.io/traceur-compiler/src/bootstrap.js"
  4. type="text/javascript"></script>
  5. <script>
  6. traceur.options.experimental = true;
  7. </script>
  8. <script>
  9. $traceurRuntime.ModuleStore.getAnonymousModule(function() {
  10. "use strict";
  11. var Calc = function Calc() {
  12. console.log('Calc constructor');
  13. };
  14. ($traceurRuntime.createClass)(Calc, {add: function(a, b) {
  15. return a + b;
  16. }}, {});
  17. var c = new Calc();
  18. console.log(c.add(4, 5));
  19. return {};
  20. });
  21. </script>
  1. 最近在学习es6的一些东西,分享给大家。
    转化器的一些说明转载:https://blog.gaoqixhb.com/p/55783789cef7e0a008d5d6ef

---恢复内容结束---

ES6的转换器的更多相关文章

  1. ES6+ 现在就用系列(一):为什么使用ES6+

    系列目录 ES6+ 现在就用系列(一):为什么使用ES6+ ES6+ 现在就用系列(二):let 命令 ES6+ 现在就用系列(三):const 命令 ES6+ 现在就用系列(四):箭头函数 => ...

  2. ES6之module

    该博客原文地址:http://www.cnblogs.com/giggle/p/5572118.html 一.module概述 JavaScript一直没有模块体系,但是伴随着ES6的到来,modul ...

  3. ES6转换器之Babel

    ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5. 我这里用的是Gulp + Bable的形式来将ES6转换为ES5的. 前提: (1).Gulp和Bable都 ...

  4. ES6扫盲

    原文阅读请点击此处 一.let和const { // let声明的变量只在let命令所在的代码块内有效 let a = 1; var b = 2; } console.log(a); // 报错: R ...

  5. 【学习笔记】ES6标准入门

    这里简要记录一下对自己感触比较深的几个知识点,将核心的应用投放于实际的项目之中,提供代码的可维护性. 一.let和const { // let声明的变量只在let命令所在的代码块内有效 let a = ...

  6. 向ES6看齐,用更好的JavaScript(一)

    众所周知,JavaScript作为弱类型语言,一直是精华与糟粕共存,许多"诡异"的地方我们不得不接受并使用.其实ES6(又称ECMAScript 2015)在2015年6月就已经正 ...

  7. (转)Babel-现在开始使用 ES6

    在 2 月 20 号 ECMAScript 第六版就正式推出了,这门语言一直保持稳定快速的发展而且新功能也在慢慢被现在主流的 JavaScript 引擎所接受.不过要想在浏览器端或者 Node 端直接 ...

  8. React入门 (1)—使用指南(包括ES5和ES6对比)

    前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...

  9. [译]使用6to5,让今天就来写ES6的模块化开发!

    http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium= ...

随机推荐

  1. Java高效计数器

    本文转载地址:              http://blog.csdn.net/renfufei/article/details/14120775 我们经常使用 HashMap作为计数器(coun ...

  2. webpack使用

    Webpack是一个现代js应用的模块打包机.如果一个文件依赖另一个文件,webpack认为这就存在一个依赖关系.不管另一个文件是什么内容,image,css或js都被当作一个模块.Webpack从e ...

  3. javaWeb学习总结(9)- JSTL标签库之核心标签

    一.JSTL标签库介绍 JSTL标签库的使用是为弥补html标签的不足,规范自定义标签的使用而诞生的.使用JSLT标签的目的就是不希望在jsp页面中出现java逻辑代码 二.JSTL标签库的分类 核心 ...

  4. Js判断是否是直接进入本页面的

    今天带来一个Js的小示例,用来判断当前页面的链接来路.很多人应该可以用到,这个虽然非常简单,但是用到的地方却还是挺多的 首先新建一个index.html,代码如下 <!DOCTYPE html& ...

  5. ELK安装与配置

    ELK介绍 日志主要包括系统日志.应用程序日志和安全日志.系统运维和开发人员可以通过日志了解服务器软硬件信息.检查配置过程中的错误及错误发生的原因.经常分析日志可以了解服务器的负荷,性能安全性,从而及 ...

  6. python+unittest框架整理(一点点学习前辈们的封装思路,一点点成长。。。)

    预期框架整理目标: 1.单个用例维护在单个.py文件中可单个执行,也可批量生成组件批量执行 2.对定位参数,定位方法,业务功能脚本,用例脚本,用例批量执行脚本,常用常量进行分层独立,各自维护在单独的. ...

  7. 用border或者div制作三角形等图形

    一般情况下, 我们设置盒子的宽高度, 及上下左右边框, 具体代码如下: 通过上述代码,div的具体样式如下: 现在在上面基础上, 我们把div的宽高度都设为0时, 现在我们再次查看效果,如下图: 这时 ...

  8. APUE-文件和目录(一)

    4.1 函数stat 函数stat返回与此命名文件有关的信息结构.下面的代码实现了一个工具,显示树形目录结构,需要加两个参数,一个为目录名,一个为显示目录的深度. #include <sys/s ...

  9. java中的流程控制语句总结

    程序的结构分类: 顺序结构:按照写代码的顺序 一次执行 选择结构:根据条件的不同有选择的执行不同的代码 循环结构:在一定条件下 反复执行某一片代码 选择结构: 也叫分支结构 根据条件的不同,有选择的执 ...

  10. 浏览器本地储存方式有哪些?cookie、localStorage、sessionStorage

    现阶段,浏览器提供的储存方式常用的有三种,cookie.localStorage.sessionStorage 1.cookie 概念:cookie 是浏览器中用于保存少量信息的一个对象 基本特征: ...