Ответ 1

требуется 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");

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

Ответ 2

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

Ответ 3

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

Ответ 4

Обновить

Он работает, если вы установите цель в Chrome. Но это может не сработать для других целей, обратитесь к: https://github.com/babel/babel-preset-env/issues/112

Таким образом, этот ответ НЕ подходит для первоначального вопроса. Я сохраню его здесь как ссылку на babel-preset-env.

Простым решением является добавление import 'babel-polyfill' в начале вашего кода.

Если вы используете webpack, быстрое решение состоит в том, чтобы добавить 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.

Ответ 5

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

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

  // ...
};

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

Ответ 6

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

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

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

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

установить время regenerator-runtime:

npm i -D regenerator-runtime

Затем добавьте в конфигурацию webpack:

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

Ответ 8

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

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

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

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

к этому

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

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

Ответ 9

Babel 7.4.0, core-js 3

Начиная с Вавилона 7.4.0, @babel/polyfill is устарела.

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

ура

Ответ 10

Если вы используете babel-preset-stage-2, просто нужно запустить script с помощью --require babel-polyfill.

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

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

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

Ответ 11

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

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

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

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

2. Мне нужно было обновить мой.babelrc, чтобы разрешить компиляцию async/await в генераторах:

   {
     "presets": ["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"
 }

Полный код:

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

Ответ 12

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

Ответ 13

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

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

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

Ответ 14

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

Ответ 15

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

npm install --save-dev regenerator-runtime

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

import 'regenerator-runtime/runtime';

С babel-polyfill избегайте дополнительных 200 kB от babel-polyfill.

Ответ 16

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

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

webpack.config.js

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

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

import "babel-polyfill";

Теперь проверьте, все ли в порядке. Ссылка LINK

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

Ответ 17

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

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

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

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

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

Ответ 18

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

Ответ 19

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/

Ответ 20

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

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

Ответ 21

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

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

Затем в вашем файле webpack в вашей точке entry сделайте это

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

Ответ 22

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

....

Ответ 23

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

bower install babel-polyfill --save

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

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

Ответ 24

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

Ответ 25

Это решение устарело.

Я нашел решение в комментариях YouTube этого видео https://www.youtube.com/watch?v=iWUR04B42Hc&lc=Ugyq8UJq-OyOzsKIIrB4AaABAg

Это должно направить на правильный комментарий. Многое говорит о том, чтобы найти решение.

Beth W 3 месяца назад (отредактировано)
Еще одно изменение, которое я должен был сделать в 2019 году, - babel больше не использует предустановки stage-0 начиная с v7, по-видимому, поэтому в 26:15 вместо 'npm install --save-dev babel-polyfill babel-preset-stage-0', Я должен был сделать:

npm install --save @babel/polyfill

Который охватывает оба старых варианта. Затем в точке входа для приложения я> включил '@babel/polyfill', а в предварительных настройках запроса я оставил его как есть. Таким образом, конфиг веб-пакета выглядит примерно так:

const path = require('path');
module.exports = {
    entry: {
        app: ['@babel/polyfill', './src/app.js']
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
    },
    mode: 'development',
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['@babel/preset-env']
            }
        }]
    }
}

Надеюсь, что это помогает кому-то!

Ответ 26

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

npm install babel-polyfill

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

Ответ 27

Большинство этих ответов рекомендуют решения для устранения этой ошибки с помощью WebPack. Но в случае, если кто-то использует RollUp (как и я), вот что, наконец, сработало для меня (просто хэдз-ап и связывание этих объявлений с полисом размером около 10 тыс. От размера вывода):

.babelrc

{
    "presets": [
        [
            "env",
            {
                "modules": false,
                "targets": {
                    "browsers": ["last 2 versions"]
                }
            }
        ]
    ],
    "plugins": ["external-helpers",
        [
            "transform-runtime",
            {
                "polyfill": false,
                "regenerator": true
            }
        ]]
}

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import uglify from 'rollup-plugin-uglify';
import commonjs from 'rollup-plugin-commonjs';


export default {
    input: 'src/entry.js',
    output: {
        file: 'dist/bundle.js',
        format: 'umd',
        name: 'MyCoolLib',
        exports: 'named'
    },
    sourcemap: true,
    plugins: [
        commonjs({
            // polyfill async/await
            'node_modules/babel-runtime/helpers/asyncToGenerator.js': ['default']
        }),
        resolve(),
        babel({
            runtimeHelpers: true,
            exclude: 'node_modules/**', // only transpile our source code
        }),
        uglify()

    ]
};

Ответ 28

Я использую проект React и Django и заставил его работать с помощью regenerator-runtime. Вы должны сделать это, потому что @babel/polyfill увеличит размер вашего приложения и также не рекомендуется к использованию. Я также следовал эпизодам этого урока 1 и 2, чтобы создать структуру своего проекта.

*package.json*

...
"devDependencies": {
    "regenerator-runtime": "^0.13.3",
    ...
}

.babelrc

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

index.js

...
import regeneratorRuntime from "regenerator-runtime";
import "regenerator-runtime/runtime";
ReactDOM.render(<App />, document.getElementById('app'));
...

Ответ 29

У меня есть async ждут работы с сборкой webpack/babel:

"devDependencies": {
    "babel-preset-stage-3": "^6.11.0"
}

.babelrc:

"presets": ["es2015", "stage-3"]

Ответ 30

В сценарии, когда пользовательский файл babelHelpers.js создается с помощью babel.buildExternalHelpers() с помощью babel-plugin-external-helpsers я решил, что наименее дорогостоящее решение для клиента заключается в том, чтобы вместо этого добавить regenerator-runtime/runtime.js к выводу всех полиполний.

// runtime.js
npm install --save regenerator-runtime

// building the custom babelHelper.js
fs.writeFile(
    './babelHelpers.js',
    fs.readFileSync('node_modules/regenerator-runtime/runtime.js')
    + '\n'
    + require('babel-core').buildExternalHelpers()
)

Это решение составляет примерно 20 Кбайт вместо ~ 230 КБ при включении babel-polyfill.