I'm mencoba untuk menggunakan async, menanti dari awal di Babel 6, tapi saya'm mendapatkan regeneratorRuntime tidak didefinisikan.
.babelrc file
{
"presets": [ "es2015", "stage-0" ]
}
paket.file json
"devDependencies": {
"babel-core": "^6.0.20",
"babel-preset-es2015": "^6.0.15",
"babel-preset-stage-0": "^6.0.15"
}
.js file
"use strict";
async function foo() {
await bar();
}
function bar() { }
exports.default = foo;
Menggunakannya secara normal tanpa async/menanti bekerja dengan baik. Ide apa yang saya'm lakukan salah?
babel-polyfill
diperlukan. Anda juga harus menginstal itu dalam rangka untuk mendapatkan async/menanti kerja.
npm i -D babel-core babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-loader
paket.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/menanti (contoh kode)
"use strict";
export default async function foo() {
var s = await bar();
console.log(s);
}
function bar() {
return "bar";
}
Di startup file
require("babel-core/register");
require("babel-polyfill");
Jika anda menggunakan webpack anda harus memasukkannya sebagai nilai pertama anda masuk
hotel di webpack file konfigurasi (biasanya webpack.config.js
), karena per @Cemen komentar:
module.exports = {
entry: ['babel-polyfill', './test.js'],
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.jsx?$/, loader: 'babel', }
]
}
};
Jika anda ingin menjalankan tes dengan babel kemudian gunakan:
mocha --compilers js:babel-core/register --require babel-polyfill
Selain polyfill, saya menggunakan babel-plugin-mengubah-runtime. Plugin ini digambarkan sebagai:
Mengeksternalisasi referensi untuk pembantu dan builtins, secara otomatis polyfilling kode anda tanpa polusi global. Apa ini benar-benar berarti meskipun? Pada dasarnya, anda dapat menggunakan built-in seperti yang Dijanjikan, Set, Simbol dll serta menggunakan semua Babel fitur yang memerlukan polyfill mulus, tanpa polusi global, sehingga sangat cocok untuk perpustakaan.
Hal ini juga termasuk dukungan untuk async/menanti bersama dengan built-in dari ES 6.
$ npm install --save-dev babel-plugin-transform-runtime
Dalam .babelrc
, tambahkan runtime plugin
{
"plugins": [
["transform-runtime", {
"regenerator": true
}]
]
}
Catatan Jika anda're menggunakan babel 7, paket telah berganti nama menjadi @babel/plugin-mengubah-runtime.
Babel 7 Pengguna
Aku punya beberapa kesulitan mendapatkan sekitar ini karena sebagian besar informasi untuk sebelum babel versi. Untuk Babel 7, menginstal dua dependensi:
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"]
]
}
Ia bekerja jika anda menetapkan target untuk Chrome. Tapi itu mungkin tidak bekerja untuk target lain, silahkan merujuk ke: https://github.com/babel/babel-preset-env/issues/112
Jadi, ini jawabannya adalah TIDAK **** cukup tepat untuk pertanyaan awal. Aku akan tetap di sini sebagai referensi untuk babel-preset-env
.
Sebuah solusi sederhana adalah dengan menambahkan impor 'babel-polyfill'
pada awal kode anda.
Jika anda menggunakan webpack, solusi cepat untuk menambah babel-polyfill
seperti yang ditunjukkan di bawah ini:
entry: {
index: ['babel-polyfill', './index.js']
}
Periksa proyek ini: https://github.com/babel/babel-preset-env
yarn add --dev babel-preset-env
Gunakan berikut ini sebagai babel konfigurasi:
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 Chrome versions"]
}
}]
]
}
Kemudian aplikasi anda harus baik untuk pergi dalam 2 versi dari browser Chrome.
Anda juga dapat mengatur Node sebagai target atau menyempurnakan browser daftar menurut https://github.com/ai/browserslist
Aku benar-benar seperti babel-preset-env
's filosofi: katakan padaku yang anda ingin mendukung, jangan memberitahu saya bagaimana untuk dukungan mereka. It's keindahan dari pemrograman deklaratif.
I've diuji async
menunggu
dan mereka MELAKUKAN pekerjaan. Saya don't tahu bagaimana mereka bekerja, dan aku benar-benar don't ingin tahu. Saya ingin menghabiskan waktu saya di saya sendiri kode dan logika bisnis bukan. Terima kasih untuk babel-preset-env
, itu membebaskan saya dari Babel konfigurasi neraka.
Atau, jika anda don't membutuhkan semua modul babel-polyfill
menyediakan, anda hanya dapat menentukan babel-regenerator-runtime
di webpack config:
module.exports = {
entry: ['babel-regenerator-runtime', './test.js'],
// ...
};
Ketika menggunakan webpack-dev-server dengan HMR, melakukan hal ini mengurangi jumlah file yang telah menyusun pada setiap membangun oleh cukup banyak. Modul ini dipasang sebagai bagian dari babel-polyfill
jadi jika anda sudah memiliki yang anda're halus, jika tidak, anda dapat menginstalnya secara terpisah dengan npm i-D babel-regenerator-runtime
.
Saya solusi sederhana:
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-regenerator-runtime
sekarang usang, bukan satu harus menggunakan regenerator-runtime
.
Untuk menggunakan runtime generator dengan webpack
dan babel
v7:
install regenerator-runtime
:
npm i -D regenerator-runtime
Dan kemudian menambahkan dalam webpack konfigurasi :
entry: [
'regenerator-runtime/runtime',
YOUR_APP_ENTRY
]
Sebagai Babel 7.4.0, @babel/polyfill
ini usang.
Secara umum, ada dua cara untuk menginstal polyfills/regenerator: via global namespace (Opsi 1) atau sebagai ponyfill (2 Pilihan, tanpa polusi global).
Opsi 1: @babel/preset-env
preset: [ ["@babel/preset-env", { useBuiltIns: "penggunaan", corejs: 3, // atau 2, target: { firefox: "64", // atau sasaran apa pun untuk memilih . }, }] ]
secara otomatis akan menggunakan regenerator-runtime
dan inti-js
menurut anda target. Tidak perlu mengimpor apa pun secara manual. Don't lupa untuk menginstal dependensi runtime:
npm saya-simpan regenerator-runtime core-js
Atau, mengatur useBuiltIns: "masuk"
dan import secara manual:
impor "regenerator-runtime/runtime"; impor "inti-js/stabil"; // jika polyfills juga diperlukan
Pilihan 2: @babel/mengubah-runtime
dengan @babel/runtime
(tidak ada lingkup global polusi)
{ "plugins": [ [ "@babel/plugin-mengubah-runtime", { "regenerator": benar, corejs: 3 // atau 2; jika polyfills dibutuhkan ... } ] ] }
Menginstalnya:
npm i-D @babel/plugin-mengubah-runtime npm saya @babel/runtime
Jika anda menggunakan core-js polyfills, anda menginstal @babel/runtime-corejs2
atau @babel/runtime-corejs3
bukan, lihat di sini.
Cheers
Aku punya kedua saya 'polyfill impor' dan 'async function' di file yang sama, namun saya menggunakan fungsi sintaksis yang kerekan atas polyfill yang akan memberi saya ReferenceError: regeneratorRuntime tidak didefinisikan
kesalahan.
import "babel-polyfill"
async function myFunc(){ }
import "babel-polyfill"
var myFunc = async function(){}
untuk mencegah hal yang dikibarkan di atas polyfill impor.
Update .babelrc
file sesuai dengan contoh berikut, itu akan bekerja.
Jika anda menggunakan @babel/preset-env
paket
{
"presets": [
[
"@babel/preset-env", {
"targets": {
"node": "current"
}
}
]
]
}
or if you are using babel-preset-env package
{
"presets": [
[
"env", {
"targets": {
"node": "current"
}
}
]
]
}
Jika menggunakan babel-preset-tahap-2
maka hanya perlu memulai script dengan --memerlukan babel-polyfill
.
Dalam kasus saya ini kesalahan dilemparkan oleh Mocha
tes.
Berikut tetap masalah
mocha \"server/tes/**/*.tes.js\" --penyusun js:babel-daftar --memerlukan babel-polyfill
Saya mulai mendapatkan kesalahan ini setelah mengkonversi proyek saya ke ketangkasan proyek. Dari apa yang saya mengerti, masalah berasal dari async/menunggu tidak diakui.
Bagi saya kesalahan itu diperbaiki dengan menambahkan dua hal yang perlu saya setup:
...catatan: ['babel-polyfill', './indeks.js'],
...
{ "preset": ["es2015"], "plugins": ["transform-async-untuk-generator"] }
Saya harus menginstal beberapa hal yang saya devDependencies di paket saya.file json juga. Yaitu, aku hilang babel-plugin-mengubah-async-untuk-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"
}
Saya mendapat kode dari yang benar-benar bermanfaat dan ringkas gist GitHub anda dapat menemukan di sini.
Anda're mendapatkan kesalahan karena async/menanti menggunakan generator, yang merupakan ES2016 fitur, tidak ES2015. Salah satu cara untuk memperbaiki hal ini adalah dengan menginstal babel yang telah ditetapkan untuk ES2016 (npm install-simpan babel-preset-es2016
) dan mengkompilasi untuk ES2016 bukan ES2015:
"presets": [
"es2016",
// etc...
]
Sebagai jawaban lain lagi, anda juga dapat menggunakan polyfills (meskipun pastikan anda memuat polyfill pertama sebelum kode lainnya berjalan). Atau, jika anda don't ingin mencakup semua polyfill dependensi, anda dapat menggunakan babel-regenerator-runtime atau babel-plugin-mengubah-runtime.
Aku tetap kesalahan ini dengan memasang babel-polyfill
npm install babel-polyfill --save
kemudian aku diimpor itu di app saya entry point
import http from 'http';
import config from 'dotenv';
import 'babel-polyfill';
import { register } from 'babel-core';
import app from '../app';
untuk pengujian saya termasuk --memerlukan babel-polyfill saya test script
"test": "export NODE_ENV=test|| SET NODE_ENV=test&& mocha --compilers
js:babel-core/register --require babel-polyfill server/test/**.js --exit"
Aku punya masalah ini di Chrome. Mirip dengan RienNeVaPlus jawaban, ini soal itu bagi saya:
npm install --save-dev regenerator-runtime
Kemudian dalam kode saya:
import 'regenerator-runtime/runtime';
Bahagia untuk menghindari tambahan 200 kB dari babel-polyfill
.
Baru Menjawab Mengapa anda mengikuti jawaban saya ?
Jawab: Karena saya akan memberikan jawaban dengan versi Update terbaru npm proyek .
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"
Jika anda Menggunakan versi ini atau yang lebih UP versi Npm dan lain-lain ... JADI hanya perlu mengubah :
webpack.config.js
module.exports = {
entry: ["babel-polyfill", "./app/js"]
};
Setelah perubahan webpack.config.js
file Hanya menambahkan baris ini ke atas dari kode anda .
import "babel-polyfill";
Sekarang periksa semuanya ok. Referensi LINK
Juga Terima kasih @BrunoLM nya bagus Jawabannya.
Browser saya perlu dukungan sudah mendukung async/menunggu, tapi ketika menulis mocha tes, tanpa pengaturan yang tepat aku masih punya kesalahan ini.
Sebagian besar artikel yang saya cari di google sudah ketinggalan jaman, termasuk jawaban yang diterima dan tinggi sebagai jawaban berikut ini, yaitu anda don't perlu polyfill
, babel-regenerator-runtime
, babel-plugin-mengubah-runtime
. dll. jika target browser anda(s) sudah mendukung async/menanti (tentu saja jika tidak anda perlu polyfill)
Saya don't ingin menggunakan webpack
baik.
Tyler Panjang's jawaban adalah benar-benar di jalur yang benar sejak ia menyarankan babel-preset-env
(tapi saya dihilangkan terlebih dahulu karena ia disebutkan polifill di awal). Aku masih punya ReferenceError: regeneratorRuntime tidak didefinisikan
pertama kemudian saya menyadari itu karena aku didn't menetapkan target. Setelah menetapkan target untuk node aku memperbaiki regeneratorRuntime error:
"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 babel7 pengguna 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 - Install babel-plugin-mengubah-async-untuk-modul-metode, 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 di js babel polyfill:
impor 'babel-polyfill';
3 - Tambahkan plugin anda .babelrc:
{
"presets": ["es2015"],
"plugins": [
["transform-async-to-module-method", {
"module": "bluebird",
"method": "coroutine"
}]
]
}
Sumber : http://babeljs.io/docs/plugins/transform-async-to-module-method/
Aku punya setup
dengan webpack menggunakan preset: ['es2015', 'tahap-0']
dan moka yang sedang menjalankan tes yang disusun oleh webpack.
Untuk membuat saya async/menanti
dalam tes kerja, semua harus saya lakukan adalah menambahkan mocha --memerlukan babel-polyfill
pilihan.