Sto cercando di usare asincrono, attendo da zero su Babel 6, ma sto ottenendo rigeneratorRuntime non è definito.

.babelrc file

{
    "presets": [ "es2015", "stage-0" ]
}

file package.json

"devDependencies": {
    "babel-core": "^6.0.20",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15"
}

file .js

"use strict";
async function foo() {
  await bar();
}
function bar() { }
exports.default = foo;

Usarlo normalmente senza asincrono / wait funziona perfettamente. Qualche idea su cosa sto facendo di sbagliato?

babel-polyfill( deprecato a partire da Babele 7.4) è obbligatorio. È inoltre necessario installarlo per far funzionare async / wait.

npm i -D babel-core babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-loader

package.json

"devDependencies": {
  "babel-core": "^6.0.20",
  "babel-polyfill": "^6.0.16",
  "babel-preset-es2015": "^6.0.15",
  "babel-preset-stage-0": "^6.0.15"
}

.babelrc

{
  "presets": [ "es2015", "stage-0" ]
}

.js con async / await (codice di esempio)

"use strict";

export default async function foo() {
  var s = await bar();
  console.log(s);
}

function bar() {
  return "bar";
}

Nel file di avvio

require("babel-core/register");
require("babel-polyfill");

Se si utilizza il webpack, è necessario inserirlo come primo valore entrydell'array nel file di configurazione del webpack (in genere webpack.config.js), come indicato nel commento di @Cemen:

module.exports = {
  entry: ['babel-polyfill', './test.js'],

  output: {
    filename: 'bundle.js'       
  },

  module: {
    loaders: [
      { test: /\.jsx?$/, loader: 'babel', }
    ]
  }
};

Se si desidera eseguire test con Babel, utilizzare:

mocha --compilers js:babel-core/register --require babel-polyfill

Oltre a polyfill, utilizzo babel-plugin-transform-runtime . Il plugin è descritto come:

Esternalizza i riferimenti ad helper e builtin, riempi automaticamente il tuo codice senza inquinare globalmente. Cosa significa questo in realtà? Fondamentalmente, puoi usare built-in come Promise, Set, Symbol ecc e anche tutte le funzionalità di Babel che richiedono un riempimento polifunzionale senza inquinamento globale, rendendolo estremamente adatto per le biblioteche.

Include anche il supporto per asincrono / wait insieme ad altri built-in di ES 6.

$ npm install --save-dev babel-plugin-transform-runtime

In .babelrc, aggiungi il plug-in di runtime

{
  "plugins": [
    ["transform-runtime", {
      "regenerator": true
    }]
  ]
}

Nota Se stai usando babel 7, il pacchetto è stato rinominato in @ babel / plugin-transform-runtime .

Utenti Babel 7

Ho avuto qualche problema a aggirare questo dato che la maggior parte delle informazioni riguardava le precedenti versioni di babele. Per Babel 7, installa queste due dipendenze:

npm install --save @babel/runtime 
npm install --save-dev @babel/plugin-transform-runtime

E, in .babelrc, aggiungi:

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
}

Aggiornare

Funziona se imposti il ​​target su Chrome. Ma potrebbe non funzionare per altri target, fare riferimento a: https://github.com/babel/babel-preset-env/issues/112

Quindi questa risposta NON è del tutto appropriata per la domanda originale. Lo terrò qui come riferimento a babel-preset-env.

Una soluzione semplice è quella di aggiungere import 'babel-polyfill'all'inizio del codice.

Se si utilizza il webpack, è necessario aggiungere una soluzione rapida babel-polyfillcome mostrato di seguito:

entry: {
    index: ['babel-polyfill', './index.js']
}

Credo di aver trovato le migliori pratiche più recenti.

Controlla questo progetto: https://github.com/babel/babel-preset-env

yarn add --dev babel-preset-env

Utilizzare quanto segue come configurazione babel:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 Chrome versions"]
      }
    }]
  ]
}

Quindi la tua app dovrebbe andare bene nelle ultime 2 versioni del browser Chrome.

È inoltre possibile impostare Nodo come target o ottimizzare l'elenco dei browser in base a https://github.com/ai/browserslist

Dimmi cosa, non dirmi come.

Mi piace molto babel-preset-envla filosofia: dimmi quale ambiente vuoi supportare, NON dirmi come supportarli. È la bellezza della programmazione dichiarativa.

Ho testato async awaite funzionano. Non so come funzionano e non voglio davvero saperlo. Voglio invece dedicare il mio tempo al mio codice e alla mia logica aziendale. Grazie a babel-preset-env, mi libera dall'inferno della configurazione di Babele.

In alternativa, se non hai bisogno di tutti i moduli babel-polyfillforniti, puoi semplicemente specificare babel-regenerator-runtimenella configurazione del tuo webpack:

module.exports = {
  entry: ['babel-regenerator-runtime', './test.js'],

  // ...
};

Quando si utilizza webpack-dev-server con HMR, ciò riduce notevolmente il numero di file che deve essere compilato su ogni build. Questo modulo è installato come parte di esso, babel-polyfillquindi se hai già quello che stai bene, altrimenti puoi installarlo separatamente con npm i -D babel-regenerator-runtime.

La mia soluzione semplice:

npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-plugin-transform-async-to-generator

.babelrc

{
  "presets": [
    ["latest", {
      "es2015": {
        "loose": true
      }
    }],
    "react",
    "stage-0"
  ],
  "plugins": [
    "transform-runtime",
    "transform-async-to-generator"
  ]
}

Babel 7.4.0 o successivo (core-js 2/3)

A partire da Babel 7.4.0 , @babel/polyfill è obsoleto .

In generale, ci sono due modi per installare polyfill / rigeneratore: tramite spazio dei nomi globale (Opzione 1) o come ponyfill (Opzione 2, senza inquinamento globale).

Opzione 1: @babel/preset-env

presets: [
  ["@babel/preset-env", {
    useBuiltIns: "usage",
    corejs: 3, // or 2,
    targets: {
        firefox: "64", // or whatever target to choose .    
    },
  }]
]

userà automaticamente regenerator-runtimee in core-jsbase al tuo obiettivo . Non è necessario importare nulla manualmente. Non dimenticare di installare le dipendenze di runtime:

npm i --save regenerator-runtime core-js

In alternativa, impostalo useBuiltIns: "entry"e importalo manualmente:

import "regenerator-runtime/runtime";
import "core-js/stable"; // if polyfills are also needed

Opzione 2: @babel/transform-runtime con @babel/runtime(nessun inquinamento globale)

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true,
        corejs: 3 // or 2; if polyfills needed
        ...
      }
    ]
  ]
}

Installalo:

npm i -D @babel/plugin-transform-runtime
npm i @babel/runtime

Se usi i polyfill core-js, li installi @babel/runtime-corejs2o @babel/runtime-corejs3invece, vedi qui .

Saluti

babel-regenerator-runtimeè ora deprecato , invece si dovrebbe usare regenerator-runtime.

Per utilizzare il generatore di runtime con webpacke babelv7:

installare regenerator-runtime:

npm i -D regenerator-runtime

E poi aggiungi nella configurazione del webpack:

entry: [
  'regenerator-runtime/runtime',
  YOUR_APP_ENTRY
]

Aggiorna il tuo .babelrcfile secondo i seguenti esempi, funzionerà.

Se stai usando il @babel/preset-envpacchetto

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}
or if you are using babel-preset-env package

{
  "presets": [
    [
      "env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

Fare attenzione alle funzioni sollevate

Avevo sia la mia "importazione polyfill" che la mia "funzione asincrona" nello stesso file, tuttavia stavo usando la sintassi della funzione che la solleva sopra il polyfill che mi darebbe l' ReferenceError: regeneratorRuntime is not definederrore.

Cambia questo codice

import "babel-polyfill"
async function myFunc(){ }

a questo

import "babel-polyfill"
var myFunc = async function(){}

per evitare che venga sollevato sopra l'importazione del polyfill.

A partire da ottobre 2019 questo ha funzionato per me:

Aggiungi questo al preset.

 "presets": [
      "@babel/preset-env"
    ]

Quindi installare il rigeneratore-runtime usando npm.

npm i regenerator-runtime

E poi nel tuo file principale usa: (questa importazione viene usata una sola volta)

import "regenerator-runtime/runtime";

Questo ti consentirà di utilizzare async awaitsnel tuo file e rimuovere il fileregenerator error

Se si utilizza, è babel-preset-stage-2sufficiente avviare lo script con --require babel-polyfill.

Nel mio caso questo errore è stato generato da Mochatest.

In seguito risolto il problema

mocha \"server/tests/**/*.test.js\" --compilers js:babel-register --require babel-polyfill

Ho iniziato a ricevere questo errore dopo aver convertito il mio progetto in un progetto dattiloscritto. Da quello che ho capito, il problema deriva da asincrono / attendo di non essere riconosciuto.

Per me l'errore è stato risolto aggiungendo due cose alla mia configurazione:

1. Come accennato più volte, avevo bisogno di aggiungere babel-polyfill nel mio array di voci del webpack:

   ...
   
   voce: ['babel-polyfill', './index.js'],
   
   ...

2. Avevo bisogno di aggiornare il mio .babelrc per consentire la compilazione di async / wait in generatori:

   {
     "preset": ["es2015"],
     "plugins": ["transform-async-to-generator"]
   }

DevDependencies:

Ho dovuto installare alcune cose nelle mie devDependencies anche nel mio file package.json. Vale a dire, mi mancava babel-plugin-transform-async-to-generator, babel-polyfill e babel-preset-es2015:

 "devDependencies": {
    "babel-loader": "^6.2.2",
    "babel-plugin-transform-async-to-generator": "^6.5.0",
    "babel-polyfill": "^6.5.0",
    "babel-preset-es2015": "^6.5.0",
    "webpack": "^1.12.13"
 }

Codice completo:

Ho ottenuto il codice da una sintesi di GitHub davvero utile e concisa che puoi trovare qui .

Ho avuto questo problema in Chrome. Simile alla risposta di RienNeVaPlu, questo mi ha risolto:

npm install --save-dev regenerator-runtime

Quindi nel mio codice:

import 'regenerator-runtime/runtime';

Felice di evitare i 200 kB extra da babel-polyfill.

Questo errore si verifica quando le async/awaitfunzioni vengono utilizzate senza i plug-in Babel appropriati. A partire da marzo 2020, dovrebbe essere tutto ciò che devi fare. ( @babel/polyfille molte delle soluzioni accettate sono state deprecate in Babel. Leggi di più nei documenti Babel. )

Nella riga di comando, digitare:

npm install --save-dev @babel/plugin-transform-runtime

Nel tuo babel.config.jsfile, aggiungi questo plugin @babel/plugin-transform-runtime. Nota: l'esempio seguente include gli altri preset e plugin che ho per un piccolo progetto React / Node / Express su cui ho lavorato di recente:

module.exports = {
  presets: ['@babel/preset-react', '@babel/preset-env'],
  plugins: ['@babel/plugin-proposal-class-properties', 
  '@babel/plugin-transform-runtime'],
};

Stai ricevendo un errore perché i generatori asincrono / attendono l'uso, che sono una funzione ES2016, non ES2015. Un modo per risolvere questo problema è installare la preimpostazione babel per ES2016 ( npm install --save babel-preset-es2016) e compilarla su ES2016 anziché ES2015:

"presets": [
  "es2016",
  // etc...
]

Come menzionano le altre risposte, puoi anche usare i polyfill (assicurati di caricare il polyfill prima di eseguire qualsiasi altro codice). In alternativa, se non si desidera includere tutte le dipendenze del polyfill, è possibile utilizzare babel-rigenerator-runtime o babel-plugin-transform-runtime .

Ho corretto questo errore installando babel-polyfill

npm install babel-polyfill --save

quindi l'ho importato nel mio punto di ingresso dell'app

import http from 'http';
import config from 'dotenv';
import 'babel-polyfill';
import { register } from 'babel-core';
import app from '../app';

per i test ho incluso --requisto babel-polyfill nel mio script di test

"test": "export NODE_ENV=test|| SET NODE_ENV=test&& mocha --compilers 
  js:babel-core/register --require babel-polyfill server/test/**.js --exit"

Nuova risposta Perché segui la mia risposta?

Ans: Perché ho intenzione di darti una risposta con l'ultimo progetto npm versione di aggiornamento.

2017/04/14

"name": "es6",
 "version": "1.0.0",
   "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2"

Se usi questa versione o più versione UP di Npm e tutte le altre ... SO devi solo cambiare:

webpack.config.js

module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

Dopo aver modificato i webpack.config.jsfile, aggiungi questa riga all'inizio del codice.

import "babel-polyfill";

Ora controlla che sia tutto a posto. LINK di riferimento

Grazie anche a @BrunoLM per la sua bella risposta.

I browser mirati che devo supportare già supportano async / waitit, ma quando scrivo i test moka, senza l'impostazione corretta ho ancora ricevuto questo errore.

La maggior parte degli articoli Ho cercato su google sono obsoleti, tra cui la risposta accettata e l'alta votato risposte qui, vale a dire che non è necessario polyfill, babel-regenerator-runtime, babel-plugin-transform-runtime. ecc. se i browser di destinazione supportano già asincronizzazione / attendi (ovviamente se non hai bisogno di polyfill)

Non voglio usare webpack nemmeno .

La risposta di Tyler Long è in realtà sulla strada giusta da quando ha suggerito babel-preset-env(ma l'ho omesso prima come ha menzionato il polifill all'inizio). Ho ancora ottenuto il ReferenceError: regeneratorRuntime is not definedprimo, poi ho capito che era perché non avevo fissato l'obiettivo. Dopo aver impostato la destinazione per il nodo, correggo l'errore rigeneratorRuntime ：

  "scripts": {
    //"test": "mocha --compilers js:babel-core/register"
    //https://github.com/mochajs/mocha/wiki/compilers-deprecation
    "test": "mocha --require babel-core/register"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "mocha": "^5.2.0"
  },
  //better to set it .bablerc, I list it here for brevity and it works too.
  "babel": {
    "presets": [
      ["env",{
        "targets": {
          "node": "current"
           "chrome": 66,
           "firefox": 60,
        },
        "debug":true
      }]
    ]
  }

A babel7 utenti e ParcelJS> = 1.10.0 utenti

npm i @babel/runtime-corejs2
npm i --save-dev @babel/plugin-transform-runtime @babel/core

.babelrc

{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 2
    }]
  ]
}

tratto da https://github.com/parcel-bundler/parcel/issues/1762

1 - Installa babel-plugin-transform-async-to-module-method, babel-polyfil, bluebird, babel-preset-es2015, babel-core:

npm install babel-plugin-transform-async-to-module-method babel-polyfill bluebird babel-preset-es2015 babel-core

2 - Aggiungi il tuo polyfill js babel:

import 'babel-polyfill';

3 - Aggiungi plugin nel tuo .babelrc:

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

Fonte: http://babeljs.io/docs/plugins/transform-async-to-module-method/

Ho avuto un setup
con webpack usando presets: ['es2015', 'stage-0']
e moka che eseguiva test compilati da webpack.

Per far funzionare i miei async/awaittest non mi resta che aggiungere mocha --require babel-polyfillun'opzione.

Ottengo questo errore usando gulp con rollup quando ho provato ad usare i generatori ES6:

gulp.task('scripts', () => {
  return rollup({
    entry: './app/scripts/main.js',
    format: "iife",
    sourceMap: true,
    plugins: [babel({
      exclude: 'node_modules/**',
      "presets": [
        [
          "es2015-rollup"
        ]
      ],
      "plugins": [
        "external-helpers"
      ]
    }),
    includePaths({
      include: {},
      paths: ['./app/scripts'],
      external: [],
      extensions: ['.js']
    })]
  })

  .pipe(source('app.js'))
  .pipe(buffer())
  .pipe(sourcemaps.init({
    loadMaps: true
  }))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('.tmp/scripts'))
  .pipe(reload({ stream: true }));
});

Posso ipotizzare che la soluzione fosse quella di includere babel-polyfillcome componente del pergolato:

bower install babel-polyfill --save

e aggiungilo come dipendenza in index.html:

<script src="/bower_components/babel-polyfill/browser-polyfill.js"></script>

Per le persone che desiderano utilizzare la babel-polyfillversione 7 ^ farlo con webpackver3 ^.

Npm installa il modulo npm i -D @babel/polyfill

Quindi, nel tuo webpackfile, entryfai questo

entry: ['@babel/polyfill', path.resolve(APP_DIR, 'App.js')],

La mia piastra di lavoro babel 7 per reagire con l'autonomia del rigeneratore:

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": true,
        },
      },
    ],
    "@babel/preset-react",
  ],
  "plugins": [
    "@babel/plugin-syntax-class-properties",
    "@babel/plugin-proposal-class-properties"
  ]
}

package.json

...

"devDependencies": {
  "@babel/core": "^7.0.0-0",
  "@babel/plugin-proposal-class-properties": "^7.4.4",
  "@babel/plugin-syntax-class-properties": "^7.2.0",
  "@babel/polyfill": "^7.4.4",
  "@babel/preset-env": "^7.4.5",
  "@babel/preset-react": "^7.0.0",
  "babel-eslint": "^10.0.1",
...

main.js

import "@babel/polyfill";

....

Se stai costruendo un'app, hai solo bisogno di @babel/preset-enve @babel/polyfill:

npm i -D @babel/preset-env
npm i @babel/polyfill

(Nota: non è necessario installare i pacchetti core-jse regenerator-runtimeperché entrambi saranno stati installati da @ babel / polyfill)

Quindi in .babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"  // this is the key. use 'usage' for further codesize reduction, but it's still 'experimental'
      }
    ]
  ]
}

Ora imposta i tuoi ambienti target. Qui lo facciamo nel .browserslistrcfile:

# Browsers that we support

>0.2%
not dead
not ie <= 11
not op_mini all

Infine, se ci sei andato useBuiltIns: "entry", metti import @babel/polyfillin cima al tuo file di voce. Altrimenti, hai finito.

L'uso di questo metodo importerà in modo selettivo quei polyfill e il file 'rigenerator-runtime' (risolvendo regeneratorRuntime is not definedqui il problema) SOLO se sono necessari in uno dei tuoi ambienti / browser di destinazione.

per riferimento futuro :

A partire dalla versione Babel 7.0.0-beta.55 i preset dello stage sono stati rimossi

consultare il blog https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

async waitit può essere ancora utilizzato da

https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator#usage

installazione

npm install --save-dev @babel/plugin-transform-async-to-generator

utilizzo in .babelrc

 { 
     "presets": ["@babel/preset-env"],
     "plugins": ["@babel/plugin-transform-async-to-generator"]
 }

e usando babel polyfill https://babeljs.io/docs/en/babel-polyfill

installazione

npm install --save @babel/polyfill

webpack.config.js

module.exports = {
  entry: ["@babel/polyfill", "./app/js"],
};

Nel 2019 con Babel 7.4.0+, il babel-polyfillpacchetto è stato deprecato a favore di includere direttamente core-js/stable( core-js@3+, per polifilare le funzioni ECMAScript) e regenerator-runtime/runtime(necessario per usare le funzioni del generatore traspilato):

import "core-js/stable";
import "regenerator-runtime/runtime";

Informazioni dalla babel-polyfill documentazione .

Il modo più semplice per risolvere questo "problema di rigeneratore non definito" nella tua console:

Non è necessario installare plug-in non necessari. Aggiungi solo:

<script src="https://unpkg.com/regenerator-runtime@0.13.1/runtime.js"></script>

all'interno del corpo nel tuo index.html. Ora rigeneratorRuntime dovrebbe essere definito una volta eseguito babel e ora le funzioni asincrone / attesa dovrebbero essere compilate correttamente in ES2015

Se usi Gulp + Babel come frontend devi usare babel-polyfill

npm install babel-polyfill

e quindi aggiungere un tag di script a index.html sopra tutti gli altri tag di script e fare riferimento a babel-polyfill da node_modules