Я'пытаюсь использовать async, await с нуля на Babel 6, но я'получаю regeneratorRuntime is not defined.
Файл .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 все работает нормально. Есть идеи, что я делаю не так?
Требуется 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");
Если вы используете webpack, вам нужно поместить его в качестве первого значения массива entry
в конфигурационном файле webpack (обычно webpack.config.js
), как указано в комментарии @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-plugin-transform-runtime. Плагин описывается как:
Внешние ссылки на помощники и встроенные модули, автоматически полифиллируя ваш код без загрязнения глобальных файлов. Но что это означает на самом деле? В принципе, вы можете использовать встроенные модули, такие как Promise, Set, Symbol и т.д., а также использовать все функции Babel, которые требуют полифилла, без глобального загрязнения, что делает его чрезвычайно подходящим для библиотек.
Он также включает поддержку async/await наряду с другими встроенными элементами ES 6.
$ npm install --save-dev babel-plugin-transform-runtime
В .babelrc
добавьте плагин времени выполнения
{
"plugins": [
["transform-runtime", {
"regenerator": true
}]
]
}
Примечание Если вы'используете babel 7, пакет был переименован в @babel/plugin-transform-runtime.
Бабель 7 Пользователей
У меня были некоторые проблемы с получением вокруг, так как большинство информации было до Вавилонской версии. Для Бабеля 7, установить эти две зависимости:
npm install --save @babel/runtime
npm install --save-dev @babel/plugin-transform-runtime
И, в .babelrc, добавить:
{
"presets": ["@babel/preset-env"],
"plugins": [
["@babel/transform-runtime"]
]
}
Обновление #
Это работает, если вы поставили цель к хром. Но это может не работать для других целей, пожалуйста, обратитесь к: https://github.com/babel/babel-preset-env/issues/112
Так это ответ **** не совсем корректно, на исходный вопрос. Я буду держать его здесь в качестве ссылки, чтобы Вавилон-предустановки-ОКР
.
Простое решение-добавить `импорт 'Бабель-полифилл' в начале кода.
Если вы используете webpack, быстрое решение это добавить Вавилон-полифилл
, как показано ниже:
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.
Вы также можете установить узел в качестве цели или корректировать список браузеров по данным https://github.com/ai/browserslist
Мне очень нравится Вавилон-предустановки-ОКР
'философии: скажи мне, в какой среде вы хотите, чтобы поддержать, не подскажите, как поддержать их. Это'с красотой декларативного программирования.
Я'вэ протестирован асинхронный
ждут
и они действительно работают. Я не'т знаем, как они работают, и я действительно не'т хотите знать. Я хочу потратить свое время на мой собственный код и мой бизнес-логике, а не. Благодаря `Вавилон-предустановки-ОКР, это освобождает меня от конфигурации Бабель ад.
В качестве альтернативы, если вам не нужны все модули, которые предоставляет babel-polyfill
, вы можете просто указать babel-regenerator-runtime
в конфигурации webpack:
module.exports = {
entry: ['babel-regenerator-runtime', './test.js'],
// ...
};
При использовании webpack-dev-server с 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"
]
}
Вавилон-регенератор-время сейчас [устаревший][1], вместо этого необходимо использовать регенератор-среда
.
Чтобы использовать генератор во время выполнения с webpack
и Вавилон
В7:
установить регенератор-во время выполнения`:
npm i -D regenerator-runtime
А затем добавить в webpack конфигурации :
entry: [
'regenerator-runtime/runtime',
YOUR_APP_ENTRY
]
По состоянию на Бабель 7.4.0, @Бабеля/полифилл
это устаревший.
В общем, существует два способа установки полифиллы/регенератор: через глобальное пространство имен (Вариант 1) или как ponyfill (Вариант 2, без глобального загрязнения).
Вариант 1: @Бабеля/предустановка-ОКР
пресеты: [ [с"@Бабеля/предварительно установленная ЕНВ-то", { useBuiltIns: на "использование и" corejs: 3, // или 2, цели: { в Firefox: фильм "64" и, // или как там выбирать мишени . }, }] ]
автоматически использовать регенератор-исполнение " и " ядро-Яш` согласно вашему цель. Не нужно ничего импортировать вручную. Дон'т забудьте установить зависимости времени выполнения:
НПМ я ... сохранить регенератор-время выполнения ядра-Яш
Кроме того, сеть useBuiltIns: "по записи"` В и импортировать вручную:
импорт "и регенератор-время выполнения/время выполнения и"; импорт "в основной-Яш/стабильный", У; // если полифиллы тоже нужны
2 вариант: @Бабеля/преобразования среды
с @Бабеля/выполнения
(не глобального масштаба загрязнения)
{ на "плагин" и: [ [ на "@Бабеля/плагин преобразования среды" и, { "и регенератор, что": Правда, corejs: 3 // или 2; Если полифиллы нужны ... } ] ] }
Установите его:
НПМ я -Д @Бабеля/плагин преобразования во время выполнения НПМ я @Бабеля/выполнения
Если вы используете ядро-Яш полифиллы, вы установите @Бабеля/во время выполнения-corejs2
или `@Бабеля/выполнения-corejs3 вместо этого, см. здесь.
Ура
У меня оба моих 'полифилл импорт' и мое 'асинхронные функции' в один и тот же файл, однако я был с помощью функции синтаксис, который поднимает его над полифилл, которое давало бы мне ReferenceError: regeneratorRuntime не определен
ошибка.
import "babel-polyfill"
async function myFunc(){ }
import "babel-polyfill"
var myFunc = async function(){}
чтобы предотвратить его водрузили над импортом полифилл.
Обновить `.файл babelrc согласно следующих примерах, он будет работать.
Если вы используете @Бабеля/предустановка-ОКР
пакет
{
"presets": [
[
"@babel/preset-env", {
"targets": {
"node": "current"
}
}
]
]
}
or if you are using babel-preset-env package
{
"presets": [
[
"env", {
"targets": {
"node": "current"
}
}
]
]
}
Если вы используете Вавилон-предустановки-Этап-2
, затем просто запустить скрипт с --требуют Бабель-полифилл
.
В моем случае эта ошибка была брошена на тесты Мокко`.
Следующим Исправлена проблема
мокко \"на сервере/тесты/**/*.тест.я в JS\&; --компиляторы в JS:Бабель- "регистр" - требуют Бабель-полифилл
Я начал получать эту ошибку после конвертации проекта в машинопись проекта. Насколько я понимаю, проблема проистекает из асинхронного/ждут не признается.
Для меня ошибка была исправлена путем добавления двух вещей в моей установки:
в <предварительно>...
запись: ['Бабель-полифилл', './индекс.Яш'],
...</пре>
в <предварительно>{ на "заготовки" и: не es2015-то"], на "плагин" по: ["и преобразования асинхронного в генератор на"] }</пре>
В разделе devDependencies###: Мне пришлось установить несколько вещей в моем разделе devDependencies в мой пакет.JSON-файл, а также. А именно, мне не хватает Бабель-плагин для преобразования асинхронного в генератор, Бабель-полифилл и Бабель-предустановки-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 вы можете найти здесь.
Вы'вновь получаю сообщение об ошибке, потому что асинхронный/ждут использовать генераторы, которые являются функцией ES2016, не ES2015. Один способ исправить это, чтобы установить Бабель пресет для ES2016 (НПМ установки-сохранить Бабель-предустановки-es2016
) и компилировать в ES2016 вместо ES2015:
"presets": [
"es2016",
// etc...
]
Как и другие ответы сказать, вы также можете использовать полифиллы (хотя и убедитесь, что вы загрузите полифилл](https://stackoverflow.com/a/36628148/6157047) перед любой другой код выполняется). Кроме того, если вы не'т хотите, чтобы включить все зависимости полифилл, вы можете использовать Бабель-регенератор-исполнение или Бабель-плагин для преобразования во время выполнения.
Я исправил эту ошибку, установив Бабель-полифилл
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';
для тестирования я включил --требуют Бабель-полифилл в мой тестовый скрипт
"test": "export NODE_ENV=test|| SET NODE_ENV=test&& mocha --compilers
js:babel-core/register --require babel-polyfill server/test/**.js --exit"
Я имел эту проблему в Chrome. Подобный ответ RienNeVaPlus, это решено для меня:
npm install --save-dev regenerator-runtime
Тогда в моем коде:
import 'regenerator-runtime/runtime';
Рады избежать лишних 200 кб от Вавилон-полифилл
.
Новый ответ, почему вы следите за моим ответом ?
Ответ: Потому что я собираюсь дать вам ответ с последнего проекта обновление версии НПМ .
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"
Если использовать эту версию или более новую версию НПМ и все остальные ... Так что просто нужно изменить :
webpack.config.js
module.exports = {
entry: ["babel-polyfill", "./app/js"]
};
После файлов изменение webpack.config.js просто добавьте эту строку в верхней части вашего кода .
import "babel-polyfill";
Теперь проверим все ли в порядке. Ссылка
Также Спасибо @BrunoLM за хороший ответ.
Целевые браузеры мне нужно уже поддержка асинхронных/ждут, но при написании тестов мокко, если я все-таки получил эту ошибку.
Большинство статей я погуглил устарели, в том числе принято отвечать и высокой голосовал ответы здесь, т. е. вы Don'т нужна полифилл,
Вавилон-регенератор-во время выполнения,
Вавилон-плагин для преобразования во время выполнения`. и т. д. если ваша цель-браузера (- ов) уже поддерживает асинхронный/ждут (конечно, если не нужно полифилл)
Я Дон'т хотите использовать webpack либо.
Длинные Тайлер'ы ответ на самом деле на правильном пути, так как он предложил Вавилон-предустановки-ОКР
(но я пропустил это, во-первых, как он отметил polifill в начале). Я до сих пор у ReferenceError: regeneratorRuntime не определено-на первом тогда я поняла, что это потому, что я не'т поставил цель. После определения целевого узла я могу исправить 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/issues/1762
1 - Установите Бабель-плагин преобразования асинхронно-к-модуль-метод, Бабель-polyfil, Блюберд , Бабель-предустановки-es2015, Бабель-сердечник :
npm install babel-plugin-transform-async-to-module-method babel-polyfill bluebird babel-preset-es2015 babel-core
2 - Добавить в ваших JS Бабель полифилл:
импорт 'Бабель-полифилл';
3 - добавить плагин в свой .babelrc:
{
"presets": ["es2015"],
"plugins": [
["transform-async-to-module-method", {
"module": "bluebird",
"method": "coroutine"
}]
]
}
Источник : http://babeljs.io/docs/plugins/transform-async-to-module-method/
У меня была подстава с webpack с помощью пресетов: ['es2015', 'стадия-0']` и мокко под управлением тесты составлены webpack.
Чтобы сделать мой асинхронный/ждут в тесты работают все, что мне пришлось сделать, это добавить
мокко-требуется вариант Бабель-полифилл`.