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

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

1.Babel

2.Traceur,Google公司出品

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

Babel转码器

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

$ npm install --global babel

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

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

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

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

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

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

$ babel es6.js -o es5.js

Traceur转码器

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

它有多种使用方式。

直接插入网页

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

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


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

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

<script type="module">
class Calc {
constructor(){
console.log('Calc constructor');
}
add(a, b){
return a + b;
}
} var c = new Calc();
console.log(c.add(4,5));
</script>

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

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

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

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

在线转换

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

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

<script src="http://google.github.io/traceur-compiler/bin/traceur.js"
type="text/javascript"></script>
<script src="http://google.github.io/traceur-compiler/src/bootstrap.js"
type="text/javascript"></script>
<script>
traceur.options.experimental = true;
</script>
<script>
$traceurRuntime.ModuleStore.getAnonymousModule(function() {
"use strict"; var Calc = function Calc() {
console.log('Calc constructor');
}; ($traceurRuntime.createClass)(Calc, {add: function(a, b) {
return a + b;
}}, {}); var c = new Calc();
console.log(c.add(4, 5));
return {};
});
</script>


最近在学习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. (中级篇 NettyNIO编解码开发)第六章-编解码技术

    基于Java提供的对象输入/输出流ObjectlnputStream和ObjectOutputStream,可以直接把Java对象作为可存储的字节数组写入文件,也可以传输到网络上.对程序员来说,基于J ...

  2. 用2D动画做遮罩

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  3. Targeted Learning R Packages for Causal Inference and Machine Learning(转)

    Targeted learning methods build machine-learning-based estimators of parameters defined as features ...

  4. Http状态码大全(来自菜鸟教程)

    HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准. HTTP是一个基于TCP/IP通信 ...

  5. CentOS 虚拟机安装详解

    第一步:安装 VMware 官方网站:www.vmware.com 下载百度云链接:http://pan.baidu.com/s/1bphDOWv 密码:0zix VMware 是一个虚拟 PC 的软 ...

  6. centos nginx-1.10.3 安装

    wget http://nginx.org/download/nginx-1.13.1.tar.gz nginx 依赖 pcre 库,要先安装pcre,因为nginx 要在rewrite 要解析正则表 ...

  7. Java之【线程通信】--标志位练习

    * 写两个线程,一个线程打印1-52,另一个线程答应字母A-Z. * 打印顺序为12A34B56C--5152Z.通过使用线程之间的通信协调关系. 注:分别给两个对象构造一个对象o,数字每打印两个或字 ...

  8. nodejs 开发指南 书中小项目 代码

    最近 在学习node.js 先看了下语法 ,然后就看这个开发指南感觉书还是很有用,但是代码太旧了,网上也没有最新的,所以就自己查着前人的痕迹和自己修改,现在可以跑了. https://github.c ...

  9. 隐马尔科夫模型HMM(一)HMM模型

    隐马尔科夫模型HMM(一)HMM模型基础 隐马尔科夫模型HMM(二)前向后向算法评估观察序列概率 隐马尔科夫模型HMM(三)鲍姆-韦尔奇算法求解HMM参数(TODO) 隐马尔科夫模型HMM(四)维特比 ...

  10. Vivado简单调试技能

    Vivado简单调试技能 1.关于VIO核的使用 首先配置VIO核: 配置输入输出口的数量5,5 配置输入口的位宽 配置输出口位宽和初始值. 例化与使用: vio_0 U1 ( .clk(clk_27 ...