Babel 6 регенератор Runtime не определен

Question

Babel 6 регенератор Runtime не определен

Я пытаюсь использовать async, жду с нуля на Babel 6, но я получаю регенератор. Время не определено.

файл.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;

Использование его обычно без async/await работает просто отлично. Есть идеи, что я делаю не так?

827

javascript node.js babeljs

Источник

user340760 04 ноя '15 в 16:58

48 ответов

Решение

Помимо polyfill, я использую http://babeljs.io/docs/plugins/transform-runtime/. Плагин описывается как:

Выводите ссылки на помощники и встроенные функции, автоматически заполняя ваш код, не загрязняя глобальные переменные. Что это на самом деле означает, хотя? По сути, вы можете использовать встроенные модули, такие как Promise, Set, Symbol и т. Д., А также использовать все функции Babel, которые требуют бесшовного заполнения, без глобального загрязнения, что делает его чрезвычайно подходящим для библиотек.

Он также включает поддержку async/await и других встроенных функций ES 6.

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

В .babelrcдобавить плагин времени выполнения

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

439

Источник

user541462 24 апр '16 в 10:34

Babel 7 пользователей

У меня были некоторые проблемы с этим, так как большая часть информации была для предыдущих версий Babel. Для Babel 7 установите эти две зависимости:

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

И в.babelrc добавьте:

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

337

Источник

user4068558 12 дек '18 в 04:27

Обновить

Это работает, если вы установите цель в Chrome. Но это может не работать для других целей, пожалуйста, обратитесь к: https://github.com/babel/babel-preset-env/issues/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

Используйте следующую конфигурацию вашего babel:

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

Тогда ваше приложение должно хорошо работать в последних 2 версиях браузера Chrome.

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

Скажи мне что, не говори мне как.

мне действительно нравится babel-preset-envФилософия: скажи мне, какую среду ты хочешь поддерживать, НЕ говори мне, как их поддерживать. Это красота декларативного программирования.

Я проверял asyncawait и они работают. Я не знаю, как они работают, и я действительно не хочу знать. Вместо этого я хочу тратить свое время на собственный код и свою бизнес-логику. Благодаря babel-preset-env, это освобождает меня от ада Вавилонской конфигурации.

122

Источник

user862862 26 дек '16 в 12:27

Обновление: сообщение Babel 7 также содержит более подробный ответ.

Babel 7.4.0 или новее (core-js 2 / 3)

Начиная с Babel 7.4.0,@babel/polyfill является устаревшим.

В общем, есть два способа установить полифилы / регенератор: через глобальное пространство имен (Вариант 1) или как ponyfill (Вариант 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

Если corejs используется polyfill, вы заменяете @babel/runtime с @babel/runtime-corejs2 (за "corejs": 2) или @babel/runtime-corejs3 (за "corejs": 3).

92

Источник

user5669456 25 июн '19 в 15:35

Кроме того, если вам не нужны все модули babel-polyfill обеспечивает, вы можете просто указать babel-regenerator-runtime в вашей конфигурации веб-пакета:

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

  // ...
};

При использовании webpack-dev-server с HMR это значительно уменьшило количество файлов, которые приходится компилировать в каждой сборке. Этот модуль установлен как часть babel-polyfill так что если у вас уже есть все в порядке, в противном случае вы можете установить его отдельно с npm i -D babel-regenerator-runtime,

57

Источник

user2540509 13 апр '16 в 07:01

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

В командной строке введите:

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'],
};

43

Источник

user7960375 14 апр '20 в 18:08

Мое простое решение:

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

42

Источник

user2186353 19 июн '17 в 15:09

babel-regenerator-runtime теперь устарела, вместо этого следует использовать regenerator-runtime,

Использовать генератор времени выполнения с webpack а также babel v7:

устанавливать regenerator-runtime:

npm i -D regenerator-runtime

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

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

24

Источник

user3103399 03 янв '18 в 13:53

Обновите свой .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"
        }
      }
    ]
  ]
}

20

Источник

user4648457 26 окт '18 в 14:15

По состоянию на октябрь 2019 года это сработало для меня:

Добавьте это в предустановку.

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

Затем установите регенераторную среду выполнения с помощью npm.

npm i regenerator-runtime

И затем в вашем основном файле используйте: (этот импорт используется только один раз)

import "regenerator-runtime/runtime";

Это позволит вам использовать async awaits в вашем файле и удалите regenerator error

15

Источник

user4408845 15 окт '19 в 00:24

Будьте осторожны с подъемными функциями

У меня был и мой "импорт многозаполнения", и моя "асинхронная функция" в одном и том же файле, однако я использовал синтаксис функции, который поднимает ее над полифиллом, что дает мне ReferenceError: regeneratorRuntime is not defined ошибка.

Изменить этот код

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

к этому

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

чтобы он не поднимался над импортом полифилл.

14

Источник

user837649 23 апр '18 в 04:33

Я использовал подсказку с https://github.com/babel/babel/issues/9849#issuecomment-592668815 и добавил targets: { esmodules: true,} к моему babel.config.js.

      module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          esmodules: true,
        },
      },
    ],
  ],
}

13

Источник

user449347 18 сен '21 в 00:10

У меня была эта проблема в Chrome. Как и в ответе RienNeVaPlu, это решило это для меня:

npm install --save-dev regenerator-runtime

Тогда в моем коде:

import 'regenerator-runtime/runtime';

Рад избежать лишних 200 кБ от babel-polyfill,

13

Источник

user449227 02 авг '18 в 09:27

При использовании babel-preset-stage-2 тогда просто нужно запустить скрипт с --require babel-polyfill,

В моем случае эта ошибка была сброшена Mocha тесты.

После исправлена проблема

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

12

Источник

user1520197 19 авг '16 в 09:48

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

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

Как упоминалось в других ответах, вы также можете использовать полифилы (хотя убедитесь, что вы загружаете полифилл сначала, прежде чем будет запущен любой другой код). В качестве альтернативы, если вы не хотите включать все зависимости polyfill, вы можете использовать babel-Регенератор-время выполнения или babel-plugin-transform-runtime.

10

Источник

user6157047 27 фев '17 в 20:54

Я начал получать эту ошибку после преобразования моего проекта в проект машинописного текста. Из того, что я понимаю, проблема заключается в том, что async/await не распознается.

Для меня ошибка была исправлена добавлением двух вещей в мою настройку:

Как уже упоминалось выше, мне нужно было добавить babel-polyfill в мой массив записей webpack:
```
...

запись: ['babel-polyfill', './index.js'],
... 
```
Мне нужно было обновить мой.babelrc, чтобы разрешить компиляцию async/await в генераторы:
```
 {
  "пресеты": ["es2015"],
  "plugins": ["transform-async-to-generator"]
} 
```

DevDependencies:

Мне пришлось установить несколько вещей в мои devDependencies в моем файле 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"
 }

Полный код Gist:

Я получил код от действительно полезной и лаконичной GitHub-гистики, которую вы можете найти здесь.

10

Источник

user2684661 31 янв '18 в 05:21

Я исправил эту ошибку, установив 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';

для тестирования я включил --require babel-polyfill в свой тестовый скрипт

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

9

Источник

user6763202 12 дек '17 в 13:41

Там так много ответов, что я отправлю свой ответ для справки. Я использую webpack и реагирую, вот мое решение без файла.babelrc

Я работаю над этим в августе 2020 года

Установите React и Babel

npm i @babel/core babel-loader @babel/preset-env @babel/preset-react react react-dom @babel/plugin-transform-runtime --save-dev

Затем в моем webpack.config.js

// other stuff
module.exports = {
// other stuff

   module: {
   rules: [
  
   {
    test: /\.m?js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env',"@babel/preset-react"],
        plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime'],
        //npm install --save-dev @babel/plugin-transform-runtime
          }
        }
      },
    ],
  },

};

Я просто не знаю, почему мне пока не нужно устанавливать пакет async

8

Источник

user12779682 25 авг '20 в 09:19

Новый ответ Почему вы следуете моему ответу?

Ответ: Потому что я собираюсь дать вам ответ с последней версией Обновления проекта npm.

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"

Если вы используете эту версию или более UP версию Npm и все другие... ТАК просто нужно изменить:

webpack.config.js

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

После изменения webpack.config.js файлы Просто добавьте эту строку в начало вашего кода.

import "babel-polyfill";

Теперь проверьте, все ли в порядке. Ссылка ССЫЛКА

Также спасибо @BrunoLM за его хороший ответ.

7

Источник

user5404861 14 апр '17 в 05:50

Самый простой способ исправить эту "проблему с регенератором Runtime не определена" в консоли:

Вам не нужно устанавливать ненужные плагины. Просто добавь:

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

внутри тела в вашем index.html. Теперь после запуска babel необходимо определить регенераторВремя выполнения, и теперь ваши функции async/await должны быть успешно скомпилированы в ES2015.

6

Источник

user11827033 24 мар '20 в 02:36

Целевые браузеры, которые мне нужно поддерживать, уже поддерживают async / await, но при написании тестов mocha без правильной настройки я все еще получал эту ошибку.

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

Я не хочу использовать webpack или.

Ответ Тайлера Лонга на правильном пути, так как он предложил babel-preset-env (но я опустил это сначала, так как он упомянул полифилл в начале). Я все еще получил ReferenceError: regeneratorRuntime is not defined сначала я понял, что это потому, что я не поставил цель. После установки цели для узла я исправляю ошибку регенератора:

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

6

Источник

user301513 31 июл '18 в 05:20

Мой рабочий шаблон 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";

....

6

Источник

user5506730 21 июн '19 в 16:55

Просто установите регенератор-среду выполнения с помощью команды ниже

npm i regenerator-runtime

добавьте строку ниже в файл запуска, прежде чем вам потребуется файл сервера

require("regenerator-runtime/runtime");

Пока это работает для меня

6

Источник

user11713054 10 ноя '20 в 16:52

Для людей, которые хотят использовать babel-polyfill версия 7^ сделать это с webpack ver3 ^.

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

Тогда в вашем webpack файл в вашем entry Дык сделать это

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

5

Источник

user4921319 17 янв '18 в 11:14

Я получаю эту ошибку, используя gulp with rollup, когда я пытался использовать генераторы 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 install babel-polyfill --save

и добавьте его в качестве зависимости в index.html:

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

5

Источник

user1779504 20 ноя '16 в 10:13

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/

5

Источник

user4952039 07 янв '17 в 12:10

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

Чтобы сделать мой async/await в тестовой работе все, что мне нужно было сделать, это добавить mocha --require babel-polyfill вариант.

5

Источник

user3192470 07 сен '16 в 20:40

Для пользователей 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/issues/1762

5

Источник

user4315866 19 окт '18 в 21:35

Если вы используете следующий js, добавьте import regeneratorRuntime from "regenerator-runtime"; к файлу, который вызывает ошибку, для меня файл был _document.js.

и добавить

      [
  "@babel/plugin-transform-regenerator",
  {
    "asyncGenerators": false,
    "generators": false,
    "async": false
  }
]

в plugins, внутри .babelrc файл.

4

Источник

user11406645 08 июл '21 в 18:09

Другие вопросы по тегам javascript node.js babeljs

user340760 04 ноя '15 в 17:10 2015-11-04 17:10 · Accepted Answer · 2015-11-04 17:10

babel-polyfill необходимо. Вы также должны установить его, чтобы заставить работать async/await.

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 с async/await (пример кода)

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

Если вы используете веб-пакет, вы должны поместить его в качестве первой записи в соответствии с комментарием @Cemen:

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

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

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

Если вы хотите запустить тесты с babel, используйте:

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

Babel 6 регенератор Runtime не определен

48 ответов

Обновить

Я полагаю, что нашел последнюю лучшую практику.

Скажи мне что, не говори мне как.

Babel 7.4.0 или новее (core-js 2 / 3)

Опция 1: @babel/preset-env

Вариант 2: @babel/transform-runtime с @babel/runtime

Будьте осторожны с подъемными функциями

Изменить этот код

к этому

DevDependencies:

Полный код Gist:

Опция 1: `@babel/preset-env`

Вариант 2: `@babel/transform-runtime` с `@babel/runtime`