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


634

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


Вы включили регенератор?
ssube

3
Babel-Polyfill это то, что вам нужно.
Ронни Ройстон

babel-polyfill амортизируется с 7.4; это обновление, поэтому пост описывает миграцию.
JWCS

Для тех, кто использует более новые версии babel и node: stackoverflow.com/a/62254909/8169904
пн,

Ответы:


682

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

77
Важны при использовании столпотворения с WebPack: вместо использования require("babel-polyfill")которых не работают, вы добавляете "babel-polyfill"в вашем entryв конфигурации, как это: entry: ["babel-polyfill", "src/main.js"]. Это сработало для меня, в том числе использование в Webpack-Dev-Server с HMR.
Cemen

6
Я пытался заставить мои тесты mocha работать с babel6 и async, и мне пришлось добавить --require babel-polyfill в конфигурацию npm test runner
arisalexis

13
Для чего нужна регистрация?
trusktr

6
@Lloyd, devDependencyесли вы используете webpack, потому что он будет «компилировать» файлы перед запуском. dependencyесли вы не используете веб-пакет и вам требуется Babel.
BrunoLM

4
Это делает размер выходного файла огромным ... Лучше использовать только то, что вам нужно, вместо того, чтобы напрямую запрашивать babel-polyfill.
Inanc Gumus

342

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


11
Мне не нужно, babel-runtimeчтобы получить асинхронную работу ждать. Это верно? Изменить: я работаю на стороне сервера кода. :)
GijsjanB

8
Если вы смогли использовать его без babel-runtime, это потому, что он уже находится в вашем дереве зависимостей. Так что имейте в виду, что если вы пишете библиотеку, а babel-runtime представляет собой зависимость от dev, она может не подойти вашим пользователям. Вы должны будете включить это как нормальную зависимость для распространения.
neverfox

23
babel-plugin-transform-runtimeтребуется только Работает как шарм.
Saike

9
Это решение не подходит, потому что для расширения requireвызовов, добавляемых transform-runtimeплагином, требуется дополнительное задание Browserify или Webpack .
Finesse

9
Обратите внимание, что для Babel 7 вам нужно бежатьnpm install --save-dev @babel/plugin-transform-runtime
Андрей Семакин

197

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

Как мы можем сделать это без .babelrc (просто используя файл конфигурации webpack)
Pouya Jabbarisani

2
Документ показывает использование как "plugins": ["@babel/plugin-transform-runtime"], а не "plugins": [ ["@babel/transform-runtime"] ]здесь. Другое название плагина. Обе работы. Но какой из них правильный? ..
19

5
Я получаю требование не определяется при использовании этого метода
Бэтмен

1
@ kw лучше всего всегда следовать документам - без разницы, кроме соглашения.
Мэтт Ширли

4
Добавление @babel/transform-runtimeк плагинам вызвало у меня ошибку «экспорт не определен». Я изменил это на это, чтобы заставить работать асинхронно в Babel7:["@babel/plugin-transform-runtime", { "regenerator": true } ]
Хари

105

Обновить

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


3
Это действительно работает. Единственным недостатком является куча зависимостей, babel-preset-envно я думаю, что это того стоит. Люблю декларативный стиль тоже. Также yarn installсейчасyarn add
Роман Ушеренко

1
@gargantuan Да, это так.
Тайлер Лонг

3
Не совсем решение, если вы хотите ориентироваться на старые браузеры или версии узлов.
Рохан Ортон

2
На всякий случай, если это не очевидно ... это рекомендуемое решение НЕ будет работать, если вам нужен ваш код для работы в IE11
Морис

7
Почему так много голосов? Это работает только потому, что он больше не преобразует async / await и, следовательно, больше не нуждается в регенераторе Runtime, и, поскольку он не преобразован, он не будет работать в браузерах, которые его не поддерживают.
Сикё

47

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


Это кажется наиболее удобным решением. Однако большинство браузеров поддерживают генераторы, поэтому это решение, вероятно, не является оптимальным. Смотрите: blogs.candoerz.com/question/213492/…
Китанотори

Что делать, если вы не используете веб-пакет?
Бэтмен

38

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

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
Вам не хватает "transform-async-to-generator" в плагинах. Я должен был также добавить это, чтобы заставить это работать
GabrielBB

@GabrielBB Я редактировал пост, так что это полный пример.
webnoob

2
Является ли это loose: trueнеобходимо?
Том Седерлунд

При использовании это добавляет требование к моему файлу, а требование не определено в браузере.
Бэтмен

свободный: истина не нужна. Что вам действительно нужно в вашем .babelrc: {"presets": ["es2015", "реагировать", "stage-2"], "plugins": ["transform-runtime", "transform-async-to-generator" "]}
Efe Ariaroo

29

Вавилон 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вместо этого смотрите здесь .

ура


2
Это правильный, самый актуальный ответ, который помог мне с проблемой моего текущего проекта. Спасибо!
cdpautsch

2
{"presets": [["@ babel / preset-env", {"target": {"esmodules": true}}]]} Это помогло мне при сборке node.js
Смолин Павел

3
Я имею в виду, что я уже знал это, но чтобы помочь другим, это должен быть правильный ответ. Наилучшие пожелания!
Невядомский Павел

Примечание: я думаю, что имеет смысл использовать поток Babel 7 , чтобы ошибки, связанные с версией, можно было лучше различить. Вы можете найти более конкретную версию этого ответа здесь (но приведенные выше утверждения остаются в силе)
ford04

16

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

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

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

npm i -D regenerator-runtime

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

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

Это должен быть принятый ответ, babel-polyfill добавляет слишком много других вещей
Shikyo

Работа идеально подходит для меня ... Большое спасибо
Леандро Уильям

1
Этот метод всегда включает время выполнения, хотя. Я считаю , что поражения цели @babel/preset-env«с useBuiltInsс динамически подставлять выполнения на основе ваших целевых браузеров.
KYW

13

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

2
объясните пожалуйста ваш ответ? что делает «узел»: «текущий»
Вишал Соланки

Я также хотел бы знать, что это делает, и если это рекомендуемое решение - то есть оно ничего не ставит под угрозу и является «будущим» (столько, сколько может быть в данный момент). targetsкажется, относится к этому :, в the environments you support/target for your projectто время targets.nodeкак это : if you want to compile against the current node version, you can specify "node": true or "node": "current", which would be the same as "node": process.versions.node
user1063287

FWIW, я использовал второй блок, определенный в ответе (и удаленный "stage-0"в процессе), и ошибка регенератора ушла.
user1063287

1
@BunkerBoy Для удобства вы можете использовать «node»: «current», чтобы включить только необходимые полифилы и преобразования для версии Node.js, которую вы используете для запуска Babel
Zero

так что для этого мне не нужно устанавливать полифилы?
Вишал Соланки

12

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

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

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

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

к этому

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

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


5
a: kgjablrsdkjfjasnkljfbajklfdablkhjnfl; грустный Я сошел с ума, и ты спас меня, я люблю тебя
Джон Р Перри

11

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

Добавьте это в пресет.

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

Затем установите регенератор, используя npm.

npm i regenerator-runtime

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

import "regenerator-runtime/runtime";

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


Если значение не установлено, по useBuiltInsумолчанию оно равно false. Это не будет автоматически импортировать любые заливки в зависимости от целевого окружения, что подрывает цель "@babel/preset-env". Вот также связанный комментарий одного из разработчиков babel.
bela53

10

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

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

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

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


10

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

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

Это не работает imgur.com/a/2Ea8WDk
невероятно

Отлично сработало для меня. Мой не реагирующий проект .babelrcвыглядит так: `` `{" presets ": [" @ babel / preset-env "]," plugins ": [" @ babel / plugin-transform-runtime "]}` ``
Энтони

9

Я начал получать эту ошибку после преобразования моего проекта в проект машинописного текста. Из того, что я понимаю, проблема заключается в том, что 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, которую вы можете найти здесь .


3
Лучше использовать пресет envвместо es2015. envвключает es2015уже.
Нейротрансмиттер

9

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

npm install --save-dev regenerator-runtime

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

import 'regenerator-runtime/runtime';

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


8

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

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

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


7

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

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

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


1
Зачем ему использовать веб-пакет, если это бэкэнд-сервис? Ваш ответ подразумевает, что он должен использовать веб-пакет?
Спок

1
@ Спок, я думал об этом. Я столкнулся с той же проблемой, и я решил свою проблему таким простым способом. Я думаю, что это положительный ответ для пользователя Webpack, и у него больше Правильного ответа, так что вы можете следовать за любым другим.
MD

Зачем тебе нужно нажимать на голосование !!!! Можешь сказать причину, если хочешь мне помочь.
Доктор медицинских наук Ашик

6

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


4

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/


3

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

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


3

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

Спасибо. Это сработало для меня. Я не знал, что мне нужно было добавить тег script, чтобы он работал на стороне клиента.
Раза

3

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

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

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

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

3

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

....

2

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


2

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

Начиная с версии 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"],
};

2

В 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 документации .


2

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

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

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

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


1

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

npm install babel-polyfill

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


Я не понимаю, почему понизить и комментарий. Я хотел это для браузера Firefox. Также я взял информацию непосредственно с самого сайта Babel. Комментарий не помог мне решить проблему, когда я попробовал.
Петрос Кириаку
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.