Traceur 转码器
来源:互联网 发布:黑马股票推荐软件 编辑:程序博客网 时间:2024/06/06 10:02
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.jsCalc constructor9
如果要将 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 转码器
- vuejs 无node单页应用方案二(babel-standalone or traceur,vue-router实现、组件按需懒加载)
- 关于Angular2.0 in-memory-web-api的GET http://localhost:3000/traceur 404 (Not Found)等错误的解决方法之一
- Babel 转码器
- Babel 转码器
- 音视频转码器产品规格
- ECMAScript 6的转码器
- Babel转码器入门
- IOS 视频转码器
- 中文转码器的工作原理
- 使用jni开发音频转码器
- 使用FFmpeg实现的转码器
- es6 babel转码器安装配置
- Webstorm中使用babel转码器
- ES6 笔记: 1.Babel转码器
- 简单易用的中文PDF转码器
- FFmpeg内存操作(三)内存转码器
- ffmpeg转码器移植VC的工程:ffmpeg for MFC
- 鸡翁每只5元、鸡母每只3元、鸡雏每3只1元,编程计算若用100元买100只鸡,则鸡翁、鸡母、鸡雏各能买多少只
- Linux 升级 Python 至 3.x
- 定一个小目标
- JavaScript07 逻辑运算符总结
- Food Delivery ZOJ
- Traceur 转码器
- 大学英语单词XYZ
- Pycharm: ImportError: libcudart.so.7.5
- mybatis自定义动态sql传入对象
- Mac上Clion平台Opencv3.2物体跟踪学习
- Using scrolls in java
- C++基础知识点补漏
- Android自定义View专题六-PathMeasure实战,仿小红书动态标签
- 朴素贝叶斯 续