Решение ошибки 'regeneratorRuntime is not defined' в Babel 6

Быстрый ответ

Если вы столкнулись с ошибкой regeneratorRuntime в Babel 6, добавьте в ваш главный JavaScript файл пакеты regenerator-runtime и core-js:

import "core-js/stable";
import "regenerator-runtime/runtime";

Это обеспечит корректную работу полифилов для генераторов и асинхронных функций, обработанных через Babel. Удостоверьтесь, что в файле .babelrc или в настройках Babel вы используете пресеты es2015 и stage-0. Только в этом случае конструкции async/await будут функционировать корректно.

Управление полифилами в Babel

Полифилы: незаменимые помощники в Babel

Babel «из коробки» не способен поддерживать некоторые возможности последних стандартов ECMAScript. Здесь на помощь приходят полифилы. Незаменимую роль здесь играет babel-polyfill, создающий окружение, соответствующее стандарту ES2015+. Он должен быть подключен в начале работы, до обработки ваших скриптов.

Подробнее об этом расскажет наш спикер на видео

Настройка Webpack

Правильная конфигурация Webpack является критически важной. Чтобы избежать ошибок, связанных с regeneratorRuntime, включите babel-polyfill в массив точек входа вашего конфигурационного файла webpack.config.js:

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

Для тех, кто использует mocha для тестирования, в файлах package.json необходимо указать и babel-core/register, и babel-polyfill:

"scripts": {
  "test": "mocha --compilers js:babel-core/register --require babel-polyfill"
}

Выбор пресетов и плагинов

Следует настроить Babel таким образом, чтобы он работал с пресетами es2015 и stage-0. Это подготовит среду для использования async/await. При активном использовании async/await обязательно примените babel-plugin-transform-runtime с опцией { "regenerator": true }.

{
  "presets": ["es2015", "stage-0"],
  "plugins": [["transform-runtime", { "regenerator": true }]]
}

Взгляд в будущее: Babel 7

Несмотря на то что сейчас речь идет о Babel 6, стоит обратить внимание на Babel 7, чтобы быть готовыми к будущим изменениям. В нем появились новые возможности, такие как @babel/preset-env и @babel/plugin-transform-runtime, которые упрощают работу с async/await.

Соблюдение строгого режима

Применение строгого режима (strict mode) помогает избежать множества ошибок при работе с async/await, а также повышает контроль за областями видимости переменных и обработкой исключений.

Визуализация

Ошибка regeneratorRuntime в Babel 6 может быть представлена следующим образом:

📦 Процесс трансформации кода Babel 6
| Исходный код    |          | Транслированный код                     |
| --------------- |          | --------------------------------------- |
| `async` функция | ➡️ | код, требующий наличия `regeneratorRuntime` |

Отсутствующий элемент: regeneratorRuntime — редкость, сравнимая с единорогом.

// Решение проблемы:
import "babel-polyfill"; // Привлекаем скрытого `regeneratorRuntime`.

При активации babel-polyfill достигаем конечного состояния кода:

Исходный код 🛠️ --(Babel 6)---> ⚙️ Отсутствие `regeneratorRuntime`
                 / 
   Решение: babel-polyfill 🔧 // Ключ к завершению процесса трансформации.
                 \
Транслированный код 🚀 --Работает без ошибок--> 🎉  // Вуаля! Код успешно транслирован.

Особенности реализации и потенциальные проблемы

Настоящее и будущее с preset-env

Вместо того, чтобы использовать es2015 и stage-0 по отдельности, babel-preset-env подбирает необходимые полифилы и плагины, исходя из ваших целевых браузеров и окружений. Это оптимизирует процесс сборки.

Подключайте полифилы при необходимости

Начиная с версии Babel 7.4.0, @babel/polyfill был заменен на core-js и regenerator-runtime. В более ранних версиях, первоначальный импорт babel-polyfill может гарантировать наличие требуемого regeneratorRuntime и предотвратить критические ошибки.

Целевые окружения

Для определения целей для babel-preset-env, используйте базу данных browserslist. Такой подход позволяет минимизировать необходимость догадок о настройке Babel и повышает эффективность вашего транслированного кода.

Переход на Babel 7

Если это соответствует вашим требованиям, рассмотрите возможность миграции на Babel 7. Этот инструмент обеспечивает беспроблемную работу с async/await и упрощает процесс создания полифилов с помощью таких инструментов, как @babel/plugin-transform-runtime и @babel/preset-env с опцией { useBuiltIns: 'usage' }.

Полезные материалы

1. Итераторы и генераторы – JavaScript | MDN — Подробное руководство по генераторам и итераторам в JavaScript.
2. javascript – Babel 6 regeneratorRuntime не определён – Stack Overflow — Обсуждение на Stack Overflow, освещающее ошибку regeneratorRuntime не определён.
3. GitHub – babel/babel: 🐠 Babel — это компилятор для JavaScript нового поколения. — Официальный профиль Babel на GitHub.
4. @babel/polyfill · Babel — Официальная документация Babel по использованию @babel/polyfill.
5. ReferenceError regeneratorRuntime не определён · Вопрос #9849 · babel/babel · GitHub — Запись на GitHub, освещающую ошибку regeneratorRuntime.
6. babel-polyfill – npm — Страница пакета npm для babel-polyfill с инструкциями по установке.