如何在运行中将 await 与 traceur 编译器一起使用？答案

【问题标题】：How to use await with traceur compiler on the fly?如何在运行中将 await 与 traceur 编译器一起使用？
【发布时间】：2015-09-03 01:17:30
【问题描述】：

我需要帮助来配置我的浏览器以使用跟踪编译器。我尝试了几种方法来让一个简单的异步代码工作，但还没有成功。代码如下：

<!DOCTYPE html>
<html>
<body>
  <h1 id="message"></h1>
  <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
  <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
  <script type="module">
    $traceurRuntime.options = traceur.util.Options.experimental();
    console.log("t", traceur, "tr", $traceurRuntime, "tro", $traceurRuntime.options); 
    function changeTest(text) {
        return new Promise().resolve(text+text);
    }

    async function run(text) {
        var newText = await encrypt(text);
    }

    console.log(run("asdf"));
  </script>
</body>
</html>

traceur 编译器链接显示它应该可以工作是here。

出现如下错误：

["file:///.../traceur_inline_script_1.js:8:8: 需要分号", "file:///.../traceur_inline_script_1.js:9:9: 需要分号"]

tracerRuntimeOptions 看起来不错：

Options {
    arrowFunctions: true,
    blockBinding: true,
    classes: true,
    computedPropertyNames: true,
    defaultParameters: true…
}
annotations: true
arrayComprehension: true
arrowFunctions: true
asyncFunctions: true
asyncGenerators: true
atscript: (...)
blockBinding: true
classes: true
commentCallback: false
computedPropertyNames: true
debug: false
debugNames: false
defaultParameters: true
destructuring: true
experimental: (...)
exponentiation: true
exportFromExtended: true
forOf: true
forOn: true
freeVariableChecker: false
generatorComprehension: true
generators: true
inputSourceMap: false
lowResolutionSourceMap: false
memberVariables: true
moduleName: "default"
modules: (...)
modules_: "bootstrap"
numericLiterals: true
outputLanguage: "es5"
parseOptions: Object
properTailCalls: true
propertyMethods: true
propertyNameShorthand: true
referrer: ""
require: true
restParameters: true
script: false
sourceMaps: (...)
sourceMaps_: false
sourceRoot: false
sourceRoot_: false
spread: true
symbols: true
templateLiterals: true
transformOptions: Object
typeAssertionModule: null
typeAssertions: false
types: true
unicodeEscapeSequences: true
unicodeExpressions: true
validate: false
__proto__: Options

我尝试了几种变体，但还没有成功。有人可以帮我写一个工作代码吗？

提前致谢。

【问题讨论】：

我会转到 Babel。
@torazaburo 很有趣，谢谢。我会尝试一下。如果你用 babel 发布一个可行的解决方案，我会接受它。谢谢。
您知道下载浏览器版本的链接吗？医生说A browser version of Babel is available from browser.js inside a babel-core npm release，但我没找到。
这方面有什么进展吗？我也面临同样的问题。
是的，我做到了。事实上，我误解了如何使用 traceur 转译器。我使用像 grunt 这样的东西解决了这个问题，它将文件编译到 es7，然后我在我的 html 页面上使用这个编译的文件。 await 运算符工作正常。当我有时间时，我会更好地解释，但这是方向。

标签： javascript async-await ecmascript-6 traceur

【解决方案1】：

如上所述：

我误解了如何使用 Traceur 转译器。我通过使用诸如 grunt 之类的东西将文件编译为 ECMAScript-7 解决了这个问题，然后在我的 HTML 页面中使用了编译后的输出。 await 运算符工作正常。有时间我会解释得更好，但这是方向。

参考文献

Cross Stitching: Elegant Concurrency Patterns for JavaScript

【讨论】：