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
?
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 fonctionasync
en générateur. Cela utilisera la mise en œuvre de "co-routine" de Babel. -
transform-async-to-module-method
: convertit également la fonctionasync
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 quebluebird
.
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 });
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
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
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.
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