it-roy-ru.com

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

463
BrunoLM

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 вы должны поместить его в качестве первой записи в соответствии с комментарием @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
552
BrunoLM

Помимо 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", {
      "polyfill": false,
      "regenerator": true
    }]
  ]
}
259
johnny

Обновление

Это работает, если вы установите цель в 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 он освобождает меня от адской конфигурации Babel.

88
Tyler Long

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

43
Antony Mativos

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

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"
  ]
}
36
E. Fortes

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"]
    ]
}
34
Matt Shirley

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

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

установить regenerator-runtime

npm i -D regenerator-runtime

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

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

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

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

Правка этот код

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

к этому

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

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

11
Ally

Если вы используете babel-preset-stage-2, просто запустите скрипт с --require babel-polyfill.

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

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

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

9
Zubair Alam

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

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

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

    ...
    
     запись: ['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"
 }

Полный код Gist:

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

9
Joshua Dyck

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

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

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

7
Galen Long

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

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

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 и всех других ... ТАК просто нужно изменить: 

webpack.config.js

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

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

import "babel-polyfill";

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

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

6
MD Ashik

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

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

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

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

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

Ответ Тайлера Лонга находится на правильном пути, так как он предложил babel-preset-env (но я сначала опустил его, так как он упомянул polifill в начале). Сначала я получил 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
      }]
    ]
  }
5
Qiulang

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

npm install --save-dev regenerator-runtime

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

import 'regenerator-runtime/runtime';

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

4
Tom Söderlund

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/

4
Luisangonzalez

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

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

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

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

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

bower install babel-polyfill --save

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

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

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

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

2
lakesare

Большинство из этих ответов рекомендуют решения для устранения этой ошибки с помощью 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()

    ]
};
1
Maurice

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

npm install babel-polyfill 

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

1
Petros Kyriakou

у меня была регенераторRuntime не определена ошибка когда я использовал 'async' и 'await' в моем приложении реакции 'async' и 'await' - это новые ключевые слова в ES7 для этого вы должны использовать babel-preset-es2017 установить это devDependencies:

`

"babel-preset-es2017": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1", `

и использовать это 

"presets": [ "es2017" , "stage-0" , "react" ]

0
Anas Alpure

Я столкнулся с этой проблемой при попытке запустить Mocha + Babel. У меня был .babelrc, который работал в разработке (см. Другие ответы здесь, они довольно полны), но моя команда npm run test все еще жаловалась на regeneratorRuntime is not defined. Поэтому я изменил свой package.json:

"scripts": {
  "test": "mocha --require babel-polyfill --require babel-core/register tests/*.js"
}

Подробнее: https://babeljs.io/en/setup/#mocha-4

0
helsont

У меня асинхронная работа с сборкой webpack/babel:

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

.babelrc:

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

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

0
kyw

В сценарии, где пользовательский файл 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.

0
RienNeVaPlu͢s