Środowisko wykonawcze Babel 6 nie zostało zdefiniowane

634

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?

BrunoLM
źródło
Czy włączyłeś regenerator?
ssube,
3
babel-polyfill jest tym, czego potrzebujesz.
Ronnie Royston,
babel-polyfill został amortyzowany od 7,4; to zaktualizowane, więc post opisuje migrację.
JWCS
Dla tych, którzy używają nowszych wersji babel i węzła: stackoverflow.com/a/62254909/8169904
poniedziałek

Odpowiedzi:

682

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
BrunoLM
źródło
77
Ważne, gdy używasz Babel z WebPacka: zamiast używać require("babel-polyfill")który nie działa, należy dodać "babel-polyfill"do swojego entryw konfiguracji, na przykład: entry: ["babel-polyfill", "src/main.js"]. Działa to dla mnie, w tym zastosowanie w webpack-dev-server z HMR.
Cemen
6
Próbowałem uruchomić testy mokki z Babel6 i Async i musiałem dodać - wymagaj Babel-Polyfill do konfiguracji programu testowego npm
Arisalexis
13
Do czego służy rejestr babel?
trusktr
6
@ Lloyd, devDependencyjeśli używasz webpacka , ponieważ wtedy „skompiluje” pliki przed uruchomieniem. dependencyjeśli nie używasz webpacka i potrzebujesz babel.
BrunoLM,
4
To sprawia, że ​​rozmiar pliku wyjściowego jest ogromny ... Lepiej używać tylko tego, czego potrzebujesz, zamiast wymagać bezpośrednio babel-polyfill.
Inanc Gumus
340

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 .

Jasio
źródło
11
Nie musiałem babel-runtimeczekać, aż asynchronizacja zacznie działać. Czy to jest poprawne? Edycja: korzystam z serwera kodu. :)
GijsjanB
8
Jeśli byłeś w stanie używać go bez środowiska uruchomieniowego Babel, dzieje się tak, ponieważ jest on już w twoim drzewie zależności. Pamiętaj więc, że jeśli piszesz bibliotekę, a środowisko uruchomieniowe Babel pojawia się jako zależność programistów, może nie być dostępne dla użytkowników. Będziesz musiał uwzględnić to jako normalną zależność do dystrybucji.
neverfox
23
tylko babel-plugin-transform-runtimewymagane. Działa jak marzenie.
saike
9
To rozwiązanie nie jest w porządku, ponieważ wymaga dodatkowego zadania Browserify lub Webpack do rozszerzenia requirepołączeń dodawanych przez transform-runtimewtyczkę.
Finesse,
9
Pamiętaj, że w przypadku Babel 7 musisz uruchomićnpm install --save-dev @babel/plugin-transform-runtime
Andrey Semakin,
196

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"]
    ]
}
Matt Shirley
źródło
Jak możemy to zrobić bez pliku .babelrc (po prostu używając pliku konfiguracyjnego
webpack
2
Dokument pokazuje użycie jako "plugins": ["@babel/plugin-transform-runtime"], a nie "plugins": [ ["@babel/transform-runtime"] ]tutaj. Inna nazwa wtyczki. Obie prace. Ale który z nich jest właściwy? ..
kyw
5
Dostaję żądanie nie jest zdefiniowane podczas korzystania z tej metody
Batman
1
@kyw najlepiej postępować zgodnie z dokumentami - bez różnicy poza konwencją.
Matt Shirley
4
Dodanie @babel/transform-runtimedo wtyczek spowodowało błąd „eksport nie jest zdefiniowany”. Zmieniłem to na to, aby uzyskać asynchronię do pracy w Babel7:["@babel/plugin-transform-runtime", { "regenerator": true } ]
Hari
105

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.

Tyler Long
źródło
3
To naprawdę działa. Jedynym minusem jest ciągnięcie zależności, babel-preset-envale myślę, że warto. Uwielbiam też deklaratywny styl. Również yarn installjest terazyarn add
Roman Usherenko
1
@gargantuan Tak to robi.
Tyler Long
3
Niezupełnie rozwiązanie, jeśli chcesz kierować reklamy na starsze wersje przeglądarek lub węzłów.
Rohan Orton
2
Na wszelki wypadek nie jest to oczywiste .... to zalecane rozwiązanie NIE zadziała, jeśli potrzebujesz kodu do pracy w IE11
Maurice,
7
Dlaczego ma tyle głosów? Działa to tylko dlatego, że nie przekształca już asynchronizacji / oczekiwania i dlatego nie potrzebuje już regeneratoraRuntime, a ponieważ nie jest przekształcone, nie będzie działać w przeglądarkach, które go nie obsługują.
Shikyo,
47

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.

Antony Mativos
źródło
To wydaje się być najwygodniejszym rozwiązaniem. Jednak większość przeglądarek obsługuje generatory, więc to rozwiązanie prawdopodobnie nie jest optymalne. Zobacz: blogs.candoerz.com/question/213492/…
Kitanotori
Co zrobić, jeśli nie używasz pakietu internetowego?
Batman
38

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"
  ]
}
E. Fortes
źródło
1
W wtyczkach brakuje „transformacji asynchronicznej na generator”. Musiałem też to dodać, aby działało
GabrielBB
@GabrielBB Edytowałem post, więc jest to kompletny przykład.
webnoob
2
Jest loose: truepotrzebny?
Tom Söderlund,
Podczas korzystania z tego dodaje wymaganie do mojego pliku i żądanie jest niezdefiniowane w przeglądarce.
Batman
loose: true NIE jest potrzebne. To, czego naprawdę potrzebujesz w swoim .babelrc to: {„presets”: [„es2015”, „reag”, „stage-2”], „plugins”: [„transform-runtime”, „transform-async-to-generator "]}
Efe Ariaroo
29

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

ford04
źródło
2
To jest poprawna, najbardziej aktualna odpowiedź i pomogła mi z problemem w moim obecnym projekcie. Dziękuję Ci!
cdpautsch
2
{"presets": [["@ babel / preset-env", {"target": {"esmodules": true}}]]}} Pomogło mi to w tworzeniu wersji node.js
Smolin Pavel
3
Mam na myśli, że już to wiedziałem, ale aby pomóc innym, powinna to być poprawna odpowiedź. Z poważaniem!
Niewiadomski Paweł,
Uwaga: Myślę, że warto użyć wątku Babel 7 , aby lepiej odróżnić błędy związane z wersją. Bardziej szczegółową wersję tej odpowiedzi można znaleźć tutaj (ale powyższe stwierdzenia nadal są prawdziwe)
ford04
16

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
]
jony89
źródło
To powinna być zaakceptowana odpowiedź, babel-polyfill dodaje zbyt wiele innych rzeczy
Shikyo
Działa dla mnie idealnie ... Wielkie dzięki
Leandro William
1
Ta metoda zawsze obejmuje jednak środowisko wykonawcze. Uważam, że pokonuje cel @babel/preset-env„s useBuiltInsod dynamicznie wstawianie czasu pracy na podstawie swoich przeglądarek docelowych.
kyw
13

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"
        }
      }
    ]
  ]
}
Zero
źródło
2
proszę wyjaśnić swoją odpowiedź? co robi „węzeł”: „prąd”
Vishal Solanki
Chciałbym również wiedzieć, co to robi i czy jest to zalecane rozwiązanie - tj. nie zagraża to niczym i jest „odporne na przyszłość” (tyle, ile w danym momencie może być). targetswydaje się odnosić do tego : the environments you support/target for your project, podczas gdy targets.nodejest to : if you want to compile against the current node version, you can specify "node": true or "node": "current", which would be the same as "node": process.versions.node
user1063287
FWIW, użyłem drugiego bloku zdefiniowanego w odpowiedzi (i usuniętego "stage-0"w procesie) i błąd regeneratora zniknął.
user1063287,
1
@BunkerBoy Dla wygody możesz użyć parametru „node”: „current”, aby uwzględnić tylko niezbędne wypełnienia i transformacje dla wersji Node.js, której używasz do uruchamiania Babel
Zero
więc do tego nie muszę instalować wypełniaczy?
Vishal Solanki,
12

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.

Sprzymierzyć
źródło
5
a; kgjablrsdkjfjasnkljfbajklfdablkhjnfl; smutne, że traciłem zmysły, a ty mnie uratowałeś Kocham cię
John R Perry
11

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

Deke
źródło
Brak ustawienia wartości useBuiltInsdomyślnej spowoduje, że będzie to false. To nie będzie automatycznie importować żadnych wypełnień w zależności od docelowego środowiska, co nieco podważa cel "@babel/preset-env". Oto także powiązany komentarz jednego z twórców Babel.
bela53
10

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

Zubair Alam
źródło
9

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 .

Joshua Dyck
źródło
3
Lepiej użyć presetu envzamiast es2015. envzawiera es2015już.
Neurotransmitter
9

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.

Tom Söderlund
źródło
8

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 .

Galen Long
źródło
7

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"
Ayobami
źródło
7

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'],
};
Cat Perry
źródło
Zawsze mnie zadziwia to, że programiści są leniwi. Twórcy Babel postanowili wycofać funkcjonalność, mogą spodziewać się, że stanie się to problemem. Dlaczego nie poinformować ludzi o najbardziej prawdopodobnej intencji i co należy zrobić, aby to naprawić? Ale nie, pokażmy tylko wiadomość, która jest absurdalnie bezużyteczna dla początkujących.
Pavel Voronin
To nie działa imgur.com/a/2Ea8WDk
nieprawdopodobne
Działa świetnie dla mnie. Mój projekt bez reakcji .babelrcwygląda następująco: `` {"presets": ["@ babel / preset-env"], "plugins": ["@ babel / plugin-transform-runtime"]} ``
Anthony
6

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ź.

MD Ashik
źródło
1
Dlaczego miałby używać webpacka, jeśli jest to usługa zaplecza? Twoja odpowiedź sugeruje, że musi korzystać z pakietu internetowego?
Spock
1
@Spock, myślałem o tym. Stałem w obliczu tego samego problemu i rozwiązałem ten problem w prosty sposób. Myślę, że to pozytywna odpowiedź dla użytkownika pakietu WebP i zająca ma więcej właściwych odpowiedzi, dzięki czemu możesz śledzić każdą inną.
MD Ashik
Dlaczego uważasz, że musisz nacisnąć Głosuj !!!! Czy możesz powiedzieć powód, jeśli chcesz mi pomóc.
MD Ashik
6

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
      }]
    ]
  }
Qiulang
źródło
5

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

Petros Kyriakou
źródło
4

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/

Luisangonzalez
źródło
3

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ę.

jeziora
źródło
3

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>
csharpfolk
źródło
Dziękuję Ci. To zadziałało dla mnie. Nie wiedziałem, że muszę dodać tag skryptu, aby działał on po stronie klienta.
Raza
3

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')],
Adeel Imran
źródło
3

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

....
gazdagergo
źródło
2

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.

kyw
źródło
2

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"],
};
Zeref
źródło
2

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 .

nickbullock
źródło
2

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

Jackie Santana
źródło
1

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

Petros Kyriakou
źródło
Nie rozumiem, dlaczego głosowanie i komentowanie. Chciałem go w przeglądarce Firefox. Też wziąłem informacje bezpośrednio z samej strony babel. Komentarz nie pomógł mi rozwiązać problemu, gdy go wypróbowałem.
Petros Kyriakou,