Saya mencoba menggunakan async, menunggu dari awal pada Babel 6, tapi saya mendapatkan regeneratorRuntime tidak didefinisikan.

File .babelrc

{
    "presets": [ "es2015", "stage-0" ]
}

file package.json

"devDependencies": {
    "babel-core": "^6.0.20",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15"
}

file .js

"use strict";
async function foo() {
  await bar();
}
function bar() { }
exports.default = foo;

Menggunakannya secara normal tanpa async / menunggu berfungsi dengan baik. Ada ide yang saya lakukan salah?

babel-polyfill( tidak digunakan pada Babel 7.4) diperlukan. Anda juga harus menginstalnya agar async / menunggu berfungsi.

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 dengan async / await (kode sampel)

"use strict";

export default async function foo() {
  var s = await bar();
  console.log(s);
}

function bar() {
  return "bar";
}

Dalam file startup

require("babel-core/register");
require("babel-polyfill");

Jika Anda menggunakan webpack, Anda harus meletakkannya sebagai nilai pertama entryarray Anda di file konfigurasi webpack Anda (biasanya webpack.config.js), sesuai komentar @Cemen:

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

  output: {
    filename: 'bundle.js'       
  },

  module: {
    loaders: [
      { test: /\.jsx?$/, loader: 'babel', }
    ]
  }
};

Jika Anda ingin menjalankan tes dengan babel, gunakan:

mocha --compilers js:babel-core/register --require babel-polyfill

Selain polyfill, saya menggunakan babel-plugin-transform-runtime . Plugin ini dijelaskan sebagai:

Eksternalisasikan referensi ke helper dan builtin, secara otomatis mengisi kode Anda tanpa mencemari global. Apa artinya ini sebenarnya? Pada dasarnya, Anda dapat menggunakan built-in seperti Promise, Set, Symbol dll juga menggunakan semua fitur Babel yang membutuhkan polyfill secara mulus, tanpa polusi global, membuatnya sangat cocok untuk perpustakaan.

Ini juga termasuk dukungan untuk async / menunggu bersama dengan built-in ES 6 lainnya.

$ npm install --save-dev babel-plugin-transform-runtime

Di .babelrc, tambahkan plugin runtime

{
  "plugins": [
    ["transform-runtime", {
      "regenerator": true
    }]
  ]
}

Catatan Jika Anda menggunakan babel 7, paket telah diubah namanya menjadi @ babel / plugin-transform-runtime .

Pengguna Babel 7

Saya mengalami beberapa kesulitan untuk mengatasi hal ini karena sebagian besar informasi adalah untuk versi babel sebelumnya. Untuk Babel 7, instal dua dependensi ini:

npm install --save @babel/runtime 
npm install --save-dev @babel/plugin-transform-runtime

Dan, di .babelrc, tambahkan:

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

Memperbarui

Ini berfungsi jika Anda menetapkan target ke Chrome. Tapi itu mungkin tidak berfungsi untuk target lain, silakan merujuk ke: https://github.com/babel/babel-preset-env/issues/112

Jadi jawaban ini TIDAK cukup tepat untuk pertanyaan awal. Saya akan menyimpannya di sini sebagai referensi babel-preset-env.

Solusi sederhana adalah menambahkan import 'babel-polyfill'di awal kode Anda.

Jika Anda menggunakan webpack, solusi cepat adalah menambahkan babel-polyfillseperti yang ditunjukkan di bawah ini:

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

Saya percaya saya telah menemukan praktik terbaik terbaru.

Periksa proyek ini: https://github.com/babel/babel-preset-env

yarn add --dev babel-preset-env

Gunakan yang berikut ini sebagai konfigurasi babel Anda:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 Chrome versions"]
      }
    }]
  ]
}

Maka aplikasi Anda akan bagus untuk masuk dalam 2 versi browser Chrome terakhir.

Anda juga dapat mengatur Node sebagai target atau menyempurnakan daftar browser sesuai dengan https://github.com/ai/browserslist

Katakan padaku apa, jangan beri tahu aku caranya.

Saya sangat suka babel-preset-envfilosofi: beri tahu saya lingkungan mana yang ingin Anda dukung, JANGAN beri tahu saya cara mendukungnya. Ini keindahan pemrograman deklaratif.

Saya sudah menguji async awaitdan mereka DO bekerja. Saya tidak tahu bagaimana mereka bekerja dan saya benar-benar tidak ingin tahu. Saya ingin menghabiskan waktu saya pada kode saya sendiri dan logika bisnis saya sebagai gantinya. Berkat babel-preset-env, itu membebaskan saya dari neraka konfigurasi Babel.

Atau, jika Anda tidak membutuhkan semua modul yang babel-polyfilldisediakan, Anda bisa menentukan babel-regenerator-runtimedi konfigurasi webpack Anda:

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

  // ...
};

Saat menggunakan webpack-dev-server dengan HMR, melakukan ini mengurangi jumlah file yang harus dikompilasi pada setiap build dengan cukup banyak. Modul ini dipasang sebagai bagian dari babel-polyfilljadi jika Anda sudah memilikinya, Anda dapat menginstalnya secara terpisah npm i -D babel-regenerator-runtime.

Solusi sederhana saya:

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

Babel 7.4.0 atau lebih baru (core-js 2/3)

Pada Babel 7.4.0 , @babel/polyfill sudah usang .

Secara umum, ada dua cara untuk menginstal polyfill / regenerator: via namespace global (Opsi 1) atau sebagai ponyfill (Opsi 2, tanpa polusi global).

Pilihan 1: @babel/preset-env

presets: [
  ["@babel/preset-env", {
    useBuiltIns: "usage",
    corejs: 3, // or 2,
    targets: {
        firefox: "64", // or whatever target to choose .    
    },
  }]
]

akan secara otomatis menggunakan regenerator-runtimedan core-jssesuai dengan target Anda . Tidak perlu mengimpor apa pun secara manual. Jangan lupa untuk menginstal dependensi runtime:

npm i --save regenerator-runtime core-js

Atau, atur useBuiltIns: "entry"dan impor secara manual:

import "regenerator-runtime/runtime";
import "core-js/stable"; // if polyfills are also needed

Opsi 2: @babel/transform-runtime dengan @babel/runtime(tidak ada polusi lingkup global)

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true,
        corejs: 3 // or 2; if polyfills needed
        ...
      }
    ]
  ]
}

Pasang itu:

npm i -D @babel/plugin-transform-runtime
npm i @babel/runtime

Jika Anda menggunakan core-js polyfill, Anda menginstal @babel/runtime-corejs2atau @babel/runtime-corejs3sebagai gantinya, lihat di sini .

Bersulang

babel-regenerator-runtimesekarang sudah ditinggalkan , sebagai gantinya orang harus menggunakanregenerator-runtime .

Untuk menggunakan generator runtime dengan webpackdan babelv7:

pasang regenerator-runtime:

npm i -D regenerator-runtime

Dan kemudian tambahkan dalam konfigurasi webpack:

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

Perbarui .babelrcfile Anda sesuai dengan contoh berikut, ini akan berfungsi.

Jika Anda menggunakan @babel/preset-envpaket

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}
or if you are using babel-preset-env package

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

Hati-hati dengan fungsi yang diangkat

Saya memiliki 'impor polyfill' dan 'fungsi async' saya di file yang sama, namun saya menggunakan sintaks fungsi yang mengangkatnya di atas polyfill yang akan memberi saya ReferenceError: regeneratorRuntime is not definedkesalahan.

Ubah kode ini

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

untuk ini

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

untuk mencegahnya diangkat di atas impor polyfill.

Pada Oktober 2019 ini bekerja untuk saya:

Tambahkan ini ke preset.

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

Kemudian instal regenerator-runtime menggunakan npm.

npm i regenerator-runtime

Dan kemudian dalam penggunaan file utama Anda: (impor ini hanya digunakan sekali)

import "regenerator-runtime/runtime";

Ini akan memungkinkan Anda untuk menggunakan async awaitsfile Anda dan menghapus fileregenerator error

Jika menggunakan babel-preset-stage-2maka cukup mulai skrip dengan --require babel-polyfill.

Dalam kasus saya kesalahan ini dilemparkan oleh Mochates.

Setelah memperbaiki masalah

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

Saya mulai mendapatkan kesalahan ini setelah mengubah proyek saya menjadi proyek naskah. Dari apa yang saya mengerti, masalahnya berasal dari async / menunggu tidak dikenali.

Bagi saya kesalahan telah diperbaiki dengan menambahkan dua hal ke pengaturan saya:

1. Seperti yang disebutkan di atas berkali-kali, saya perlu menambahkan babel-polyfill ke dalam array entri webpack saya:

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

2. Saya perlu memperbarui .babelrc saya untuk memungkinkan kompilasi async / menunggu menjadi generator:

   {
     "preset": ["es2015"],
     "plugins": ["transform-async-to-generator"]
   }

DevDependencies:

Saya harus menginstal beberapa hal ke dalam devDependencies saya di file package.json saya juga. Yaitu, saya kehilangan babel-plugin-transform-async-to-generator, babel-polyfill dan 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"
 }

Inti Kode Lengkap:

Saya mendapatkan kode dari intisari GitHub yang sangat membantu dan ringkas yang dapat Anda temukan di sini .

Saya punya masalah ini di Chrome. Mirip dengan jawaban RienNeVaPlu, ini menyelesaikannya untuk saya:

npm install --save-dev regenerator-runtime

Kemudian dalam kode saya:

import 'regenerator-runtime/runtime';

Senang menghindari tambahan 200 kB dari babel-polyfill.

Kesalahan ini disebabkan ketika async/awaitfungsi digunakan tanpa plugin Babel yang tepat. Pada Maret 2020, berikut ini yang harus Anda lakukan. ( @babel/polyfilldan banyak solusi yang diterima telah ditinggalkan di Babel. Baca lebih lanjut di Babel docs. )

Di baris perintah, ketik:

npm install --save-dev @babel/plugin-transform-runtime

Di babel.config.jsfile Anda , tambahkan plugin ini @babel/plugin-transform-runtime. Catatan: Contoh di bawah ini termasuk preset dan plugin lain yang saya miliki untuk proyek React / Node / Express kecil yang saya kerjakan baru-baru ini:

module.exports = {
  presets: ['@babel/preset-react', '@babel/preset-env'],
  plugins: ['@babel/plugin-proposal-class-properties', 
  '@babel/plugin-transform-runtime'],
};

Anda mendapatkan kesalahan karena async / menunggu menggunakan generator, yang merupakan fitur ES2016, bukan ES2015. Salah satu cara untuk memperbaikinya adalah dengan menginstal preset babel untuk ES2016 ( npm install --save babel-preset-es2016) dan kompilasi ke ES2016 alih-alih ES2015:

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

Seperti jawaban lain menyebutkan, Anda juga dapat menggunakan polyfill (meskipun pastikan Anda memuat polyfill terlebih dahulu sebelum kode lain berjalan). Atau, jika Anda tidak ingin menyertakan semua dependensi polyfill, Anda dapat menggunakan babel-regenerator-runtime atau babel-plugin-transform-runtime .

Saya memperbaiki kesalahan ini dengan menginstal babel-polyfill

npm install babel-polyfill --save

kemudian saya mengimpornya di titik masuk aplikasi saya

import http from 'http';
import config from 'dotenv';
import 'babel-polyfill';
import { register } from 'babel-core';
import app from '../app';

untuk pengujian saya sertakan --require babel-polyfill dalam skrip pengujian saya

"test": "export NODE_ENV=test|| SET NODE_ENV=test&& mocha --compilers 
  js:babel-core/register --require babel-polyfill server/test/**.js --exit"

Jawaban Baru Mengapa Anda mengikuti jawaban saya?

Jawab: Karena saya akan memberi Anda jawaban dengan proyek npm versi Pembaruan terbaru.

14/04/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"

Jika Anda menggunakan versi ini atau lebih banyak versi NPM dan semua lainnya ... SO hanya perlu mengubah:

webpack.config.js

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

Setelah mengubah webpack.config.jsfile, tambahkan saja baris ini ke atas kode Anda.

import "babel-polyfill";

Sekarang periksa semuanya ok. Referensi LINK

Juga Terima Kasih @BrunoLM untuk Jawabannya yang bagus.

Browser yang ditargetkan saya perlu mendukung sudah mendukung async / menunggu, tetapi ketika menulis tes moka, tanpa pengaturan yang tepat saya masih mendapatkan kesalahan ini.

Sebagian besar artikel saya googled sudah ketinggalan jaman, termasuk jawaban yang diterima dan tinggi sebagai jawaban di sini, yaitu Anda tidak perlu polyfill, babel-regenerator-runtime, babel-plugin-transform-runtime. dll. jika browser target Anda sudah mendukung async / menunggu (tentu saja jika tidak, Anda perlu polyfill)

Saya juga tidak ingin menggunakan webpack.

Jawaban Tyler Long sebenarnya ada di jalur yang benar sejak dia menyarankan babel-preset-env(tapi saya menghilangkannya dulu karena dia menyebutkan polifill di awal). Saya masih mendapatkan yang ReferenceError: regeneratorRuntime is not definedpertama kemudian saya sadari karena saya tidak menetapkan target. Setelah menetapkan target untuk simpul saya memperbaiki kesalahan regeneratorRuntime ：

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

Untuk pengguna babel7 dan ParcelJS> = 1.10.0 pengguna

npm i @babel/runtime-corejs2
npm i --save-dev @babel/plugin-transform-runtime @babel/core

.babelrc

{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 2
    }]
  ]
}

diambil dari https://github.com/parcel-bundler/parcel/issues/1762

1 - Instal babel-plugin-transform-async-to-module-method, 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 - Tambahkan js babel polyfill Anda:

import 'babel-polyfill';

3 - Tambahkan plugin di .babelrc Anda:

{
    "presets": ["es2015"],
    "plugins": [
      ["transform-async-to-module-method", {
        "module": "bluebird",
        "method": "coroutine"
      }]
    ]
}

Sumber: http://babeljs.io/docs/plugins/transform-async-to-module-method/

Saya memiliki pengaturan
dengan menggunakan webpackpresets: ['es2015', 'stage-0']
dan mocha yang menjalankan tes yang dikompilasi oleh webpack.

Agar async/awaittes saya berfungsi, yang harus saya lakukan adalah menambahkan mocha --require babel-polyfillopsi.

Saya mendapatkan kesalahan ini menggunakan gulp dengan rollup ketika saya mencoba menggunakan generator 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 }));
});

Saya perkirakan solusinya adalah memasukkan babel-polyfillsebagai komponen bower:

bower install babel-polyfill --save

dan tambahkan itu sebagai ketergantungan pada index.html:

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

Untuk orang yang ingin menggunakan babel-polyfillversi 7 ^ lakukan ini dengan webpackver3 ^.

Npm instal modul npm i -D @babel/polyfill

Kemudian di webpackfile Anda di entrytitik Anda lakukan ini

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

Babel kerja saya 7 boilerplate yang untuk bereaksi dengan runtime regenerator:

.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";

....

Jika Anda membuat aplikasi, Anda hanya perlu @babel/preset-envdan @babel/polyfill:

npm i -D @babel/preset-env
npm i @babel/polyfill

(Catatan: Anda tidak perlu menginstal core-jsdanregenerator-runtime paket karena keduanya telah diinstal oleh @ babel / polyfill)

Kemudian di .babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"  // this is the key. use 'usage' for further codesize reduction, but it's still 'experimental'
      }
    ]
  ]
}

Sekarang atur lingkungan target Anda. Di sini, kami melakukannya di .browserslistrcfile:

# Browsers that we support

>0.2%
not dead
not ie <= 11
not op_mini all

Akhirnya, jika Anda ikut useBuiltIns: "entry", masukkanimport @babel/polyfill di bagian atas file entri Anda. Kalau tidak, Anda sudah selesai.

Menggunakan metode ini secara selektif akan mengimpor polyfill tersebut dan file 'regenerator-runtime' (memperbaiki regeneratorRuntime is not definedmasalah Anda di sini) SAJA jika dibutuhkan oleh salah satu lingkungan / browser target Anda.

untuk referensi di masa mendatang :

Pada Babel versi 7.0.0-beta.55 preset panggung telah dihapus

lihat blog https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

async menunggu masih bisa digunakan oleh

https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator#usage

instalasi

npm install --save-dev @babel/plugin-transform-async-to-generator

penggunaan dalam .babelrc

 { 
     "presets": ["@babel/preset-env"],
     "plugins": ["@babel/plugin-transform-async-to-generator"]
 }

dan menggunakan babel polyfill https://babeljs.io/docs/en/babel-polyfill

instalasi

npm install --save @babel/polyfill

webpack.config.js

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

Pada tahun 2019 dengan Babel 7.4.0+, babel-polyfillpaket telah usang mendukung secara langsung termasuk core-js/stable( core-js@3+, untuk polyfill fitur ECMAScript) dan regenerator-runtime/runtime(diperlukan untuk menggunakan fungsi generator yang dialihkan):

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

Informasi dari babel-polyfill dokumentasi .

Cara termudah untuk memperbaiki masalah ini 'regeneratorRuntime tidak didefinisikan' di konsol Anda:

Anda tidak harus menginstal plugin yang tidak perlu. Cukup tambahkan:

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

di dalam tubuh di index.html Anda. Sekarang regeneratorRuntime harus didefinisikan setelah Anda menjalankan babel dan sekarang fungsi-fungsi async / menunggu Anda harus dikompilasi dengan sukses ke ES2015

Jika Anda menggunakan Gulp + Babel untuk sebuah frontend, Anda perlu menggunakan babel-polyfill

npm install babel-polyfill

dan kemudian menambahkan tag skrip ke index.html di atas semua tag skrip lain dan referensi babel-polyfill dari node_modules