web-dev-qa-db-fra.com

Transpile Async Attendre une proposition avec Babel.js?

Il y a une proposition pour introduire le style C # async-await. Je sais que Babel.js transpile ES6 à ES5, mais existe-t-il un moyen de le faire transpiler en asynchrone pour ES5?

javascriptasync-awaitbabeljsecmascript-next
56
tldr

Babel v6

Depuis Babel v6, Babel ne contient plus de transformateur lui-même. Vous devez explicitement spécifier n'importe quelle fonctionnalité vous voulez transformer.

Presets - environnement non ES2015

Le moyen le plus rapide pour que cela fonctionne est d'utiliser presets qui contient déjà l'ensemble des plugins nécessaires pour transformer ES2015 et les propositions plus récentes. Pour async, vous aurez besoin du es2015 et es2017 préréglages et le plugin runtime (n'oubliez pas d'installer babel-runtime comme décrit dans la documentation):

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

Presets - environnement ES2015

Si vous exécutez le code dans un environnement qui prend en charge ES2015 (plus spécifiquement, les générateurs et les promesses), alors tout ce dont vous avez besoin est le préréglage es2017:

{
  "presets": [
    "es2017"
  ]
}

Douane

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

Afin de exécuter la fonction asynchrone, vous devez soit utiliser

  • transform-async-to-generator : convertit la fonction async en générateur. Cela utilisera la propre implémentation "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 telles que bluebird.

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

Exemples:

Async au générateur 

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

Méthode asynchrone avec module 

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

Async au 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
Felix Kling

Cette solution a peut-être changé depuis (25 février Felix Kling) ou peut-être qu'il y a plus d'une façon d'utiliser async en attente.

Ce qui a fonctionné pour nous, c'était de diriger Babel comme ça

$ npm install babel-runtime

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

Je l'ai fait fonctionner dès 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
Tobi

Peut-être encore plus à jour maintenant; il suffit de mettre les trucs 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 sur comment-puis-je-utiliser-es2016-es7-async-attendre-dans-mes-tests-d'acceptation-pour-une-koa-js-app pour plus de détails.

2
egeland

La réponse approuvée semble désormais dépassée. Le drapeau expérimental est déconseillé au profit de la scène.

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

Utilisation 

$ babel --stage 0

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

Étape 0

  • es7.classProperties
  • es7.comprehensions

Étape 1

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

Stage 2 (Stage 2 et supérieur sont activés par défaut)

  • es7.exponentiationOperator
2
Matt Dell