Я намагаюся використовувати async, чекаю з нуля на Babel 6, але я отримую regeneratorRuntime не визначено.

.babelrc файл

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

файл package.json

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

.js файл

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

Його нормальне використання без асинхронізації / очікування працює чудово. Будь-які ідеї, що я роблю неправильно?

babel-polyfill( застаріло на Вавілон 7.4). Ви також повинні встановити його, щоб асинхронність / очікування працювала.

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 з асинхронією / wait (зразок коду)

"use strict";

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

function bar() {
  return "bar";
}

У файлі запуску

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

Якщо ви використовуєте webpack, вам потрібно ввести його як перше значення entryмасиву у файлі конфігурації webpack.config.jsвеб-пакету (як правило ), відповідно до коментаря @Cemen:

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

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

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

Якщо ви хочете запустити тести з бабером, тоді використовуйте:

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

Окрім polyfill, я використовую babel-plugin-transform-runtime . Плагін описаний як:

Екстерналізація посилань на помічників та вбудованих програм, автоматично поліфілюючи ваш код, не забруднюючи глобальні дані. Що це насправді означає? В основному, ви можете використовувати вбудовані модулі, такі як Promise, Set, Symbol тощо, а також використовувати всі функції Babel, які потребують поліфілінгу плавно, без глобального забруднення, що робить його надзвичайно придатним для бібліотек.

Вона також включає підтримку асинхронізації / очікування разом з іншими вбудованими системами ES 6.

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

У .babelrcдодайте плагін виконання

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

Примітка Якщо ви використовуєте babel 7, пакет було перейменовано на @ babel / plugin-transform-runtime .

Користувачі Babel 7

У мене виникли проблеми з тим, як обійти це питання, оскільки більшість інформації стосується попередніх версій для дівоцтва. Для Babel 7 встановіть ці дві залежності:

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

І, в .babelrc, додайте:

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

Оновлення

Він працює, якщо встановити ціль на Chrome. Але це може не працювати для інших цілей, зверніться до: https://github.com/babel/babel-preset-env/isissue/112

Тож ця відповідь НЕ цілком слушна для початкового запитання. Я збережу це тут як посилання на babel-preset-env.

Просте рішення - додати import 'babel-polyfill'на початку коду.

Якщо ви використовуєте веб-пакет, швидким рішенням є додавання, babel-polyfillяк показано нижче:

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

Я вважаю, що я знайшов останню найкращу практику.

Перевірте цей проект: https://github.com/babel/babel-preset-env

yarn add --dev babel-preset-env

Використовуйте наступне як конфігурацію вавило:

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

Тоді ваш додаток має бути готовим перейти в останні 2 версії браузера Chrome.

Ви також можете встановити Node як цільову або відрегулювати список браузерів відповідно до https://github.com/ai/browserslist

Скажи мені що, не кажи мені, як.

Мені дуже подобається babel-preset-envфілософія: скажіть, яке середовище ви хочете підтримати, НЕ кажіть мені, як їх підтримувати. Це краса декларативного програмування.

Я перевірив, async awaitі вони НЕ працюють. Я не знаю, як вони працюють, і я насправді не хочу знати. Я хочу витратити свій час на власний код та свою бізнес-логіку. Завдяки цьому babel-preset-envвін звільняє мене від пекла Вавілонської конфігурації.

Крім того, якщо вам не потрібні всі передбачені модулі babel-polyfill, ви можете просто вказати babel-regenerator-runtimeу своєму конфігурації веб-пакету:

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

  // ...
};

Використовуючи webpack-dev-сервер з HMR, це зменшило кількість файлів, які він повинен зібрати на кожній збірці, досить багато. Цей модуль встановлений як частина, babel-polyfillтому якщо у вас вже є те, що ви добре, інакше ви можете встановити його окремо npm i -D babel-regenerator-runtime.

Моє просте рішення:

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

Вавілон 7.4.0 або новішої версії (core-js 2/3)

За Вавилонської 7.4.0 , @babel/polyfill є застарілим .

Загалом, існує два способи встановлення поліфілів / регенераторів: через глобальний простір імен (варіант 1) або як поніфіл (варіант 2, без глобального забруднення).

Варіант 1: @babel/preset-env

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

автоматично використовуватиме regenerator-runtimeі core-jsвідповідно до вашої цілі . Не потрібно нічого імпортувати вручну. Не забудьте встановити залежності часу виконання:

npm i --save regenerator-runtime core-js

Крім того, встановіть useBuiltIns: "entry"та імпортуйте його вручну:

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

Варіант 2: @babel/transform-runtime з @babel/runtime(без загального забруднення в масштабі)

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

Встановіть його:

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

Якщо ви використовуєте core-js polyfills, ви встановлюєте @babel/runtime-corejs2або @babel/runtime-corejs3замість цього дивіться тут .

Ура

babel-regenerator-runtimeтепер застаріло , замість цього потрібно використовувати regenerator-runtime.

Щоб використовувати генератор виконання з webpackі babelv7:

встановити regenerator-runtime:

npm i -D regenerator-runtime

А потім додайте в конфігурацію веб-пакета:

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

Оновіть свій .babelrcфайл відповідно до наведених нижче прикладів, він спрацює.

Якщо ви використовуєте @babel/preset-envпакет

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

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

Будьте уважні до піднімаються функцій

У моєму файлі було і «імпорт поліфаули», і моя «функція асинхронізації», проте я використовував синтаксис функції, який піднімає його над полізасипкою, що дасть мені ReferenceError: regeneratorRuntime is not definedпомилку.

Змініть цей код

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

до цього

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

щоб запобігти його підняття над імпортом полісистеми.

Станом на жовтень 2019 року це працювало для мене:

Додайте це до попереднього налаштування.

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

Потім встановіть регенератор під час виконання, використовуючи npm.

npm i regenerator-runtime

А потім у головному використанні файлу: (цей імпорт використовується лише один раз)

import "regenerator-runtime/runtime";

Це дозволить вам використовувати async awaitsу своєму файлі та видалитиregenerator error

Якщо ви користуєтеся, babel-preset-stage-2тоді просто доведеться починати сценарій --require babel-polyfill.

У моєму випадку ця помилка була кинута Mochaтестами.

Після виправленого питання

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

Я почав отримувати цю помилку після перетворення свого проекту в проект машинопису. З того, що я розумію, проблема випливає з асинхронізації / очікування не визнання.

Для мене помилку було виправлено, додавши до моєї настройки дві речі:

1. Як уже згадувалося вище, мені потрібно було додати babel-polyfill у свій масив введення веб-упаковки:

   ...
   
   запис: ['babel-polyfill', './index.js'],
   
   ...

2. Мені потрібно було оновити.

   {
     "пресети": ["es2015"],
     "плагіни": ["перетворення-асинхрон-генератор"]
   }

DevDependitions:

Мені довелося також встановити кілька речей у свою програму devDependitions у мій файл package.json. А саме мені не вистачало генератора babel-plugin-transform-async-to-generator, babel-polyfill та 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"
 }

Повний код:

Я отримав код із дуже корисної та стислої програми GitHub, яку ви можете знайти тут .

У мене була ця проблема в Chrome. Подібно до відповіді RienNeVaPlu͢s, це вирішило це для мене:

npm install --save-dev regenerator-runtime

Потім у моєму коді:

import 'regenerator-runtime/runtime';

Рада уникнути зайвих 200 кБ від babel-polyfill.

Ви отримуєте помилку, оскільки асинхронні / очікують використання генераторів, які є функцією ES2016, а не ES2015. Один із способів виправити це - встановити попередньо встановлений пристрій для ES2016 ( npm install --save babel-preset-es2016) та компілювати на ES2016 замість ES2015:

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

Як згадуються в інших відповідях, ви також можете використовувати polyfills (хоча переконайтеся, що ви завантажуєте його спочатку, перш ніж запускається будь-який інший код). Крім того, якщо ви не хочете включати всі залежності від поліфазу, ви можете використовувати babel-регенератор-час виконання або babel-плагін-перетворення-час виконання .

Я виправив цю помилку, встановивши babel-polyfill

npm install babel-polyfill --save

потім я імпортував його в точку входу в додаток

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

для тестування я включив - вимагаю babel-polyfill у свій тестовий сценарій

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

Ця помилка викликана, коли async/awaitфункції використовуються без належних плагінів Babel. Станом на березень 2020 року все, що вам потрібно зробити, має бути наступним. ( @babel/polyfillі багато прийнятих рішень були присуджені в Вавілоні. Докладніше читайте в документах Вавилона. )

У командному рядку введіть:

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

У свій babel.config.jsфайл додайте цей плагін @babel/plugin-transform-runtime. Примітка. Наведений нижче приклад включає інші пресети та плагіни, які я маю для невеликого проекту React / Node / Express, над яким я нещодавно працював:

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

Нова відповідь Чому ви слідуєте моїй відповіді?

Відповідь: Оскільки я збираюся дати вам відповідь з останньою версією оновленої версії 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"

Якщо ви використовуєте цю версію або більше UP версії Npm та всі інші ... Так просто потрібно змінити:

webpack.config.js

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

Після зміни webpack.config.jsфайлів Просто додайте цей рядок до верхнього коду.

import "babel-polyfill";

Тепер перевірте, що все в порядку. Довідкова посилання

Також дякую @BrunoLM за його приємну відповідь.

Мене потрібні цільові браузери, які вже підтримують асинхронізацію / очікування, але при написанні мок-тестів, без належної настройки, я все-таки отримав цю помилку.

Більшість статей я гугл застаріли, в той числі прийнятого відповідь і високий голосували відповіді тут, тобто вам не потрібен polyfill, babel-regenerator-runtime, babel-plugin-transform-runtime. і т. д., якщо ваш цільовий браузер вже підтримує асинхронізацію / очікування (звичайно, якщо вам не потрібна полізаповнення)

Я також не хочу використовувати webpack.

Відповідь Тайлера Лонга насправді на вірному шляху, оскільки він запропонував babel-preset-env(але я її опустив першим, коли він згадав про поліфіл на початку). Я все ще отримав ReferenceError: regeneratorRuntime is not definedперший, тоді я зрозумів, що це тому, що я не поставив мету. Після встановлення цілі для вузла я виправляю помилку 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
      }]
    ]
  }

Для користувачів babel7 та ParcelJS> = 1.10.0 користувачів

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

.babelrc

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

взяті з https://github.com/parcel-bundler/parcel/isissue/1762

1 - Встановіть метод 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 - Додайте у свою js babel polyfill:

import 'babel-polyfill';

3 - Додайте плагін у свій .babelrc:

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

Джерело: http://babeljs.io/docs/plugins/transform-async-to-module-method/

У мене було налаштування
з використанням веб- пакетуpresets: ['es2015', 'stage-0']
та mocha, які виконували тести, складені webpack.

Щоб я async/awaitпрацював на тестах, все, що мені потрібно було зробити - це додати mocha --require babel-polyfillваріант.

Я отримую цю помилку при використанні gulp з накопиченням, коли я намагався використовувати генератори 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 }));
});

Я можу випадок, що рішенням було б включити babel-polyfillяк компонент bower:

bower install babel-polyfill --save

і додайте його як залежність у index.html:

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

Для людей, які бажають використовувати babel-polyfillверсію 7 ^, зробіть це з webpackver3 ^.

Npm встановити модуль npm i -D @babel/polyfill

Потім у вашому webpackфайлі у вашій entryточці зробіть це

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

Мій робочий котел Babel 7 для реагування на час регенерації:

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

....

Якщо ви створюєте додаток, вам просто потрібно @babel/preset-envі @babel/polyfill:

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

(Примітка. Вам не потрібно встановлювати пакети core-jsта regenerator-runtimeпакунки, оскільки вони обидва будуть встановлені програмою @ babel / polyfill)

Потім у .babelrc:

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

Тепер встановіть цільове середовище. Ось ми це робимо у .browserslistrcфайлі:

# Browsers that we support

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

Нарешті, якщо ви пішли useBuiltIns: "entry", покладіть import @babel/polyfillу верхній частині вхідного файлу. Інакше ви закінчили.

Використовуючи цей метод, виборче імпортуйте ці поліфіли та файл "регенератор-час виконання" (виправляючи свою regeneratorRuntime is not definedпроблему тут) ТІЛЬКИ, якщо вони потрібні будь-якому з ваших цільових середовищ / браузерів.

для подальшої довідки :

Станом на версію Babel версії 7.0.0-beta.55 попередньо встановлено етапи

зверніться до блогу https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

Асинхронізацію очікування ще можна використовувати

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

установка

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

використання в .babelrc

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

а також за допомогою бабелівської полісистеми https://babeljs.io/docs/en/babel-polyfill

установка

npm install --save @babel/polyfill

webpack.config.js

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

У 2019 Babel 7.4.0+році babel-polyfillпакет упаковано на користь прямого включення core-js/stable( core-js@3+для поліфіксації функцій ECMAScript) та regenerator-runtime/runtime(необхідного для використання функцій генератора транслірованого):

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

Інформація з babel-polyfill документації .

Найпростіший спосіб виправити цю проблему "regeneratorRuntime not определен" у вашій консолі:

Вам не потрібно встановлювати зайві плагіни. Просто додайте:

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

всередині тіла у вашому index.html. Тепер regeneratorRuntime слід визначити, як тільки ви запустите babel, і тепер ваші функції асинхрон / очікування повинні бути успішно зібрані в ES2015

Якщо ви використовуєте Gulp + Babel для переднього фронту, вам потрібно використовувати babel-polyfill

npm install babel-polyfill

а потім додайте тег скрипта до index.html вище за всі інші теги сценарію та посилання babel-polyfill від node_modules