web-dev-qa-db-ja.com

Babel.jsを使用した非同期非同期待機の提案

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

javascriptasync-awaitbabeljsecmascript-next
56
tldr

バベルv6

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

プリセット-非ES2015環境

これを機能させる最も簡単な方法は、ES2015以降の提案を変換するために必要なプラグインのセットが既に含まれているpresetsを使用することです。 asyncには、 es2015 および es2017 プリセットと runtime プラグイン（忘れずにbabel-runtimeドキュメントに記載されているとおり）：

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

プリセット-ES2015環境

ES2015をサポートする環境（具体的にはジェネレーターとプロミス）でコードを実行する場合、必要なのはes2017プリセットのみです：

{
  "presets": [
    "es2017"
  ]
}

カスタム

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

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

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

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

ジェネレーターをサポートする環境でコードを実行する場合、何もする必要はありません。ただし、ターゲット環境がジェネレーターをサポートしていないnot場合、ジェネレーターも変換する必要があります。これは transform-regenerator 変換。この変換はランタイム関数に依存するため、Babelの transform-runtime 変換（+ 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 });
99
Felix Kling

このソリューションは（Feb 25 Felix Kling）以降変更されている可能性があります。または、非同期待機を使用する方法がまだ複数あります。

私たちのために働いたのは、バベルをそのように実行することでした

$ npm install babel-runtime

$ babel inputES7.js -o outputES5.js --optional runtime
6
Tim

追加のnpm install babel-preset-stage-0およびそれを次のように使用します

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

見る

4
Tobi

おそらくさらに最新の状態になっています。 babelのものを別のファイルに入れるだけです：

'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 のコードを参照してください。

2
egeland

承認された回答は今では時代遅れのようです。実験的なフラグは、ステージを支持して廃止されました。

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

使用法

$ babel --stage 0

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

ステージ0

  • es7.classProperties
  • es7.comprehensions

ステージ1

  • es7.asyncFunctions
  • es7.decorators
  • es7.exportExtensions
  • es7.objectRestSpread

ステージ2（ステージ2以上はデフォルトで有効になっています）

  • es7.exponentiationOperator
2
Matt Dell