Transpile Async attend la proposition avec Babel.js?

il est proposé d'introduire le style C# async-await . Je connais Babel.js transpose ES6 à ES5, mais y a-t-il un moyen de le faire transpirer async-attendre à ES5 ?

55
demandé sur Felix Kling 2015-02-25 03:23:14

5 réponses

Babel v6

A partir de Babel v6, Babel ne contient plus de transformateurs. Vous devez explicitement spécifier n'importe quelle caractéristique que vous voulez transformer.

Presets-non ES2015 environment

le moyen le plus rapide pour obtenir ce fonctionnement est d'utiliser presets qui contiennent déjà l'ensemble des plugins nécessaires pour transformer ES2015 et les propositions plus récentes. Au lieu de async vous aurez besoin du es2015 et es2017 presets et les runtime plugin (n'oubliez pas d'installer babel-runtime comme décrit dans la documentation):

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

Presets-ES2015 environment

si vous exécutez le code dans un environnement qui supporte ES2015 (plus spécifiquement, les générateurs et les promesses), alors tout ce dont vous avez besoin est le preset es2017:

{
  "presets": [
    "es2017"
  ]
}

Personnalisé

pour transformer uniquement les fonctions async , vous aurez besoin des plugins suivants.

syntax-async-functions est nécessaire dans tous les cas pour pouvoir analyser les fonctions asynchrones

pour run la fonction async, vous devez soit utiliser

  • transform-async-to-generator : convertit la fonction async en générateur. Cela utilisera la mise en œuvre de "co-routine" de Babel.
  • transform-async-to-module-method : convertit également la fonction async en générateur, mais la transmet au module et à la méthode spécifiés dans la configuration au lieu de la propre méthode de Babel. Cela vous permet d'utiliser des bibliothèques externes tels que bluebird .

si votre code fonctionne dans un environnement qui supporte les générateurs, alors il n'y a plus rien à faire. Cependant, si l'environnement cible ne pas générateurs de soutien, vous devrez également transformer le générateur. Cela se fait via la transformation transform-regenerator . Cette transformation dépend des fonctions d'exécution, vous aurez donc aussi besoin de la transformation transform-runtime de Babel (+ le paquet babel-runtime ).

exemples:

async à la génératrice

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

Async du module méthode

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

Async pour générateur + régénérateur

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

Babel v4 et plus

Oui, vous devez activer les Transformateurs expérimentaux . Babel utilise régénérateur .

Utilisation

$ babel --experimental

babel.transform("code", { experimental: true });
99
répondu Felix Kling 2017-06-09 16:32:48

Cette solution peut avoir changé depuis (Feb 25 Felix Kling) ou peut-être Il ya encore plus d'une façon d'utiliser async attendre.

ce qui a fonctionné pour nous était de faire fonctionner Babel comme ça

$ npm install babel-runtime

$ babel inputES7.js -o outputES5.js --optional runtime
6
répondu Tim 2015-08-30 17:17:21

j'ai obtenu ce travail d'aujourd'hui en faisant un npm install babel-preset-stage-0 supplémentaire et en l'utilisant comme

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

voir

4
répondu Tobi 2015-12-08 12:51:18

peut-être même plus à jour maintenant; il suffit de mettre l'affaire babel dans un fichier séparé:

'use strict';

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

Voir mon code au how-can-i-utilisation-es2016-es7-async-attendre-dans-mon-acceptation-tests-pour-un-koa-js-app pour plus de détails.

2
répondu egeland 2015-10-28 01:57:48

la réponse approuvée semble périmée maintenant. Le drapeau expérimental a été déprécié en faveur du stade.

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

Utilisation

$ babel --stage 0

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

étape 0

  • es7.classepropriétés 1519220920"
  • es7.interprétations de la

Étape 1

  • es7.asyncFunctions
  • es7.décorateurs
  • es7.exportations
  • es7.objectifspread

Étape 2 (les étapes 2 et supérieures sont activées par défaut)

  • es7.exponentiationOperator
2
répondu Matt Dell 2015-12-06 14:15:04