Async kullanmaya çalışıyorum, Babel 6'da sıfırdan bekliyorum, ancak regeneratorRuntime tanımlanmıyorum.

.babelrc dosyası

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

package.json dosyası

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

.js dosyası

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

Async / await olmadan normal olarak kullanmak gayet iyi çalışıyor. Yanlış yaptığım hakkında bir fikrin var mı?

babel-polyfill( Babil 7.4 itibarıyla kullanımdan kaldırılmıştır ) gereklidir. Ayrıca, zaman uyumsuz / çalışmayı beklemek için yüklemeniz gerekir.

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

asenkron / beklemeli .js (örnek kod)

"use strict";

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

function bar() {
  return "bar";
}

Başlangıç ​​dosyasında

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

Webpack kullanıyorsanız, @Cemen yorumuna göreentry webpack yapılandırma dosyanızda (genellikle webpack.config.js) dizinizin ilk değeri olarak koymanız gerekir :

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

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

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

Babil ile test yapmak istiyorsanız şunu kullanın:

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

Polyfill'in yanı sıra babel-plugin-transform-runtime kullanıyorum . Eklenti şu şekilde tanımlanır:

Globalleri kirletmeden kodunuzu otomatik olarak çoklu doldurarak yardımcılara ve yerleşiklere referansları dışlayın. Bu aslında ne anlama geliyor? Temel olarak, Promise, Set, Symbol vb gibi yerleşik bileşenleri kullanabilir ve küresel kirlilik olmadan çoklu dolum gerektiren tüm Babel özelliklerini sorunsuz bir şekilde kullanabilir ve kütüphaneler için son derece uygun hale getirebilirsiniz.

Ayrıca ES 6'nın diğer yerleşikleriyle birlikte zaman uyumsuz / beklemede destek içerir.

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

Alanına .babelrc, çalışma zamanı eklentisini ekleyin

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

Not babel 7 kullanıyorsanız, paket @ babel / plugin-transform-runtime olarak yeniden adlandırılmıştır .

Babel 7 Kullanıcıları

Çoğu bilgi önceki babel sürümleri için olduğundan bu konuda biraz sorun yaşadım. Babel 7 için şu iki bağımlılığı yükleyin:

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

Ve .babelrc'de şunu ekleyin:

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

Güncelleme

Hedefi Chrome olarak ayarlarsanız çalışır. Ancak diğer hedefler için işe yaramayabilir, lütfen şuna bakın: https://github.com/babel/babel-preset-env/issues/112

Yani bu cevap orijinal soru için tam olarak uygun DEĞİLDİR . Burada bir referans olarak tutacağımbabel-preset-env .

Basit bir çözüm eklemektir import 'babel-polyfill' kodunuzun başına .

Webpack kullanıyorsanız, babel-polyfillaşağıda gösterildiği gibi hızlı bir çözüm eklemektir :

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

En son en iyi uygulamayı bulduğuma inanıyorum.

Bu projeyi kontrol edin: https://github.com/babel/babel-preset-env

yarn add --dev babel-preset-env

Babil yapılandırmanız olarak aşağıdakileri kullanın:

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

Ardından, uygulamanızın Chrome tarayıcısının son 2 sürümüne geçmesi iyi olmalıdır.

Ayrıca Düğümü hedef olarak ayarlayabilir veya tarayıcı listesine https://github.com/ai/browserslist adresine göre ince ayar yapabilirsiniz.

Bana ne olduğunu söyle, nasıl olduğunu söyleme.

babel-preset-envFelsefesini gerçekten çok seviyorum : Bana hangi ortamı desteklemek istediğinizi söyleyin, bana onları nasıl destekleyeceğimi söyleme. Bu, bildirimsel programlamanın güzelliğidir.

Test ettim async awaitve işe yarıyorlar. Nasıl çalıştıklarını bilmiyorum ve gerçekten bilmek istemiyorum. Zamanımı kendi kodumla ve iş mantığımla geçirmek istiyorum. Bu sayede babel-preset-envbeni Babil konfigürasyon cehenneminden kurtarıyor.

Alternatif olarak, sağlanan tüm modüllere ihtiyacınız yoksa , webpack yapılandırmanızda şunları babel-polyfillbelirtebilirsiniz babel-regenerator-runtime:

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

  // ...
};

HMR ile webpack-dev-server kullanırken, bunu yapmak her derlemede derlemek zorunda olduğu dosya sayısını oldukça azalttı. Bu modül bir parçası olarak monte edilmiştir, babel-polyfillbu yüzden zaten iyi durumdaysanız, aksi takdirde ile birlikte kurabilirsiniz npm i -D babel-regenerator-runtime.

Benim basit çözümüm:

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 veya üstü (core-js 2/3)

İtibariyle Babil 7.4.0 , @babel/polyfill bir kullanımdan kaldırıldı .

Genel olarak, çoklu dolgular / rejeneratör kurmanın iki yolu vardır: küresel ad alanı (Seçenek 1) veya ponyfill (Seçenek 2, küresel kirlilik olmadan).

Seçenek 1: @babel/preset-env

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

otomatik olarak kullanır regenerator-runtimeve hedefinizecore-js göre . Elle herhangi bir şey içe aktarmaya gerek yoktur. Çalışma zamanı bağımlılıklarını yüklemeyi unutmayın:

npm i --save regenerator-runtime core-js

Alternatif olarak, useBuiltIns: "entry"manuel olarak ayarlayın ve içe aktarın:

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

2. Seçenek: @babel/transform-runtime ile @babel/runtime(hayır küresel kapsam kirliliği)

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

Yükle:

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

Core-js polyfills kullanıyorsanız @babel/runtime-corejs2veya @babel/runtime-corejs3yerine yüklersiniz, buraya bakın .

Şerefe

babel-regenerator-runtimeartık kullanımdan kaldırılmıştır , bunun yerine kullanıcı kullanmalıdır regenerator-runtime.

Çalışma zamanı üreticisini webpackve babelv7 ile kullanmak için :

yüklemek regenerator-runtime:

npm i -D regenerator-runtime

Ve sonra web paketi yapılandırmasına ekleyin:

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

Güncelleyin .babelrcDosyanızı aşağıdaki örneklere göre , çalışacaktır.

@babel/preset-envPaket kullanıyorsanız

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

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

Kaldırılmış fonksiyonlara dikkat edin

Aynı dosyada hem 'çoklu dolgumu içe aktarma' hem de 'eşzamansız işlevim' vardı, ancak bana verecek olan çoklu dolgunun üstünde kaldıran işlev sözdizimini kullanıyordum ReferenceError: regeneratorRuntime is not defined hata .

Bu kodu değiştir

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

buna

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

çoklu dolgu ithalatının üzerine çekilmesini önlemek için.

Ekim 2019'dan itibaren bu benim için çalıştı:

Bunu ön ayara ekleyin.

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

Sonra npm kullanarak regenerator-runtime'ı kurun.

npm i regenerator-runtime

Ve sonra ana dosya kullanımınızda: (bu içe aktarma yalnızca bir kez kullanılır)

import "regenerator-runtime/runtime";

Bu, async awaitsdosyanızda kullanmanıza veregenerator error

Kullanıyorsanız babel-preset-stage-2, komut dosyasını ile başlatmanız yeterlidir --require babel-polyfill.

Benim durumumda bu hata Mochatestlerle atıldı .

Aşağıdaki sorun giderildi

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

Projemi bir daktilo projesine dönüştürdükten sonra bu hatayı almaya başladım. Anladığım kadarıyla, sorun async / beklemekten kaynaklanıyor.

Benim için hata, kurulumuma iki şey ekleyerek düzeltildi:

1. Yukarıda defalarca belirtildiği gibi, webpack giriş dizime babel-polyfill eklemem gerekiyordu:

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

2. Async / await jeneratörlere complilation izin vermek için benim .babelrc güncelleştirmek gerekiyordu:

   {
     "hazır ayarlar": ["es2015"],
     "plugins": ["zaman uyumsuz-jeneratöre dönüştürme"]
   }

DevDependencies:

DevDependencies'e benim package.json dosyamda da birkaç şey yüklemem gerekiyordu. Yani, babel-plugin-transform-async-to-generator, babel-polyfill ve babel-preset-es2015'i kaçırıyordum:

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

Tam Kod Özeti:

Kodu burada bulabileceğiniz gerçekten yararlı ve özlü bir GitHub gist'ten aldım .

Bu sorunu Chrome'da yaşadım. RienNeVaPlu͢s'un cevabına benzer şekilde, bu benim için çözdü:

npm install --save-dev regenerator-runtime

Sonra benim kod:

import 'regenerator-runtime/runtime';

Ekstra 200 KB'den kaçınmaktan mutluluk duyarız babel-polyfill.

Bir hata alıyorsunuz, çünkü zaman uyumsuz / beklemede ES2016 değil, ES2016 özelliği olan jeneratörler kullanılıyor. Bunu düzeltmenin bir yolu, ES2016 ( npm install --save babel-preset-es2016) için babel ön ayarını yüklemek ve ES2015 yerine ES2016'ya derlemektir:

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

Diğer cevaplarda belirtildiği gibi, çoklu dolgular da kullanabilirsiniz (ancak diğer kod çalıştırmadan önce çoklu dolguyu yüklediğinizden emin olun ). Alternatif olarak, tüm çoklu dolgu bağımlılıklarını dahil etmek istemiyorsanız, babel-reenerator-runtime veya babel-plugin-transform-runtime'ı kullanabilirsiniz .

Bu hata, async/awaitişlevler uygun Babel eklentileri olmadan kullanıldığında ortaya çıkar . Mart 2020 itibariyle, yapmanız gereken tek şey aşağıdakiler olmalıdır. ( @babel/polyfillve kabul edilen çözümlerin birçoğu Babel'de kullanımdan kaldırılmıştır. Babel belgelerinde daha fazla bilgi edinin . )

Komut satırına şunu yazın:

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

Senin de babel.config.jsdosyaya, bu eklentisini @babel/plugin-transform-runtime. Not: Aşağıdaki örnek, yakın zamanda üzerinde çalıştığım küçük bir React / Node / Express projesi için sahip olduğum diğer hazır ayarları ve eklentileri içerir:

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

Babel-polyfill'i yükleyerek bu hatayı düzelttim

npm install babel-polyfill --save

daha sonra uygulamayı giriş noktama aktardım

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

test için dahil ettim - test betiğime babel-polyfill gerekli

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

Yeni Cevap Cevabımı neden takip ediyorsunuz?

Ans: Çünkü size en son Güncelleme sürümü npm projesiyle bir cevap vereceğim.

2017/04/14

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

Eğer Npm ve diğer tüm bu sürümü veya daha fazla UP sürümünü kullanın ... SO sadece değiştirmeniz gerekir:

webpack.config.js

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

webpack.config.jsDosyaları değiştirdikten sonra bu satırı kodunuzun üstüne ekleyin.

import "babel-polyfill";

Şimdi her şeyin yolunda olduğunu kontrol edin. Referans LINK

Ayrıca onun güzel cevap için teşekkürler # BrunoLM.

Desteklemem gereken hedeflenen tarayıcılar zaten async / bekliyor, ancak mocha testleri yazarken, uygun ayar olmadan hala bu hatayı aldım.

Ben googled makalelerin çoğu kabul cevap ve yüksek İhtiyacınız olmayan, burada ie cevapları olarak dahil güncelliğini yitirmiş durumda polyfill, babel-regenerator-runtime, babel-plugin-transform-runtime. vb Hedef tarayıcı (ler) zaten destekliyorsa zaman uyumsuz / bekliyoruz (tabii değil polyfill gerekirse)

Ben de kullanmak istemiyorum webpack.

Tyler Long'un cevabı, önerdiğinden beri aslında doğru yolda babel-preset-env(ancak başlangıçta polifilden bahsettiğinden önce atladım). Hâlâ ReferenceError: regeneratorRuntime is not definedilk başta anladım, çünkü hedefi belirlemediğim için bunun farkına vardım. Düğüm için hedef belirledikten sonra regeneratorRuntime hatasını düzeltirim ：

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

Babel7 kullanıcıları ve ParcelJS> = 1.10.0 kullanıcıları için

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

.babelrc

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

https://github.com/parcel-bundler/parcel/issues/1762 adresinden alınmıştır.

1 - babel-plugin-transform-async-modüle-yöntemi, babel-polyfil, bluebird, babel-preset-es2015, babel-core yükleyin:

npm install babel-plugin-transform-async-to-module-method babel-polyfill bluebird babel-preset-es2015 babel-core

2 - Js babel çoklu dolgunuzu ekleyin:

import 'babel-polyfill';

3 - .babelrc'nize eklenti ekleyin:

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

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

Webpack kullanarak ve mocha
ile bir kurulum yaptımpresets: ['es2015', 'stage-0']
webpack tarafından derlenen testleri çalıştıran yaptım.

Benim yapmak için async/awaittestlerde yapmam gereken işe eklenti olan mocha --require babel-polyfillseçeneği.

ES6 jeneratörlerini kullanmaya çalıştığımda bu hatayı toplama ile yudum kullanarak alıyorum:

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 }));
});

Ben çözüm babel-polyfillbower bileşeni olarak dahil etmek durumunda olabilir :

bower install babel-polyfill --save

ve index.html dosyasına bağımlılık olarak ekleyin:

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

babel-polyfill7 ^ sürümünü kullanmak isteyenler için bunu webpackver3 ^ ile yapın.

Npm modülü takın npm i -D @babel/polyfill

Sonra webpackdosyasında kendi entrynoktanızda bunu yapın

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

Benim rejeneratör çalışma zamanı ile tepki için çalışma babel 7 boilerplate:

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

....

Bir uygulamayı inşa ediyoruz, sadece ihtiyaç @babel/preset-envve @babel/polyfill:

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

(Not: core-jsveregenerator-runtime paketlerini çünkü ikisi de @ babel / polyfill tarafından yüklenecektir)

Sonra .babelrc:

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

Şimdi hedef ortamlarınızı ayarlayın. Burada, .browserslistrcdosyada yapıyoruz :

# Browsers that we support

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

Son olarak, gittiyseniz useBuiltIns: "entry", import @babel/polyfillgiriş dosyanızın en üstüne koyun . Aksi takdirde, işiniz bitti.

Bu yöntemi kullanmak, SADECE hedef ortamlarınızdan / tarayıcılarınızdan herhangi biri tarafından ihtiyaç duyuluyorsa, bu çoklu dolguları ve 'rejeneratör çalışma zamanı' dosyasını seçerek içe aktarır ( regeneratorRuntime is not definedsorununuzu burada giderir).

ileride başvurmak için :

Babel sürüm 7.0.0-beta.55 aşaması ön ayarları kaldırıldı

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

async bekliyor hala tarafından kullanılabilir

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

Kurulum

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

.babelrc içinde kullanım

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

ve babil polyfill kullanarak https://babeljs.io/docs/en/babel-polyfill

Kurulum

npm install --save @babel/polyfill

webpack.config.js

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

2019 yılında Babel 7.4.0+, babel-polyfillpaket doğrudan core-js/stable( core-js@3+ECMAScript özelliklerini regenerator-runtime/runtimeçoklu doldurmak için ) ve (aktarılan jeneratör işlevlerini kullanmak için gerekli ) lehine kullanımdan kaldırılmıştır :

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

Alınan bilgiler babel-polyfill belgeler .

Konsolunuzdaki bu 'regeneratorRuntime tanımlanmadı sorununu' çözmenin en kolay yolu:

Gereksiz eklentiler kurmanız gerekmez. Sadece ekle:

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

index.html dosyasında gövdenin içine yerleştirin. Şimdi baben çalıştırıldıktan sonra regeneratorRuntime tanımlanmalıdır ve şimdi async / await işlevleriniz başarıyla ES2015'e derlenmelidir

Bir kullanıcı arabirimi için Gulp + Babel kullanıyorsanız babel-polyfill kullanmanız gerekir

npm install babel-polyfill

ve sonra index.html dosyasına diğer tüm komut dosyası etiketlerinin üzerine bir komut dosyası ekleyin ve düğüm_modüllerinden babel-polyfill'e bakın