Я пытаюсь использовать 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 работает просто отлично. Есть идеи, что я делаю не так?

babel-polyfill( устарело с версии 7.4). Вы также должны установить его, чтобы заставить работать 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");

Если вы используете веб-пакет, вы должны поместить его в качестве первого значения вашего entryмассива в файле конфигурации вашего веб-пакета (обычно 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

Помимо 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 .

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

Обновить

Это работает, если вы установите цель в 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философия: скажи мне, какую среду ты хочешь поддерживать, НЕ говори мне, как их поддерживать. Это красота декларативного программирования.

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

В качестве альтернативы, если вам не нужны все модули 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.

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

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) или как 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

Если вы используете полифилы core-js, вы устанавливаете @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

Эта ошибка возникает, когда 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'],
};

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

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

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

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

2. Мне нужно было обновить мой .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, которую вы можете найти здесь .

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

npm install --save-dev regenerator-runtime

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

import 'regenerator-runtime/runtime';

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

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

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

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

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

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

Ответ : Потому что я собираюсь дать вам ответ с последней версией обновления проекта 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 за его хороший ответ.

Целевые браузеры, которые мне нужно поддерживать, уже поддерживают 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
      }]
    ]
  }

Для пользователей 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 - Установить метод 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']
и мокко , который работает тесты , составленные WebPack.

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

Я получаю эту ошибку, используя 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>

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

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 пакеты , потому что они оба были установлены @ столпотворение / 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проблему здесь), ТОЛЬКО если они нужны любой из ваших целевых сред / браузеров.

для дальнейшего использования :

Начиная с версии 7.0.0-beta.55 Babel были удалены предустановки

см блог 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"]
 }

и использование babel polyfill 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 документации .

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

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

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

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

Если вы используете Gulp + Babel для внешнего интерфейса, вам нужно использовать babel-polyfill

npm install babel-polyfill

а затем добавьте тег script в index.html над всеми другими тегами сценария и укажите ссылку на babel-polyfill из node_modules