Пользователям 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' в начале вашего кода.

Если вы используете 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.

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

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

Сначала установите необходимые пакеты с помощью npm:

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

Таким образом, вы сможете использовать функциональность async/await и другие современные возможности JavaScript без проблем с совместимостью.

Обновите ваш файл .babelrc в соответствии с приведёнными ниже примерами, и всё будет работать.

Если вы используете пакет @babel/preset-env, используйте следующий код:

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

Если вы используете пакет babel-preset-env, ваш файл должен выглядеть так:

{
  "presets": [
    [
      "env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

Убедитесь, что вы выбрали правильный пресет в зависимости от вашего проекта.