Babel 6 regeneratorRuntime ist nicht definiert

Neben polyfill benutze ich babel-plugin-transform-runtime . Das Plugin wird beschrieben als:

Verweisen Sie Verweise auf Helfer und eingebaute Objekte, indem Sie Ihren Code automatisch polyfullen, ohne globale Werte zu beeinträchtigen. Was heißt das eigentlich? Grundsätzlich können Sie integrierte Funktionen wie Promise, Set, Symbol usw. verwenden. Außerdem können Sie alle Babel-Funktionen verwenden, für die eine Polyfill nahtlos und ohne globale Umweltverschmutzung erforderlich ist. Dies macht sie besonders für Bibliotheken geeignet.

Es enthält auch Unterstützung für async/await und andere integrierte Komponenten von ES 6. 

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

Fügen Sie in .babelrc das Laufzeit-Plugin hinzu

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

Aktualisieren

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

Also ist diese Antwort NICHT für die ursprüngliche Frage durchaus passend. Ich werde es hier als Verweis auf babel-preset-env aufbewahren.

Eine einfache Lösung ist das Hinzufügen von import 'babel-polyfill' am Anfang Ihres Codes.

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

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

Ich glaube, ich habe die neueste Best Practice gefunden.

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

yarn add --dev babel-preset-env

Verwenden Sie Folgendes als Ihre Babel-Konfiguration:

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

Dann sollte Ihre App für die letzten beiden Versionen des Chrome-Browsers geeignet sein.

Sie können auch Node als Ziele festlegen oder die Browserliste nach https://github.com/ai/browserslist optimieren.

Sag mir was, sag mir nicht wie.

Ich mag die Philosophie von babel-preset-env: Sag mir, welche Umgebung du unterstützen willst, sag mir NICHT, wie ich sie unterstützen soll. Es ist die Schönheit der deklarativen Programmierung.

Ich habe asyncawait getestet und 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-env befreit es mich von der Hölle der Babel-Konfiguration.

Wenn Sie nicht alle Module benötigen, die babel-polyfill bereitstellt, können Sie alternativ babel-regenerator-runtime in Ihrer Webpack-Konfiguration angeben:

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

  // ...
};

Wenn Sie den webpack-dev-server mit HMR verwenden, wurde dadurch die Anzahl der Dateien reduziert, die in jedem Build kompiliert werden müssen. Dieses Modul wird als Teil von babel-polyfill installiert. Wenn Sie dies bereits getan haben, können Sie es mit npm i -D babel-regenerator-runtime separat installieren.

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 Benutzer

Ich hatte einige Probleme damit umzugehen, 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 in .babelrc Folgendes hinzufügen:

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

babel-regenerator-runtime ist jetzt veraltet , stattdessen sollte regenerator-runtime verwendet werden.

So verwenden Sie den Laufzeitgenerator mit webpack und babel v7:

regenerator-runtime installieren: 

npm i -D regenerator-runtime

Und fügen Sie dann innerhalb der Webpack-Konfiguration hinzu: 

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

Seien Sie vorsichtig bei hochgezogenen Funktionen

Ich hatte sowohl meinen 'Polyfill-Import' als auch meine 'Async-Funktion' in derselben Datei, jedoch verwendete ich die Funktions-Syntax, die ihn über den Polyfill-Speicher hebt, wodurch ich den Fehler ReferenceError: regeneratorRuntime is not defined erhielt.

Ändern Sie diesen Code

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

zu diesem

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

um zu verhindern, dass es über dem Polyfill-Import angehoben wird.

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

In meinem Fall wurde dieser Fehler durch Mocha Tests ausgelöst.

Das Problem wurde behoben

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

Ich habe diese Fehlermeldung erhalten, nachdem ich mein Projekt in ein TypeScript-Projekt konvertiert hatte. Nach meinem Verständnis liegt das Problem darin, dass Async/Waitit nicht erkannt wird.

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

1. Wie bereits erwähnt, musste ich babel-polyfill in mein Webpack-Eintragsarray einfügen:

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

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

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

Entwicklungsabhängigkeiten:

Ich musste auch ein paar Dinge in meine devDependencies in meiner package.json-Datei installieren. Mir fehlten nämlich der Babel-Plugin-Transformations-Async-zu-Generator, Babel-Polyfill und der 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 Gist:

Ich habe den Code von einem wirklich hilfreichen und prägnanten GitHub Gist bekommen, den Sie hier finden können.

Babel 7.4.0, Core-Js 3

Ab Babel 7.4. , @babel/polyfillisveraltet .

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 .    
    },
  }]
]

verwendet automatisch regenerator-runtime und core-js entsprechend Ihrem Ziel . 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" einstellen und manuell importieren:

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

Option 2: @babel/transform-runtime mit @babel/runtime (keine Verschmutzung des globalen Anwendungsbereichs)

{
  "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 core-js polyfills verwenden, installieren Sie stattdessen @babel/runtime-corejs2 oder @babel/runtime-corejs3, siehe hier .

Prost

fehlende Kommas gefixt, minimale Änderung sind 6 Zeichen

Sie erhalten eine Fehlermeldung, weil Async/await Generatoren verwendet, die eine ES2016-Funktion und nicht ES2015 sind. Sie können dies beheben, indem Sie die Babel-Voreinstellung für ES2016 (npm install --save babel-preset-es2016) installieren und auf ES2016 anstelle von ES2015 kompilieren:

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

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

Aktualisieren Sie Ihre .babelrc-Datei gemäß den folgenden Beispielen. Es wird funktionieren.

Wenn Sie @babel/preset-env-Paket verwenden

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

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

Neue Antwort Warum folgen Sie meiner Antwort?

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

04/14/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 mehrere UPM-Versionen von Npm verwenden, und alle anderen ... SO müssen Sie nur ändern: 

webpack.config.js

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

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

import "babel-polyfill";

Jetzt überprüfen, ob alles in Ordnung ist. Referenz LINK

Danke auch @BrunoLM für seine schöne Antwort.

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

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

Die anvisierten Browser, die ich unterstützen muss, unterstützen bereits async/await, aber beim Schreiben von Moccatests ohne entsprechende Einstellung habe ich immer noch diesen Fehler erhalten. 

Die meisten Artikel, die ich gegoogelt habe, sind veraltet, einschließlich der akzeptierten Antwort und der hoch bewerteten Antworten, d. H. Sie brauchen keine polyfill, babel-regenerator-runtime, babel-plugin-transform-runtime. etc. wenn Ihr Zielbrowser bereits Async/await unterstützt (falls nicht, benötigen Sie polyfill)

Ich möchte auch nicht webpack verwenden. 

Tyler Longs Antwort ist eigentlich auf dem richtigen Weg, seit er babel-preset-env vorgeschlagen hat (aber ich habe es zuerst weggelassen, als er anfangs Polifill erwähnte). Ich bekam noch den ReferenceError: regeneratorRuntime is not defined am ersten, dann wurde mir klar, dass ich das Ziel nicht gesetzt habe. Nachdem Sie das Ziel für den Knoten festgelegt haben, behebe ich den Regeneratorlaufzeitfehler:

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

Ich hatte dieses Problem in Chrome. Ähnlich wie bei RienNeVaPlu answers Antwort wurde dies für mich gelöst:

npm install --save-dev regenerator-runtime

Dann in meinem Code:

import 'regenerator-runtime/runtime';

Gerne vermeiden Sie die zusätzlichen 200 kB von babel-polyfill.

1 - Installieren Sie die babel-plugin-transform-async-zu-modul-methode,

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

2 - Fügen Sie Ihrer js babel polyfill hinzu:

import 'babel-polyfill';

3 - Fügen Sie das 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/

Für Benutzer, die die babel-polyfill-Version 7 verwenden möchten, verwenden Sie webpack ver3 ^.

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

Dann tun Sie dies in Ihrer webpack-Datei in Ihrem entry-Punkt

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

Ich bekomme diesen Fehler beim Verwenden von 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 }));
});

Die Lösung bestand darin, babel-polyfill als Bower-Komponente hinzuzufügen:

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>

Wenn Sie eine App erstellen, benötigen Sie nur den @babel/preset-env Und @babel/polyfill:

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

(Hinweis: Sie müssen die Pakete core-js Und regenerator-runtime Nicht installieren, da 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 Datei .browserslistrc:

# Browsers that we support

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

Wenn Sie sich für useBuiltIns: "entry" Entschieden haben, setzen Sie import @babel/polyfill Oben in Ihre Eingabedatei. Ansonsten sind Sie fertig.

Mit dieser Methode werden diese Polyfills und die 'regenerator-runtime'-Datei selektiv importiert (Behebung Ihres regeneratorRuntime is not defined - Problems hier) NUR wenn sie benötigt werden von jedem Ihrer Zielumgebungen/Browser.

Ich hatte ein Setup
mit webpack mit presets: ['es2015', 'stage-0']
und mocha die von webpack erstellten Tests ausgeführt wurden.

Damit mein async/await in Tests funktioniert, musste ich lediglich die mocha --require babel-polyfill-Option hinzufügen.

Meine Arbeit Babel 7 Boilerplate zum Reagieren mit 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";

....

Die meisten dieser Antworten empfehlen Lösungen, um diesen Fehler mithilfe von WebPack zu beheben. Für den Fall, dass jemand RollUp verwendet (wie ich es bin), hat sich Folgendes für mich bewährt (nur ein Heads-Up und Bündeln dieser Polyfill-Anzeigen mit einer Größe von etwa 10.000 bis zur Ausgabegröße):

.babelrc

{
    "presets": [
        [
            "env",
            {
                "modules": false,
                "targets": {
                    "browsers": ["last 2 versions"]
                }
            }
        ]
    ],
    "plugins": ["external-helpers",
        [
            "transform-runtime",
            {
                "polyfill": false,
                "regenerator": true
            }
        ]]
}

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import uglify from 'rollup-plugin-uglify';
import commonjs from 'rollup-plugin-commonjs';


export default {
    input: 'src/entry.js',
    output: {
        file: 'dist/bundle.js',
        format: 'umd',
        name: 'MyCoolLib',
        exports: 'named'
    },
    sourcemap: true,
    plugins: [
        commonjs({
            // polyfill async/await
            'node_modules/babel-runtime/helpers/asyncToGenerator.js': ['default']
        }),
        resolve(),
        babel({
            runtimeHelpers: true,
            exclude: 'node_modules/**', // only transpile our source code
        }),
        uglify()

    ]
};

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 über alle anderen Skript-Tags und den Verweis auf babel-polyfill aus node_modules hinzu

ich hatte die Regeneratorlaufzeit nicht definiert. Fehler Wenn ich 'async' und 'await' in meiner Reakt-App verwendet habe 'async' und 'await' sind neue Schlüsselwörter in ES7 .... Sie sollten babel-preset-es2017 verwenden Installieren Sie diese devDependencies:

`

"babel-preset-es2017": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1", `

und benutze das 

"presets": [ "es2017" , "stage-0" , "react" ]

Diese Lösung ist veraltet.

Ich habe die Lösung in den YouTube-Kommentaren zu diesem Video gefunden https://www.youtube.com/watch?v=iWUR04B42Hc&lc=Ugyq8UJq-OyOzsKIIrB4AaABAg

Dies sollte auf den richtigen Kommentar verweisen. Viele Requisiten "Beth w" für die Suche nach der Lösung.

Beth W vor 3 Monaten (bearbeitet)
Eine weitere Änderung, die ich 2019 vornehmen musste - babel verwendet anscheinend nicht mehr das Stage-0-Preset ab v7, also installiere um 26:15 Uhr --save-dev babel-polyfill babel-preset- stage-0 'musste ich machen:

npm install --save @babel/polyfill

Was beide älteren Optionen abdeckt. Dann habe ich im Einstiegspunkt für die App '@ babel/polyfill' eingeschlossen und in den Abfragevorgaben belassen, wie sie sind. Die Webpack-Konfiguration sieht also so aus:

const path = require('path');
module.exports = {
    entry: {
        app: ['@babel/polyfill', './src/app.js']
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
    },
    mode: 'development',
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['@babel/preset-env']
            }
        }]
    }
}

Hoffe das hilft jemandem!

Ich bin auf dieses Problem gestoßen, als ich versucht habe, Mocha + Babel auszuführen. Ich hatte einen .babelrc, der in der Entwicklung funktioniert (siehe die anderen Antworten hier, sie sind ziemlich vollständig), aber mein npm run test-Befehl beschwerte sich immer noch über regeneratorRuntime is not defined. Also habe ich meinen package.json geändert:

"scripts": {
  "test": "mocha --require babel-polyfill --require babel-core/register tests/*.js"
}

Lesen Sie mehr: https://babeljs.io/en/setup/#mocha-4

Ich habe Async erwartet, um mit webpack/babel build zu arbeiten:

"devDependencies": {
    "babel-preset-stage-3": "^6.11.0"
}

.babelrc:

"presets": ["es2015", "stage-3"]

Ich verwende ein Projekt mit React und Django und habe es mit regenerator-runtime zum Laufen gebracht. Sie sollten dies tun, da @babel/polyfill die Größe Ihrer App weiter erhöht und auch veraltet ist. Ich folgte auch dieses Tutorials Episode 1 & 2, um Struktur meines Projekts zu erstellen.

*package.json*

...
"devDependencies": {
    "regenerator-runtime": "^0.13.3",
    ...
}

.babelrc

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

index.js

...
import regeneratorRuntime from "regenerator-runtime";
import "regenerator-runtime/runtime";
ReactDOM.render(<App />, document.getElementById('app'));
...

In einem Szenario, in dem eine benutzerdefinierte babelHelpers.js-Datei mit babel.buildExternalHelpers() mit babel-plugin-external-helpsers erstellt wird, stellte ich fest, dass die kostengünstigste Lösung für den Client darin besteht, den regenerator-runtime/runtime.js der Ausgabe anstelle aller Polyfills voranzustellen.

// runtime.js
npm install --save regenerator-runtime

// building the custom babelHelper.js
fs.writeFile(
    './babelHelpers.js',
    fs.readFileSync('node_modules/regenerator-runtime/runtime.js')
    + '\n'
    + require('babel-core').buildExternalHelpers()
)

Diese Lösung erreicht etwa 20 KB anstatt ~ 230 KB, wenn babel-polyfill verwendet wird.