Ich versuche, Async zu verwenden, warte auf Babel 6 von Grund auf, aber ich bekomme Regenerator. Laufzeit ist nicht definiert.

.babelrc Datei

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

package.json Datei

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

.js Datei

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

Die normale Verwendung ohne async / await funktioniert einwandfrei. Irgendwelche Ideen, was ich falsch mache?

babel-polyfillist erforderlich. Sie müssen es auch installieren, damit Async / Warten auf Arbeit funktioniert.

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 mit async / await (Beispielcode)

"use strict";

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

function bar() {
  return "bar";
}

In der Startdatei

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

Wenn Sie Webpack verwenden , müssen Sie es entry(normalerweise webpack.config.js) als ersten Wert Ihres Arrays in Ihre Webpack-Konfigurationsdatei einfügen , wie im Kommentar von @Cemen angegeben:

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

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

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

Wenn Sie Tests mit babel ausführen möchten, verwenden Sie:

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

Neben Polyfill verwende ich Babel-Plugin-Transform-Runtime . Das Plugin wird beschrieben als:

Externalisieren Sie Verweise auf Helfer und integrierte Funktionen und füllen Sie Ihren Code automatisch aus, ohne die globalen Daten zu verschmutzen. Was bedeutet das eigentlich? Grundsätzlich können Sie integrierte Funktionen wie Promise, Set, Symbol usw. verwenden und alle Babel-Funktionen verwenden, für die eine Polyfüllung nahtlos und ohne globale Verschmutzung erforderlich ist, sodass sie sich hervorragend für Bibliotheken eignet.

Es enthält auch Unterstützung für Async / Warten zusammen mit anderen integrierten Funktionen von ES 6.

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

In .babelrc, fügen Sie die Laufzeit - Plugin

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

Hinweis Wenn Sie babel 7 verwenden, wurde das Paket in @ babel / plugin-transform-runtime umbenannt .

Babel 7 Benutzer

Ich hatte einige Probleme, dies zu umgehen, da die meisten Informationen für frühere Babel-Versionen waren. Installieren Sie für Babel 7 diese beiden Abhängigkeiten:

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

Und fügen Sie in .babelrc Folgendes hinzu:

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

Aktualisieren

Es funktioniert, wenn Sie das Ziel auf Chrome setzen. Bei anderen Zielen funktioniert dies möglicherweise nicht. Weitere Informationen finden Sie unter: https://github.com/babel/babel-preset-env/issues/112

Diese Antwort ist also NICHT ganz richtig für die ursprüngliche Frage. Ich werde es hier als Referenz behalten babel-preset-env.

Eine einfache Lösung besteht darin, import 'babel-polyfill'am Anfang Ihres Codes hinzuzufügen .

Wenn Sie ein Webpack verwenden, können Sie es wie folgt hinzufügen babel-polyfill:

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

Ich glaube, ich habe die neuesten Best Practices gefunden.

Überprüfen Sie dieses Projekt: https://github.com/babel/babel-preset-env

yarn add --dev babel-preset-env

Verwenden Sie Folgendes als Babel-Konfiguration:

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

Dann sollte Ihre App in den letzten beiden Versionen des Chrome-Browsers einsatzbereit sein.

Sie können auch Node als Ziel festlegen oder die Browserliste gemäß https://github.com/ai/browserslist optimieren

Sag mir was, sag mir nicht wie.

Ich mag babel-preset-envdie Philosophie sehr: Sag mir, welche Umgebung du unterstützen möchtest, sag mir NICHT, wie ich sie unterstützen soll. Das ist das Schöne an der deklarativen Programmierung.

Ich habe getestet async awaitund sie funktionieren. Ich weiß nicht, wie sie funktionieren und ich möchte es wirklich nicht wissen. Ich möchte meine Zeit stattdessen mit meinem eigenen Code und meiner Geschäftslogik verbringen. Dank babel-preset-envbefreit es mich von der Hölle der Babel-Konfiguration.

Wenn Sie nicht alle bereitgestellten Module benötigen babel-polyfill, können babel-regenerator-runtimeSie alternativ einfach in Ihrer Webpack-Konfiguration Folgendes angeben :

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

  // ...
};

Bei Verwendung von webpack-dev-server mit HMR wurde dadurch die Anzahl der Dateien, die bei jedem Build kompiliert werden müssen, um ein Vielfaches reduziert. Dieses Modul wird als Teil von installiert babel-polyfill, wenn Sie bereits haben, dass es Ihnen gut geht, andernfalls können Sie es separat mit installieren npm i -D babel-regenerator-runtime.

Meine einfache Lösung:

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 oder höher (core-js 2/3)

Wie von Babel 7.4.0 , @babel/polyfill ist veraltet .

Im Allgemeinen gibt es zwei Möglichkeiten, Polyfills / Regenerator zu installieren: über den globalen Namespace (Option 1) oder als Ponyfill (Option 2, ohne globale Verschmutzung).

Option 1: @babel/preset-env

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

wird automatisch regenerator-runtimeund core-jsentsprechend Ihrem Ziel verwendet . Sie müssen nichts manuell importieren. Vergessen Sie nicht, Laufzeitabhängigkeiten zu installieren:

npm i --save regenerator-runtime core-js

Alternativ können Sie useBuiltIns: "entry"es manuell einstellen und importieren:

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

Option 2: @babel/transform-runtime mit @babel/runtime(keine globale Verschmutzung)

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

Es installieren:

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

Wenn Sie Kern-js polyfills zu verwenden, installieren Sie @babel/runtime-corejs2oder @babel/runtime-corejs3stattdessen finden Sie hier .

Prost

babel-regenerator-runtimeist jetzt veraltet , stattdessen sollte man verwenden regenerator-runtime.

So verwenden Sie den Laufzeitgenerator mit webpackund babelv7:

installieren regenerator-runtime:

npm i -D regenerator-runtime

Und dann innerhalb der Webpack-Konfiguration hinzufügen:

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

Aktualisieren Sie Ihre .babelrcDatei gemäß den folgenden Beispielen, es wird funktionieren.

Wenn Sie @babel/preset-envPaket verwenden

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

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

Achten Sie auf hochgezogene Funktionen

Ich hatte sowohl meinen 'Polyfill-Import' als auch meine 'Async-Funktion' in derselben Datei, verwendete jedoch die Funktionssyntax, die sie über die Polyfill hebt, was mir den ReferenceError: regeneratorRuntime is not definedFehler geben würde .

Ändern Sie diesen Code

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

dazu

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

um zu verhindern, dass es über den Polyfill-Import gehoben wird.

Ab Oktober 2019 funktionierte dies für mich:

Fügen Sie dies der Voreinstellung hinzu.

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

Installieren Sie dann die Regenerator-Laufzeit mit npm.

npm i regenerator-runtime

Und dann in Ihrer Hauptdatei verwenden: (dieser Import wird nur einmal verwendet)

import "regenerator-runtime/runtime";

Auf diese Weise können Sie async awaitsin Ihrer Datei verwenden und die entfernenregenerator error

Wenn Sie verwenden, müssen Sie babel-preset-stage-2nur das Skript mit starten --require babel-polyfill.

In meinem Fall wurde dieser Fehler durch MochaTests ausgelöst .

Im Folgenden wurde das Problem behoben

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

Ich bekam diesen Fehler, nachdem ich mein Projekt in ein Typoskript-Projekt konvertiert hatte. Soweit ich weiß, ist das Problem darauf zurückzuführen, dass Async / Warten nicht erkannt wird.

Für mich wurde der Fehler behoben, indem zwei Dinge zu meinem Setup hinzugefügt wurden:

1. Wie oben oft erwähnt, musste ich meinem Webpack-Eintragsarray babel-polyfill hinzufügen:

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

2. Ich musste meine .babelrc aktualisieren, um die Kompilierung von async / await in Generatoren zu ermöglichen:

   {
     "Voreinstellungen": ["es2015"],
     "Plugins": ["Async-Generator transformieren"]
   }}

DevDependencies:

Ich musste auch einige Dinge in meine devDependencies in meiner package.json-Datei installieren. Mir fehlten nämlich das babel-plugin-transform-async-to-generator, das babel-polyfill und das 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"
 }

Vollständiger Code:

Ich habe den Code von einem wirklich hilfreichen und prägnanten GitHub-Inhalt erhalten, den Sie hier finden .

Ich hatte dieses Problem in Chrome. Ähnlich wie bei RienNeVaPlus Antwort löste dies das Problem für mich:

npm install --save-dev regenerator-runtime

Dann in meinem Code:

import 'regenerator-runtime/runtime';

Gerne vermeiden wir die zusätzlichen 200 kB ab babel-polyfill.

Sie erhalten eine Fehlermeldung, weil asynchrone / wartende Generatoren verwendet werden, bei denen es sich um eine ES2016-Funktion handelt, nicht um ES2015. Eine Möglichkeit, dies zu beheben, besteht darin, die Babel-Voreinstellung für ES2016 ( npm install --save babel-preset-es2016) zu installieren und anstelle von ES2015 auf ES2016 zu kompilieren:

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

Wie in den anderen Antworten erwähnt, können Sie auch Polyfills verwenden (stellen Sie jedoch sicher, dass Sie die Polyfill zuerst laden, bevor anderer Code ausgeführt wird). Wenn Sie nicht alle Polyfill-Abhängigkeiten einbeziehen möchten, können Sie alternativ die Laufzeit babel-regenerator-runtime oder die Laufzeit babel-plugin-transform-runtime verwenden .

Ich habe diesen Fehler durch die Installation von babel-polyfill behoben

npm install babel-polyfill --save

dann habe ich es in meinen App-Einstiegspunkt importiert

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

Zum Testen habe ich --require babel-polyfill in mein Testskript aufgenommen

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

Dieser Fehler wird verursacht, wenn async/awaitFunktionen ohne die richtigen Babel-Plugins verwendet werden. Ab März 2020 sollten Sie nur noch Folgendes tun. ( @babel/polyfillund viele der akzeptierten Lösungen sind in Babel veraltet. Weitere Informationen finden Sie in den Babel-Dokumenten. )

Geben Sie in die Befehlszeile Folgendes ein:

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

Fügen Sie in Ihrer babel.config.jsDatei dieses Plugin hinzu @babel/plugin-transform-runtime. Hinweis: Das folgende Beispiel enthält die anderen Voreinstellungen und Plugins, die ich für ein kleines React / Node / Express-Projekt habe, an dem ich kürzlich gearbeitet habe:

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

Neue Antwort Warum folgst du meiner Antwort?

Antwort : Weil ich Ihnen eine Antwort mit dem neuesten Update-Version npm-Projekt geben werde.

14.04.2017

"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"

Wenn Sie diese oder eine andere UP-Version von Npm und allen anderen verwenden, müssen Sie nur Folgendes ändern:

webpack.config.js

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

Nach dem Ändern von webpack.config.jsDateien Fügen Sie diese Zeile einfach oben in Ihren Code ein.

import "babel-polyfill";

Überprüfen Sie jetzt, ob alles in Ordnung ist. Referenz LINK

Danke auch @BrunoLM für seine nette Antwort.

Die Zielbrowser, die ich unterstützen muss, unterstützen bereits async / await, aber beim Schreiben von Mokka-Tests ohne die richtige Einstellung wird dieser Fehler immer noch angezeigt.

Die meisten Artikel I sind veraltet gegoogelt, einschließlich der akzeptierte Antwort und hohe Antworten stimmten hier, also Sie nicht brauchen polyfill, babel-regenerator-runtime, babel-plugin-transform-runtime. usw., wenn Ihre Zielbrowser bereits async / await unterstützen (natürlich, wenn Sie keine Polyfüllung benötigen)

Ich möchte auch nicht verwenden webpack.

Tyler Longs Antwort ist tatsächlich auf dem richtigen Weg, seit er vorgeschlagen hat babel-preset-env(aber ich habe sie zuerst weggelassen, als er Polifill am Anfang erwähnte). Ich habe das ReferenceError: regeneratorRuntime is not definedzuerst immer noch bekommen, dann wurde mir klar, dass ich das Ziel nicht gesetzt habe. Nachdem ich das Ziel für den Knoten festgelegt habe, behebe ich den Fehler regeneratorRuntime:

  "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
      }]
    ]
  }

An babel7 Benutzer und ParcelJS> = 1.10.0 Benutzer

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

.babelrc

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

entnommen aus https://github.com/parcel-bundler/parcel/issues/1762

1 - Installieren Sie die babel-plugin-transform-async-to-module-Methode, 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 - Fügen Sie Ihrem js babel polyfill hinzu:

import 'babel-polyfill';

3 - Fügen Sie ein Plugin in Ihre .babelrc ein:

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

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

Ich hatte ein Setup
mit Webpack unter Verwendung von presets: ['es2015', 'stage-0']
und Mokka , das Tests ausführte, die von Webpack kompiliert wurden.

Damit meine async/awaitTests funktionieren, musste ich nur die mocha --require babel-polyfillOption hinzufügen .

Ich erhalte diesen Fehler mit gulp with rollup, als ich versuchte, ES6-Generatoren zu verwenden:

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 }));
});

Ich kann sagen, dass die Lösung darin bestand, babel-polyfillals Laubenkomponente Folgendes aufzunehmen:

bower install babel-polyfill --save

und fügen Sie es als Abhängigkeit in index.html hinzu:

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

Für Leute, die die babel-polyfillVersion 7 ^ verwenden webpackmöchten, tun Sie dies mit ver3 ^.

Npm installieren Sie das Modul npm i -D @babel/polyfill

Dann tun Sie dies in Ihrer webpackDatei in Ihrem entryPunkt

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

Mein funktionierendes Babel 7 Boilerplate für die Reaktion mit der Regenerator-Laufzeit:

.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";

....

Wenn Sie eine App erstellen, benötigen Sie nur das @babel/preset-envund @babel/polyfill:

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

(Hinweis: Sie müssen die Pakete core-jsund nicht installieren, regenerator-runtimeda beide von @ babel / polyfill installiert wurden.)

Dann in .babelrc:

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

Legen Sie nun Ihre Zielumgebungen fest. Hier machen wir es in der .browserslistrcDatei:

# Browsers that we support

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

Wenn Sie mitgegangen sind useBuiltIns: "entry", setzen Sie es import @babel/polyfilloben in Ihre Eingabedatei. Ansonsten sind Sie fertig.

Mit dieser Methode werden diese Polyfills und die 'Regenerator-Laufzeit'-Datei (Behebung Ihres regeneratorRuntime is not definedProblems hier) NUR dann selektiv importiert, wenn sie von einer Ihrer Zielumgebungen / Browser benötigt werden.

zum späteren Nachschlagen :

Ab Babel Version 7.0.0-beta.55 wurden Stage Presets entfernt

Siehe Blog https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

async await kann weiterhin von verwendet werden

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

Installation

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

Verwendung in .babelrc

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

und Verwenden von babel polyfill https://babeljs.io/docs/en/babel-polyfill

Installation

npm install --save @babel/polyfill

webpack.config.js

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

Im Jahr 2019 mit Babel 7.4.0+wurde das babel-polyfillPaket zugunsten der direkten Einbeziehung core-js/stable( core-js@3+um Polyfill-ECMAScript-Funktionen) und regenerator-runtime/runtime(zur Verwendung transpilierter Generatorfunktionen erforderlich ) abgelehnt :

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

Informationen aus der babel-polyfill Dokumentation .

Der einfachste Weg, um dieses "RegeneratorRuntime nicht definierte Problem" in Ihrer Konsole zu beheben:

Sie müssen keine unnötigen Plugins installieren. Einfach hinzufügen:

<script src="https://unpkg.com/[email protected]/runtime.js"></script>

innerhalb des Körpers in Ihrer index.html. Jetzt sollte regeneratorRuntime definiert werden, sobald Sie babel ausführen, und jetzt sollten Ihre asynchronen / erwarteten Funktionen erfolgreich in ES2015 kompiliert werden

Wenn Sie Gulp + Babel für ein Frontend verwenden, müssen Sie babel-polyfill verwenden

npm install babel-polyfill

Fügen Sie dann index.html vor allen anderen Skript-Tags ein Skript-Tag hinzu und verweisen Sie auf babel-polyfill von node_modules