Próbuję użyć asynchronizacji, czekam od zera na Babel 6, ale dostaję generator.Runtime nie jest zdefiniowany.

plik .babelrc

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

plik package.json

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

plik .js

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

Używanie go normalnie bez asynchronicznego / oczekującego działa dobrze. Jakieś pomysły, co robię źle?

babel-polyfill( nieaktualne od Babel 7.4) jest wymagane. Musisz go również zainstalować, aby async / oczekiwał na działanie.

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

pakiet.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 z async / await (przykładowy kod)

"use strict";

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

function bar() {
  return "bar";
}

W pliku startowym

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

Jeśli używasz webpacka , musisz umieścić go jako pierwszą wartość entrytablicy w pliku konfiguracyjnym webpack.config.jswebpacka (zwykle ), zgodnie z komentarzem @Cemen:

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

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

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

Jeśli chcesz uruchomić testy z Babel, użyj:

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

Oprócz polyfill używam środowiska uruchomieniowego babel-plugin-transform-transform . Wtyczka jest opisana jako:

Uzewnętrznij odniesienia do pomocników i wbudowanych funkcji, automatycznie wypełniając kod bez zanieczyszczania globali. Co to właściwie znaczy? Zasadniczo możesz korzystać z wbudowanych funkcji, takich jak Promise, Set, Symbol itp., A także korzystać ze wszystkich funkcji Babel, które wymagają płynnego wypełniania wieloskładnikowego, bez globalnego zanieczyszczenia, co czyni go wyjątkowo odpowiednim dla bibliotek.

Obejmuje także obsługę asynchronizacji / oczekiwania na działanie oraz innych wbudowanych wersji ES 6.

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

W .babelrcdodaj wtyczkę środowiska wykonawczego

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

Uwaga: Jeśli używasz Babel 7, nazwa pakietu została zmieniona na @ babel / plugin-transform-runtime .

Użytkownicy Babel 7

Miałem problem z obejściem tego, ponieważ większość informacji dotyczyła wcześniejszych wersji babel. W przypadku Babel 7 zainstaluj te dwie zależności:

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

I w .babelrc dodaj:

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

Aktualizacja

Działa, jeśli ustawisz cel na Chrome. Ale to może nie działać w przypadku innych celów, patrz: https://github.com/babel/babel-preset-env/issues/112

Ta odpowiedź NIE jest całkiem odpowiednia dla pierwotnego pytania. Zatrzymam to tutaj jako odniesieniebabel-preset-env .

Prostym rozwiązaniem jest dodanie import 'babel-polyfill' na początku kodu.

Jeśli używasz webpacka, możesz szybko dodać, babel-polyfilljak pokazano poniżej:

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

Myślę, że znalazłem najnowszą najlepszą praktykę.

Sprawdź ten projekt: https://github.com/babel/babel-preset-env

yarn add --dev babel-preset-env

Użyj następujących ustawień jako konfiguracji babel:

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

W takim razie Twoja aplikacja powinna być dostępna w dwóch ostatnich wersjach przeglądarki Chrome.

Możesz także ustawić Węzeł jako cele lub dostosować listę przeglądarek zgodnie z https://github.com/ai/browserslist

Powiedz mi co, nie mów jak.

naprawdę lubię babel-preset-env filozofia: powiedz mi, które środowisko chcesz wspierać, NIE mów mi, jak je wspierać. To piękno deklaratywnego programowania.

Przetestowałem async awaiti działają. Nie wiem, jak one działają i naprawdę nie chcę wiedzieć. Zamiast tego chcę spędzić czas na własnym kodzie i logice biznesowej. Dzięki babel-preset-envtemu uwalnia mnie od piekła konfiguracji Babel.

Alternatywnie, jeśli nie potrzebujesz wszystkich modułów babel-polyfill, możesz po prostu określić babel-regenerator-runtimew konfiguracji webpacka:

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

  // ...
};

Gdy używasz serwera webpack-dev-server z HMR, to znacznie zmniejszyło liczbę plików, które musi on skompilować na każdej kompilacji. Ten moduł jest instalowany jako część, babel-polyfillwięc jeśli masz już wszystko w porządku, w przeciwnym razie możesz zainstalować go osobno npm i -D babel-regenerator-runtime.

Moje proste rozwiązanie:

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 lub nowszy (core-js 2/3)

Począwszy od Babel 7.4.0 , @babel/polyfill jest przestarzała .

Zasadniczo istnieją dwa sposoby instalowania wypełniaczy / regeneratora: poprzez globalną przestrzeń nazw (Opcja 1) lub jako kucyk (Opcja 2, bez globalnego zanieczyszczenia).

Opcja 1: @babel/preset-env

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

automatycznie użyje regenerator-runtimei core-jszgodnie z twoim celem . Nie musisz importować niczego ręcznie. Nie zapomnij zainstalować zależności środowiska wykonawczego:

npm i --save regenerator-runtime core-js

Możesz też ustawić useBuiltIns: "entry"i zaimportować go ręcznie:

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

Opcja 2: @babel/transform-runtime bez @babel/runtime(brak zanieczyszczenia o zasięgu globalnym)

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

Zainstaluj to:

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

Jeśli używasz wieloskładników core-js, zainstaluj @babel/runtime-corejs2lub @babel/runtime-corejs3zamiast tego, zobacz tutaj .

Twoje zdrowie

babel-regenerator-runtimejest teraz przestarzałe , zamiast tego należy użyćregenerator-runtime .

Aby użyć generatora środowiska wykonawczego za pomocą webpackibabel v7:

zainstaluj regenerator-runtime:

npm i -D regenerator-runtime

A następnie dodaj w konfiguracji pakietu internetowego:

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

Zaktualizuj swój .babelrc plik zgodnie z następującymi przykładami, zadziała.

Jeśli korzystasz z @babel/preset-envpakietu

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

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

Uważaj na podnoszone funkcje

W tym samym pliku miałem zarówno „import wielopełniacza”, jak i „funkcję asynchroniczną”, jednak korzystałem ze składni funkcji, która unosi go powyżej wielokrotnego wypełnienia, co dawałoby mi ReferenceError: regeneratorRuntime is not definedbłąd.

Zmień ten kod

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

do tego

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

aby zapobiec jego podniesieniu powyżej importu wielopełniacza.

Od października 2019 r. Działało to dla mnie:

Dodaj to do ustawienia wstępnego.

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

Następnie zainstaluj środowisko uruchomieniowe regeneratora przy użyciu npm.

npm i regenerator-runtime

A potem w głównym pliku użyj: (ten import jest używany tylko raz)

import "regenerator-runtime/runtime";

Umożliwi to użycie async awaitsw pliku i usunięcieregenerator error

Jeśli używasz, babel-preset-stage-2wystarczy uruchomić skrypt --require babel-polyfill.

W moim przypadku ten błąd został zgłoszony przez Mochatesty.

Po naprawiono problem

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

Ten błąd zacząłem otrzymywać po przekonwertowaniu mojego projektu na projekt maszynopisu. Z tego, co rozumiem, problem wynika z asynchronizacji / oczekiwania na nie rozpoznanie.

Dla mnie błąd został naprawiony przez dodanie dwóch rzeczy do mojej konfiguracji:

1. Jak wspomniano powyżej wiele razy, musiałem dodać babel-polyfill do mojej tablicy wpisów:

   ...
   
   pozycja: [„babel-polyfill”, „./index.js”],
   
   ...

2. Musiałem zaktualizować plik .babelrc, aby umożliwić kompilację async / czekaj na generatory:

   {
     „presety”: [„es2015”],
     „plugins”: [„transform-async-to-generator”]
   }

DevDependencies:

Musiałem również zainstalować kilka rzeczy w moich devDependencies w moim pliku package.json. Mianowicie brakowało mi babel-plugin-transform-async-generator, babel-polyfill i 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"
 }

Pełny kod:

Mam kod z bardzo pomocnej i zwięzłej listy GitHub, którą można znaleźć tutaj .

Miałem ten problem w Chrome. Podobnie do odpowiedzi RienNeVaPlu͢s, to dla mnie rozwiązało:

npm install --save-dev regenerator-runtime

Następnie w moim kodzie:

import 'regenerator-runtime/runtime';

Chętnie unikamy dodatkowych 200 kB z babel-polyfill.

Wystąpił błąd, ponieważ asynchroniczne / oczekujące na użycie generatorów, które są funkcją ES2016, a nie ES2015. Jednym ze sposobów rozwiązania tego problemu jest zainstalowanie presetu babel dla ES2016 ( npm install --save babel-preset-es2016) i kompilacja do ES2016 zamiast ES2015:

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

Jak wspomniano w innych odpowiedziach, można również używać wypełniania wielorakiego (należy jednak upewnić się, że załadowano go wielokrotnie przed uruchomieniem innego kodu). Alternatywnie, jeśli nie chcesz uwzględniać wszystkich zależności wypełniania, możesz użyć środowiska uruchomieniowego babel-regenerator lub środowiska uruchomieniowego babel-plugin-transform-transform .

Naprawiłem ten błąd, instalując babel-polyfill

npm install babel-polyfill --save

następnie zaimportowałem go do punktu wejścia aplikacji

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

do testów załączyłem - wymagaj babel-polyfill w moim skrypcie testowym

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

Ten błąd występuje, gdy async/awaitfunkcje są używane bez odpowiednich wtyczek Babel. Od marca 2020 r. Następujące czynności powinny być wszystkim, co musisz zrobić. ( @babel/polyfilla wiele przyjętych rozwiązań zostało wycofanych w Babel. Przeczytaj więcej w dokumentach Babel. )

W wierszu polecenia wpisz:

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

W swoim babel.config.jspliku dodaj tę wtyczkę @babel/plugin-transform-runtime. Uwaga: poniższy przykład zawiera inne ustawienia wstępne i wtyczki, które mam dla małego projektu React / Node / Express, nad którym ostatnio pracowałem:

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

Nowa odpowiedź Dlaczego podążasz za moją odpowiedzią?

Odp .: Ponieważ dam ci odpowiedź w najnowszym projekcie aktualizacji wersji npm.

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"

Jeśli używasz tej wersji lub nowszej wersji UP Npm i wszystkich innych ... SO wystarczy zmienić:

webpack.config.js

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

Po zmianie webpack.config.jsplików Po prostu dodaj ten wiersz na początku kodu.

import "babel-polyfill";

Teraz sprawdź, czy wszystko jest w porządku. Odnośnik LINK

Również dziękuję @BrunoLM za jego miłą odpowiedź.

Przeglądarki docelowe, które muszę obsługiwać, już obsługują asynchronizację / czekają, ale podczas pisania testów mokki, bez odpowiedniego ustawienia, nadal pojawia się ten błąd.

Większość artykułów google są nieaktualne, w tym odpowiedź akceptowana i wysokiej głosowało odpowiedź tutaj, czyli nie trzeba polyfill, babel-regenerator-runtime, babel-plugin-transform-runtime. itp., jeśli docelowa przeglądarka (przeglądarki) obsługuje już asynchronizację / oczekiwanie (oczywiście, jeśli nie, potrzebujesz wypełnienia)

Nie chcę też używać webpack.

Odpowiedź Tylera Longa jest właściwie właściwa, ponieważ zasugerował babel-preset-env(ale najpierw ją pominąłem, gdy wspomniał na początku o polifillie). Nadal dostałem ReferenceError: regeneratorRuntime is not definedpierwszy, ale zdałem sobie sprawę, że to dlatego, że nie wyznaczyłem celu. Po ustawieniu celu dla węzła naprawiam błąd czasu regeneratora ：

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

Do użytkowników babel7 i ParcelJS> = 1.10.0 użytkowników

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

.babelrc

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

zaczerpnięte z https://github.com/parcel-bundler/parcel/issues/1762

1 - Zainstaluj metodę babel-plugin-transform-async-to-module, 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 - Dodaj do swojej polifillu js babel:

import 'babel-polyfill';

3 - Dodaj wtyczkę do swojego .babelrc:

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

Źródło: http://babeljs.io/docs/plugins/transform-async-to-module-method/

Miałem konfigurację
z użyciem webpackapresets: ['es2015', 'stage-0']
i mokki, która uruchamiała testy skompilowane przez webpack.

Aby moje async/awaittesty działały, wystarczyło dodać mocha --require babel-polyfillopcję.

Ten błąd pojawia się przy użyciu gulp z pakietem zbiorczym, gdy próbuję użyć generatorów 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 }));
});

Być może rozwiązanie miało zawierać babel-polyfilljako element altanki:

bower install babel-polyfill --save

i dodaj to jako zależność w index.html:

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

Dla osób, które chcą korzystać z babel-polyfillwersji 7 ^, zrób to z webpackver3 ^.

Npm zainstaluj moduł npm i -D @babel/polyfill

Następnie zrób to w swoim webpackplikuentry

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

Mój działający kocioł Babel 7 do reagowania na środowisko uruchomieniowe regeneratora:

.babelrc

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

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

....

Jeśli tworzysz aplikację, potrzebujesz tylko @babel/preset-envi @babel/polyfill:

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

(Uwaga: nie musisz instalować pakietów core-jsi regenerator-runtime, ponieważ oba zostaną zainstalowane przez @ babel / polyfill)

Następnie w .babelrc:

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

Teraz ustaw środowiska docelowe. Tutaj robimy to w .browserslistrcpliku:

# Browsers that we support

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

Wreszcie, jeśli poszedłeś z useBuiltIns: "entry", włóżimport @babel/polyfill na górze pliku wejściowego. W przeciwnym razie skończysz.

Użycie tej metody spowoduje selektywne zaimportowanie tych wielopełniaczy i pliku „środowiska uruchomieniowego regeneratora” (tutaj naprawiając regeneratorRuntime is not definedproblem) WYŁĄCZNIE, jeśli są one potrzebne przez dowolne z docelowych środowisk / przeglądarek.

do wykorzystania w przyszłości :

Począwszy od wersji Babel 7.0.0-beta.55 ustawienia wstępne etapów zostały usunięte

Poleć blog https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

async Oczekiwanie może być nadal używany przez

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

instalacja

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

użycie w .babelrc

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

i korzystanie z babel polyfill https://babeljs.io/docs/en/babel-polyfill

instalacja

npm install --save @babel/polyfill

webpack.config.js

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

W 2019 Babel 7.4.0+r. babel-polyfillPakiet został wycofany na korzyść bezpośredniego włączenia core-js/stable( core-js@3+do funkcji ECMAScript dla polyfill) i regenerator-runtime/runtime(potrzebne do korzystania z funkcji generatora transpilowanego):

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

Informacje z babel-polyfill dokumentacji .

Najłatwiejszy sposób, aby rozwiązać ten problem dotyczący „regeneratora środowiska uruchomieniowego” w konsoli:

Nie musisz instalować żadnych niepotrzebnych wtyczek. Poprostu dodaj:

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

wewnątrz ciała w pliku index.html. Teraz regeneratorRuntime powinien zostać zdefiniowany po uruchomieniu babel, a teraz funkcje asynchroniczne / oczekujące powinny zostać pomyślnie skompilowane do ES2015

Jeśli używasz Gulp + Babel jako nakładki, musisz użyć babel-polyfill

npm install babel-polyfill

a następnie dodaj tag script do index.html ponad wszystkimi innymi tagami script i odwołaj się do babel-polyfill z node_modules