当前位置: 首页 > 工具软件 > Traceur > 使用案例 >

Traceur 转码器

袁晋鹏
2023-12-01

Traceur 转码器

Google 公司的Traceur转码器,也可以将 ES6 代码转为 ES5 代码。

直接插入网页

Traceur 允许将 ES6 代码直接插入网页。首先,必须在网页头部加载 Traceur 库文件。

  1. <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
  2. <script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
  3. <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
  4. <script type="module">
  5. import './Greeter.js';
  6. </script>

上面代码中,一共有 4 个script标签。第一个是加载 Traceur 的库文件,第二个和第三个是将这个库文件用于浏览器环境,第四个则是加载用户脚本,这个脚本里面可以使用 ES6 代码。

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

除了引用外部 ES6 脚本,也可以直接在网页中放置 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

如果想对 Traceur 的行为有精确控制,可以采用下面参数配置的写法。

  1. <script>
  2. // Create the System object
  3. window.System = new traceur.runtime.BrowserTraceurLoader();
  4. // Set some experimental options
  5. var metadata = {
  6. traceurOptions: {
  7. experimental: true,
  8. properTailCalls: true,
  9. symbols: true,
  10. arrayComprehension: true,
  11. asyncFunctions: true,
  12. asyncGenerators: exponentiation,
  13. forOn: true,
  14. generatorComprehension: true
  15. }
  16. };
  17. // Load your module
  18. System.import('./myModule.js', {metadata: metadata}).catch(function(ex) {
  19. console.error('Import failed', ex.stack || ex);
  20. });
  21. </script>

上面代码中,首先生成 Traceur 的全局对象window.System,然后System.import方法可以用来加载 ES6。加载的时候,需要传入一个配置对象metadata,该对象的traceurOptions属性可以配置支持 ES6 功能。如果设为experimental: true,就表示除了 ES6 以外,还支持一些实验性的新功能。

在线转换

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

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

  1. <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
  2. <script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
  3. <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
  4. <script>
  5. $traceurRuntime.ModuleStore.getAnonymousModule(function() {
  6. "use strict";
  7. var Calc = function Calc() {
  8. console.log('Calc constructor');
  9. };
  10. ($traceurRuntime.createClass)(Calc, {add: function(a, b) {
  11. return a + b;
  12. }}, {});
  13. var c = new Calc();
  14. console.log(c.add(4, 5));
  15. return {};
  16. });
  17. </script>

命令行转换

作为命令行工具使用时,Traceur 是一个 Node 的模块,首先需要用 npm 安装。

  1. $ npm install -g traceur

安装成功后,就可以在命令行下使用 Traceur 了。

Traceur 直接运行 ES6 脚本文件,会在标准输出显示运行结果,以前面的calc.js为例。

  1. $ traceur calc.js
  2. Calc constructor
  3. 9

如果要将 ES6 脚本转为 ES5 保存,要采用下面的写法。

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

上面代码的--script选项表示指定输入文件,--out选项表示指定输出文件。

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

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

命令行下转换生成的文件,就可以直接放到浏览器中运行。

Node 环境的用法

Traceur 的 Node 用法如下(假定已安装traceur模块)。

  1. var traceur = require('traceur');
  2. var fs = require('fs');
  3. // 将 ES6 脚本转为字符串
  4. var contents = fs.readFileSync('es6-file.js').toString();
  5. var result = traceur.compile(contents, {
  6. filename: 'es6-file.js',
  7. sourceMap: true,
  8. // 其他设置
  9. modules: 'commonjs'
  10. });
  11. if (result.error)
  12. throw result.error;
  13. // result 对象的 js 属性就是转换后的 ES5 代码
  14. fs.writeFileSync('out.js', result.js);
  15. // sourceMap 属性对应 map 文件
  16. fs.writeFileSync('out.js.map', result.sourceMap);
 类似资料: