Traceur 转码器
Traceur 转码器 § ⇧
Google 公司的Traceur转码器,也可以将 ES6 代码转为 ES5 代码。
直接插入网页
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">import './Greeter.js';
</script>
上面代码中,一共有4个script
标签。第一个是加载 Traceur 的库文件,第二个和第三个是将这个库文件用于浏览器环境,第四个则是加载用户脚本,这个脚本里面可以使用 ES6 代码。
注意,第四个script
标签的type
属性的值是module
,而不是text/javascript
。这是 Traceur 编译器识别 ES6 代码的标志,编译器会自动将所有type=module
的代码编译为 ES5,然后再交给浏览器执行。
除了引用外部 ES6 脚本,也可以直接在网页中放置 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
。
如果想对 Traceur 的行为有精确控制,可以采用下面参数配置的写法。
<script> // Create the System object
window.System = new traceur.runtime.BrowserTraceurLoader(); // Set some experimental options
var metadata = {traceurOptions: {experimental: true,properTailCalls: true,symbols: true,arrayComprehension: true,asyncFunctions: true,asyncGenerators: exponentiation,forOn: true,generatorComprehension: true}}; // Load your module
System.import('./myModule.js', {metadata: metadata}).catch(function(ex) {console.error('Import failed', ex.stack || ex);});
</script>
上面代码中,首先生成Traceur的全局对象window.System
,然后System.import
方法可以用来加载 ES6。加载的时候,需要传入一个配置对象metadata
,该对象的traceurOptions
属性可以配置支持 ES6 功能。如果设为experimental: true
,就表示除了 ES6 以外,还支持一些实验性的新功能。
在线转换
Traceur 也提供一个在线编译器,可以在线将 ES6 代码转为 ES5 代码。转换后的代码,可以直接作为 ES5 代码插入网页运行。
上面的例子转为 ES5 代码运行,就是下面这个样子。
<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>
$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>
命令行转换
作为命令行工具使用时,Traceur 是一个 Node 的模块,首先需要用 npm 安装。
$ npm install -g traceur
安装成功后,就可以在命令行下使用 Traceur 了。
Traceur 直接运行 ES6 脚本文件,会在标准输出显示运行结果,以前面的calc.js
为例。
$ traceur calc.js
Calc constructor
9
如果要将 ES6 脚本转为 ES5 保存,要采用下面的写法。
$ traceur --script calc.es6.js --out calc.es5.js
上面代码的--script
选项表示指定输入文件,--out
选项表示指定输出文件。
为了防止有些特性编译不成功,最好加上--experimental
选项。
$ traceur --script calc.es6.js --out calc.es5.js --experimental
命令行下转换生成的文件,就可以直接放到浏览器中运行。
Node 环境的用法
Traceur 的 Node 用法如下(假定已安装traceur
模块)。
var traceur = require('traceur');
var fs = require('fs');
// 将 ES6 脚本转为字符串
var contents = fs.readFileSync('es6-file.js').toString();var result = traceur.compile(contents, {filename: 'es6-file.js',sourceMap: true, // 其他设置
modules: 'commonjs'
});if (result.error)throw result.error;
// result 对象的 js 属性就是转换后的 ES5 代码
fs.writeFileSync('out.js', result.js);
// sourceMap 属性对应 map 文件
fs.writeFileSync('out.js.map', result.sourceMap);
Traceur 转码器相关推荐
- ES6转码(编译)工具——Babel转码器、Traceur转码器
当ES6不兼容时,需要用到转码工具 1.Babel转码器: Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以用ES6的方式编写程序,又不用 ...
- 常见的ES6转码(编译)工具——Babel转码器、Traceur转码器
在浏览器里面如何使用? 现在ES6的使用也是一个新趋势,下面就来讲解转码的常见方法 当ES6不兼容时,需要用到转码工具 1.Babel转码器: Babel是一个广泛使用的ES6转码器,可以将ES6代码 ...
- ES6转ES5 Traceur转码器
Traceur允许将ES6代码直接插入网页.首先,必须在网页头部加载Traceur库文件. <script src="https://google.github.io/traceur- ...
- Traceur 转码器 将 ES6 代码转为 ES5 代码
文章摘自<ECMAScript 6 入门 > Traceur 允许将 ES6 代码直接插入网页.首先,必须在网页头部加载 Traceur 库文件 <script src=" ...
- ES6新特性之转码器(UmiJS入门)
转码器 Babel (babeljs.io)是一个广为使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而 在浏览器或其他环境执行 . Google 公司的 Traceur 转码器 C ...
- Twitch如何实现转码器比FFmepg性能提升65%?(上)
文 / Jeff Gong, Sahil Dhanju, Chih-Chiang Lu, Yueshi Shen 译 / 王鸿蒙 编者按:超过220万创作者在Twitch发布海量的视频,这对实时转码业 ...
- 最简单的基于FFmpeg的移动端样例:IOS 视频转码器
===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...
- 项目中配置Babel转码器的详细教程
先简单说一下Babel吧 Babel是一个ES6转码器,可以将ES6代码转为ES5代码 此篇教程是在学习阮老师的<ES6标准入门>时,不会npm的学习总结 在阮老师的教程上具体补充,通过以 ...
- es6 Babel 转码器对修饰器的支持
Babel 转码器对修饰器的支持 目前,Babel 转码器已经支持 Decorator. 首先,安装babel-core和babel-plugin-transform-decorators.由于后者包 ...
最新文章
- 开放神经网络交换(ONNX)工具
- python提供两个对象身份比较操作符什么和什么来测试_python - 第二部分
- 软件工程之快速原型模型
- 深度学习在美团点评推荐平台排序中的应用 widedeep推荐系统模型--学习笔记
- 什么是TTL电平、CMOS电平、RS232电平
- Peoplesoft取Translate Value标签值的方法
- 树型DataGrid的思路
- python之word2vec实战学习
- 两个集合的交集 java版本
- 显示农历天气时钟小部件下载_软媒时间-时间栏的效率小软件
- 南非认证_南非2008-避免或尽量减少时差
- uefi装完系统后无法引导_uefi模式怎么重装系统|uefi重装系统教程
- Datatable 列名
- 【读书笔记】分布式下服务可靠性保障
- 网络攻防——Goby+AWVS漏洞扫描
- 使用kd树数据结构,实现k-means聚类加速
- 流浪的python博客园_python学习心得第二章
- linux sh : 由未实现函数引起bash读取2进制附加数据引起的报错
- 再见了 Docker!K8S 已成气候!
- angularJS在移动端的点击事件延迟问题
热门文章
- java中receive功能_java - 在onReceive()回调中的synchronized块 - SO中文参考 - www.soinside.com...
- chrome不走proxifier
- plt.xscale、plt.yscale将 x轴 和 y轴 的比例设置为对数比例
- uC-OS2 V2.93 STM32L476 移植:系统移植篇
- Cesium三维抗锯齿
- Kafka实现消息生产和消费
- css实现图片的3d旋转
- Micron MT41K256M16TW-107:P 存储IC
- 微信JSAPI支付方式与错误(当前页面的URL未注册,支付验证签名失败)
- android odex版本调试_Android编译odex版本的控制开关 | 学步园