57

C# スタイルを導入する提案がありますasync-await。Babel.js が ES6 を ES5 にトランスパイルすることは知っていますが、async-await にトランスパイルする方法はありますES5か?

4

5 に答える 5

99

バベル v6

Babel v6 の時点で、Babel にはトランスフォーマー自体が含まれなくなりました。変換する機能を明示的に指定する必要があります。

プリセット - 非 ES2015 環境

これを機能させる最も簡単な方法は、ES2015 以降の提案を変換するために必要なプラグインのセットが既に含まれているプリセットを使用することです。の場合、とプリセット、およびプラグインasyncが必要です(ドキュメントの説明に従ってインストールすることを忘れないでください)。es2015es2017runtimebabel-runtime

{
  "presets": [
    "es2015",
    "es2017"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

プリセット - ES2015 環境

ES2015 をサポートする環境 (具体的にはジェネレーターと Promises) でコードを実行する場合、必要なのは es2017 プリセットだけです。

{
  "presets": [
    "es2017"
  ]
}

カスタム

関数のみを変換するasyncには、次のプラグインが必要です。

syntax-async-functions非同期関数を解析できるようにするためには、あらゆる場合に必要です

非同期関数を実行するには、次のいずれかを使用する必要があります

  • transform-async-to-generator:async関数をジェネレータに変換します。これは、Babel 独自の「コルーチン」実装を使用します。
  • transform-async-to-module-method:async関数もジェネレーターに変換しますが、Babel 独自のメソッドではなく、構成で指定されたモジュールとメソッドに渡します。これにより、 などの外部ライブラリを使用できますbluebird。

コードがジェネレーターをサポートする環境で実行される場合、何もする必要はありません。ただし、ターゲット環境がジェネレーターをサポートしていない場合は、ジェネレーターも変換する必要があります。これはtransform-regenerator変換によって行われます。transform-runtimeこの変換はランタイム関数に依存するため、Babel の変換 (+babel-runtimeパッケージ)も必要になります。

例:

ジェネレーターへの非同期

{
  "plugins": [
    "syntax-async-functions",
    "transform-async-to-generator"
  ]
}

モジュールメソッドへの非同期

{
  "plugins": [
    "syntax-async-functions",
   ["transform-async-to-module-method", {
     "module": "bluebird",
     "method": "coroutine"
   }]
  ]
}

ジェネレーター + リジェネレーターへの非同期

{
  "plugins": [
    "syntax-async-functions",
    "transform-async-to-generator",
    "transform-regenerator",
    "transform-runtime"
  ]
}

Babel v4 以前

はい、実験的なトランスフォーマーを有効にする必要があります。Babel はregeneratorを使用します。

使用法

$ babel --experimental

babel.transform("code", { experimental: true });
于 2015-02-25T00:43:43.417 に答える
4

npm install babel-preset-stage-0追加を行い、次のように使用することで、今日の時点でこれが機能するようになりました

var babel = require("babel-core");
var transpiled = babel.transform(code, { "presets": ["stage-0"] });

見る

于 2015-12-08T12:51:18.387 に答える
2

承認された回答は現在古くなっているようです。実験的フラグは廃止され、ステージが優先されました。

http://babeljs.io/blog/2015/03/31/5.0.0/#experimental-option

使用法

$ babel --stage 0

babel.transform("code", { stage: 0 });

ステージ0

  • es7.classProperties
  • es7.内包表記

ステージ1

  • es7.asyncFunctions
  • es7.デコレータ
  • es7.exportExtensions
  • es7.objectRestSpread

ステージ 2 (ステージ 2 以降はデフォルトで有効になっています)

  • es7.exponentiationOperator
于 2015-12-06T14:15:04.733 に答える
2

おそらく今はさらに最新です。バベルのものを別のファイルに入れるだけです：

'use strict';

require('babel/register'); // Imports babel - auto transpiles the other stuff
require('./app'); // this is es6 - gets transpiled

詳細については、how-can-i-use-es2016-es7-async-await-in-my-acceptance-tests-for-a-koa-js-appにある私のコードを参照してください。

于 2015-10-28T01:57:48.720 に答える