बैबल 6 रीजेनरेटररंटाइम को परिभाषित नहीं किया गया है

Question

मैं async का उपयोग करने की कोशिश कर रहा हूँ, Babel 6 पर खरोंच से इंतजार कर रहा हूँ, लेकिन मुझे regeneratorRuntime मिल रहा है।

.babelrc फ़ाइल

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

package.json फ़ाइल

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

.js फ़ाइल

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

सामान्य रूप से async / प्रतीक्षा के बिना इसका उपयोग करना ठीक काम करता है। किसी भी विचार मैं गलत क्या कर रहा हूँ?

Comments

क्या आपने पुनर्योजी को शामिल किया है?

— 17

बेबल-पॉलीफिल वही है जो आपको चाहिए।

— रॉनी रोइस्टन

बाबेल-पॉलीफिल को 7.4 के रूप में मूल्यह्रास किया गया है; यह अपडेट किया गया इसलिए पोस्ट माइग्रेशन का वर्णन करता है।

— JWCS

बेबल और नोड के नए संस्करणों का उपयोग करने वालों के लिए: stackoverflow.com/a/62254909/8169904

— सोम

Answer 1

babel-polyfill( बाबेल 7.4 के रूप में पदावनत ) की आवश्यकता है। काम करने के लिए आपको async / प्रतीक्षा करने के लिए भी इसे स्थापित करना होगा।

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 async / प्रतीक्षा के साथ (नमूना कोड)

"use strict";

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

function bar() {
  return "bar";
}

स्टार्टअप फाइल में

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

यदि आप वेबपैक का उपयोग कर रहे हैं, तो आपको इसे entryअपने वेबप कॉन्फ़िगरेशन फ़ाइल (आमतौर पर webpack.config.js) में अपने सरणी के पहले मूल्य के रूप में डालने की आवश्यकता है , जैसा कि @Cemen टिप्पणी के अनुसार:

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

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

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

यदि आप बेबल के साथ परीक्षण चलाना चाहते हैं तो उपयोग करें:

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

Comments

जब आप वेबपैक के साथ बेबल का उपयोग कर रहे हैं, तो महत्वपूर्ण: उपयोग करने के बजाय require("babel-polyfill")जो काम नहीं कर रहा है, आप इस तरह से "babel-polyfill"अपने entryकॉन्फ़िगरेशन में जोड़ें entry: ["babel-polyfill", "src/main.js"]:। इसने मेरे लिए काम किया, जिसमें HMR के साथ webpack-dev-server का उपयोग भी शामिल था।

— Cemen

मैं babel6 और async के साथ चलने के लिए अपने मोचा परीक्षण प्राप्त करने की कोशिश कर रहा था और मुझे npm टेस्ट रनर कॉन्फ़िगरेशन के लिए --require babel-polyfill को जोड़ना था

— arisalexis

के लिए कोलाहल-रजिस्टर क्या है?

— trusktr

@ लॉयड devDependencyयदि आप वेबपैक का उपयोग कर रहे हैं क्योंकि यह चलने से पहले फाइलों को "कंपाइल" करेगा। dependencyयदि आप वेबपैक का उपयोग नहीं कर रहे हैं और आपको बेबल की आवश्यकता है।

— ब्रूनोएलएम

यह आउटपुट फ़ाइल के आकार को विशाल बनाता है ... सीधे उपयोग करने के लिए बेहतर है कि आपको सीधे बैबेल-पॉलीफिल की आवश्यकता के बजाय क्या चाहिए।

— इनक गमूस

Answer 2

पॉलीफिल के अलावा, मैं बैबल-प्लगइन-ट्रांसफॉर्म-रनटाइम का उपयोग करता हूं । प्लगइन के रूप में वर्णित है:

हेल्पर्स और बिल्डिंस के संदर्भों को बाहरी करें, ग्लोबल्स को प्रदूषित किए बिना अपने कोड को स्वचालित रूप से पॉलीफ़िल करें। हालांकि वास्तव में इसका क्या मतलब है? मूल रूप से, आप बिल्ट-इन जैसे प्रॉमिस, सेट, सिंबल आदि का उपयोग कर सकते हैं और साथ ही उन सभी बैबेल फीचर्स का उपयोग कर सकते हैं, जिन्हें वैश्विक रूप से प्रदूषण रहित पॉलीफिल की आवश्यकता होती है, जिससे यह पुस्तकालयों के लिए बेहद उपयुक्त है।

इसमें ES 6 के अन्य बिल्ट-इन के साथ async / प्रतीक्षा का समर्थन भी शामिल है।

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

में .babelrc, रनटाइम प्लगइन जोड़ें

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

नोट यदि आप babel 7 का उपयोग कर रहे हैं, तो पैकेज का नाम बदलकर @ babel / plugin-transform-runtime कर दिया गया है ।

Comments

मुझे काम babel-runtimeकरने के लिए async प्रतीक्षा करने की आवश्यकता नहीं थी । क्या वो सही है? संपादित करें: मैं कोड सर्वर साइड चला रहा हूं। :)

— गिज्जनबी

यदि आप इसे बेबल-रनटाइम के बिना उपयोग करने में सक्षम थे, तो यह इसलिए है क्योंकि यह पहले से ही आपके निर्भरता के पेड़ में है। तो ध्यान रखें कि यदि आप एक पुस्तकालय लिख रहे हैं, और बेबल-रनटाइम एक देव निर्भरता के रूप में आ रहा है, तो यह आपके उपयोगकर्ताओं के लिए नहीं हो सकता है। आपको इसे वितरण के लिए एक सामान्य निर्भरता के रूप में शामिल करना होगा।

— नेवॉक्स

केवल babel-plugin-transform-runtimeआवश्यकता है। एक जादू की तरह काम करता है।

— सैक

यह समाधान ठीक नहीं है क्योंकि इसे प्लगइन requireद्वारा जोड़े गए कॉल का विस्तार करने के लिए एक अतिरिक्त ब्राउज़रफाइ या वेबपैक नौकरी की आवश्यकता होती है transform-runtime।

— चालाकी

ध्यान दें कि बैबल 7 के लिए आपको चलाने की आवश्यकता हैnpm install --save-dev @babel/plugin-transform-runtime

— एंड्री सेमकिन

Answer 3

7 उपयोगकर्ता

मुझे इसके बारे में कुछ परेशानी हो रही थी क्योंकि अधिकांश जानकारी पहले के बेबल संस्करणों के लिए थी। बैबल 7 के लिए, इन दो निर्भरताओं को स्थापित करें:

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

और, .babelrc में जोड़ें:

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

Comments

हम इसे बिना .babelrc (केवल वेबपैक कॉन्फ़िगर फ़ाइल का उपयोग किए) कैसे कर सकते हैं

— Pouya Jabbarisani

डॉक यहां के "plugins": ["@babel/plugin-transform-runtime"]बजाय उपयोग को दिखाता "plugins": [ ["@babel/transform-runtime"] ]है। अलग प्लगइन नाम। दोनों काम करते हैं। लेकिन कौन सा उचित है? ..

— किवॉ

मुझे इस विधि का पालन करते समय आवश्यकता नहीं है परिभाषित किया गया है

— बैटमैन

@kyw हमेशा डॉक्स का पालन करने के लिए सबसे अच्छा है - सम्मेलन के अलावा कोई अंतर नहीं।

— मैट शर्ली

@babel/transform-runtimeमेरे लिए "निर्यात परिभाषित नहीं है" त्रुटि के कारण प्लगइन्स में जोड़ना । मैंने इसे बदलकर असेंबली में काम करने के लिए बैबेल 7 में ले लिया:["@babel/plugin-transform-runtime", { "regenerator": true } ]

— हरि

Answer 4

अपडेट करें

यदि आप Chrome को लक्ष्य निर्धारित करते हैं तो यह काम करता है। लेकिन यह अन्य लक्ष्यों के लिए काम नहीं कर सकता है, कृपया देखें: https://github.com/babel/babel-preset-env/issues/112

इसलिए यह प्रश्न मूल प्रश्न के लिए बिल्कुल उचित नहीं है। मैं इसे यहां एक संदर्भ के रूप में रखूंगा babel-preset-env।

एक सरल उपाय है import 'babel-polyfill'अपने कोड की शुरुआत में जोड़ना ।

यदि आप वेबपैक का उपयोग करते हैं, तो एक त्वरित समाधान babel-polyfillनीचे दिखाए अनुसार जोड़ना है :

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

मुझे विश्वास है कि मैंने नवीनतम सर्वोत्तम अभ्यास पाया है।

इस परियोजना की जाँच करें: https://github.com/babel/babel-preset-env

yarn add --dev babel-preset-env

अपने बेबल कॉन्फ़िगरेशन के रूप में निम्नलिखित का उपयोग करें:

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

फिर Chrome ब्राउज़र के अंतिम 2 संस्करणों में जाने के लिए आपका ऐप अच्छा होना चाहिए।

आप नोड्स को लक्ष्य के रूप में भी सेट कर सकते हैं या https://github.com/ai/browserslist के अनुसार ब्राउज़र सूची को ठीक कर सकते हैं

मुझे बताओ, मुझे बताओ कैसे नहीं।

मैं वास्तव में babel-preset-envदर्शन को पसंद करता हूं: मुझे बताएं कि आप किस वातावरण का समर्थन करना चाहते हैं, मुझे नहीं बताएं कि उनका समर्थन कैसे करना है। यह घोषणात्मक प्रोग्रामिंग की सुंदरता है।

मैंने परीक्षण किया है async awaitऔर वे काम करते हैं। मैं नहीं जानता कि वे कैसे काम करते हैं और मैं वास्तव में जानना नहीं चाहता। मैं अपना समय अपने बजाय अपने कोड और अपने व्यावसायिक तर्क पर बिताना चाहता हूं। के लिए धन्यवाद babel-preset-env, यह मुझे बाबेल विन्यास नरक से मुक्त करता है।

Comments

यह वास्तव में काम करता है। केवल नकारात्मक पक्ष निर्भरता का एक गुच्छा है जिसे babel-preset-envमैंने खींचा है लेकिन मुझे लगता है कि यह इसके लायक है। घोषणात्मक शैली से भी प्यार है। yarn installअब यह भी हैyarn add

— 22:36 पर रोमन Usherenko

@gargantuan हाँ यह करता है।

— टायलर लांग

यदि आप पुराने ब्राउज़रों या नोड संस्करणों को लक्षित करना चाहते हैं तो वास्तव में समाधान नहीं है ।

— रोहन ऑर्टन

अगर यह स्पष्ट नहीं है तो बस यह .... यह अनुशंसित समाधान काम नहीं करेगा यदि आपको IE11 में काम करने के लिए अपने कोड की आवश्यकता है

— मौरिस

इसके पास इतने वोट क्यों हैं? यह केवल इसलिए काम करता है क्योंकि यह अब async / wait को रूपांतरित नहीं करता है और इस प्रकार अब regeneratorRuntime की आवश्यकता नहीं है और क्योंकि यह रूपांतरित नहीं है यह उन ब्राउज़र पर काम नहीं करेगा जो इसका समर्थन नहीं करते हैं।

— शिकोय

Answer 5

वैकल्पिक रूप से, यदि आपको सभी मॉड्यूल babel-polyfillप्रदान करने की आवश्यकता नहीं है, तो आप babel-regenerator-runtimeअपने वेबपैक विन्यास में निर्दिष्ट कर सकते हैं :

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

  // ...
};

एचएमआर के साथ वेबपैक-डेव-सर्वर का उपयोग करते समय, ऐसा करने से फाइलों की संख्या कम हो जाती है, जिसे हर बिल्ड पर काफी संकलन करना पड़ता है। babel-polyfillयदि आप पहले से ही ठीक हैं, तो यह मॉड्यूल इसके भाग के रूप में स्थापित है, अन्यथा आप इसे अलग से स्थापित कर सकते हैं npm i -D babel-regenerator-runtime।

Comments

यह सबसे सुविधाजनक समाधान प्रतीत होता है। हालांकि, अधिकांश ब्राउज़र जनरेटर का समर्थन करते हैं, इसलिए यह समाधान संभवतः इष्टतम नहीं है। देखें: blogs.candoerz.com/question/213492/…

— कीतानोत्री

यदि आप वेबपैक का उपयोग नहीं कर रहे हैं तो क्या होगा?

— बैटमैन

Answer 6

मेरा सरल समाधान:

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

Comments

आपको प्लगइन्स में "ट्रांसफ़ॉर्म-एस्कॉन-टू-जनरेटर" याद आ रहा है। मुझे इसे जोड़ने के लिए काम करना था

— गेब्रियलबी

@GabrielBB मैंने पोस्ट को संपादित किया है इसलिए यह एक पूर्ण उदाहरण है।

— वेबनोब

की loose: trueजरूरत है?

— टॉम सोर्डलंड

इसका उपयोग करते समय यह मेरी फ़ाइल में आवश्यकता जोड़ता है और आवश्यकता ब्राउज़र में अपरिभाषित है।

— बैटमैन

ढीला: सच की जरूरत नहीं है। आपको अपने .babelrc में वास्तव में क्या चाहिए: {"presets": ["es2015", "प्रतिक्रिया", "चरण -2"], "प्लगइन्स": ["ट्रांसफ़ॉर्म-रनटाइम", "ट्रांसफॉर्म-एसिंक्स-टू-जनरेटर "]}

— एफे एरारो

Answer 7

बेबल 7.4.0 या बाद का (कोर-जेएस 2/3)

के रूप में कोलाहल 7.4.0 , @babel/polyfill है पदावनत ।

सामान्य तौर पर, पॉलिफ़िल्स / रीजेनरेटर स्थापित करने के दो तरीके हैं: वैश्विक नाम स्थान (विकल्प 1) के माध्यम से या पोनीफ़िल (विकल्प 2, वैश्विक प्रदूषण के बिना)।

---

विकल्प 1: @babel/preset-env

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

स्वचालित रूप से उपयोग करेंगे regenerator-runtimeऔर core-jsआपके लक्ष्य के अनुसार । मैन्युअल रूप से कुछ भी आयात करने की आवश्यकता नहीं है। रनटाइम निर्भरता स्थापित करने के लिए मत भूलना:

npm i --save regenerator-runtime core-js

वैकल्पिक रूप से, useBuiltIns: "entry"इसे मैन्युअल रूप से सेट और आयात करें:

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

---

विकल्प 2: @babel/transform-runtime के साथ @babel/runtime(कोई वैश्विक क्षेत्र प्रदूषण)

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

इसे स्थापित करो:

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

यदि आप कोर-जेएस पॉलीफ़िल का उपयोग करते हैं, तो आप स्थापित @babel/runtime-corejs2या @babel/runtime-corejs3इसके बजाय, यहां देखें ।

चियर्स

Comments

यह सही है, सबसे अधिक जवाब देने के लिए और मेरी वर्तमान परियोजना पर एक समस्या के साथ मेरी मदद की। धन्यवाद!

— cdpautsch

{"प्रीसेट्स": [["@ बबैल / प्रीसेट-एनव", {"लक्ष्य": {"एस्मोड्यूल्स": सच}}]]} इससे मुझे एक नोड के लिए मदद मिली है। जेएस बिल्ड

— पावेल

मेरा मतलब है कि मैं जानता था कि पहले से ही लेकिन दूसरों की मदद करने के लिए यह सही उत्तर होना चाहिए। सादर!

— Niewiadomski Paweł

नोट: मुझे लगता है, यह बाबेल 7 धागे का उपयोग करने के लिए समझ में आता है , इसलिए संस्करण संबंधी त्रुटियों को बेहतर रूप से पहचाना जा सकता है। आप इस उत्तर का अधिक विशिष्ट संस्करण यहां पा सकते हैं (लेकिन उपरोक्त कथन अभी भी सत्य हैं)

— ford04

Answer 8

babel-regenerator-runtimeअब पदावनत किया जाता है , इसके बजाय एक का उपयोग करना चाहिएregenerator-runtime ।

के साथ webpackऔर रनटाइम जनरेटर का उपयोग करने के लिएbabel v7 के :

स्थापित करें regenerator-runtime:

npm i -D regenerator-runtime

और फिर वेबपैक कॉन्फ़िगरेशन में जोड़ें:

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

Comments

यह स्वीकृत उत्तर होना चाहिए,

— बैबेल

मेरे लिए एकदम सही काम ... बहुत बहुत धन्यवाद

— विलियम

इस पद्धति में हमेशा रनटाइम शामिल होता है। मेरा मानना है कि यह करने के उद्देश्य धरा @babel/preset-envका useBuiltInsगतिशील रूप से अपने लक्ष्य ब्राउज़र के आधार पर क्रम डालने से।

— kyw

Answer 9

अपना अपडेट करें .babelrc फ़ाइल को निम्न उदाहरणों के अनुसार , यह काम करेगा।

यदि आप @babel/preset-envपैकेज का उपयोग कर रहे हैं

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

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

Comments

कृपया अपना उत्तर बताएं? "नोड" क्या है: "वर्तमान" करता है

— विशाल सोलंकी

मैं यह भी जानना चाहता हूं कि यह क्या करता है और यदि यह एक अनुशंसित समाधान है - अर्थात यह किसी भी चीज को खतरे में नहीं डालता है और यह "भविष्य का प्रमाण" है (फिलहाल कुछ भी हो सकता है)। targetsउल्लेख करने के लिए लगता है इस : the environments you support/target for your project, जबकि targets.nodeहै यह : if you want to compile against the current node version, you can specify "node": true or "node": "current", which would be the same as "node": process.versions.node

— user1063287

एफडब्ल्यूआईडब्ल्यू, मैंने उत्तर में परिभाषित दूसरे ब्लॉक का उपयोग किया (और "stage-0"प्रक्रिया में हटा दिया गया) और पुनर्योजी त्रुटि चली गई।

— user1063287

@BunkerBoy सुविधा के लिए, आप "नोड" का उपयोग कर सकते हैं: "वर्तमान" में केवल आवश्यक पॉलीफ़िल शामिल हैं और Node.js संस्करण के लिए ट्रांसफ़ॉर्म शामिल हैं, जिसे आप Babel

— Zero

तो इसके लिए मुझे पॉलीफ़िल्स स्थापित करने की आवश्यकता नहीं है?

— विशाल सोलंकी

Answer 10

फहराए गए कार्यों से सावधान रहें

मेरे पास एक ही फाइल में मेरा 'पॉलीफ़िल आयात' और मेरा 'async फ़ंक्शन' दोनों थे, हालाँकि मैं फ़ंक्शन सिंटैक्स का उपयोग कर रहा था जो इसे पॉलीफ़िल के ऊपर लहराता था जो मुझे देता था ReferenceError: regeneratorRuntime is not defined त्रुटि देगा।

इस कोड को बदलें

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

इसके लिए

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

इसे रोकने के लिए इसे पॉलीफिल आयात से ऊपर फहराया जाए।

Comments

ए; किलबज्लर्सदकजफजसनकलजफजबकल्फदलदबजलजफ्ल; उदास मैं अपना दिमाग खो रहा था और आपने मुझे आई लव यू बचा लिया है

— जॉन आर पेरी

Answer 11

अक्टूबर 2019 तक यह मेरे लिए काम कर रहा है:

इसे प्रीसेट में जोड़ें।

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

फिर npm का उपयोग करके पुनर्योजी-रनटाइम स्थापित करें।

npm i regenerator-runtime

और फिर आपके मुख्य फ़ाइल उपयोग में: (यह आयात केवल एक बार उपयोग किया जाता है)

import "regenerator-runtime/runtime";

यह आपको async awaitsअपनी फ़ाइल में उपयोग करने और हटाने में सक्षम करेगाregenerator error

Comments

इसके लिए कोई मान सेट नहीं करने पर useBuiltInsयह डिफ़ॉल्ट हो जाएगा false। यह लक्ष्य वातावरण के आधार पर किसी भी पॉलीफ़िल को ऑटो आयात नहीं करेगा, जो थोड़े के उद्देश्य को कम करता है "@babel/preset-env"। यहाँ भी एक से एक संबंधित टिप्पणी है Babel Developers।

— बेला 53

Answer 12

अगर उपयोग करना है babel-preset-stage-2तो बस स्क्रिप्ट को शुरू करना है--require babel-polyfill ।

मेरे मामले में यह त्रुटि थी Mocha परीक्षणों ।

इस मुद्दे को तय किया

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

Answer 13

मुझे अपनी परियोजना को टाइपस्क्रिप्ट प्रोजेक्ट में बदलने के बाद यह त्रुटि मिलनी शुरू हुई। मैं जो समझता हूं, वह समस्या async से उपजी है / नहीं पहचाना जा रहा है।

मेरे लिए मेरे सेटअप में दो चीज़ें जोड़कर त्रुटि ठीक की गई:

1. जैसा कि ऊपर कई बार बताया गया है, मुझे अपने वेबपैक प्रविष्टि सरणी में बेबल-पॉलीफिल जोड़ने की आवश्यकता है:

   ...
   
   प्रविष्टि: ['बैबल-पॉलीफ़िल', './index.js'],
   
   ...

2. मुझे अपने .babelrc को अद्यतन करने की आवश्यकता है, जो कि async की जटिलता की अनुमति देता है / जनरेटर में प्रतीक्षा करता है:

   {
     "प्रीसेट": ["es2015"],
     "प्लगइन्स": ["ट्रांसफॉर्म-एसिंक्स-टू-जनरेटर"]
   }

DevDependencies:

मुझे अपने पैकेज में कुछ बातों को अपनी निर्भरता में स्थापित करना पड़ा। अर्थात्, मुझे बाबेल-प्लगइन-ट्रांसफॉर्मेशन-एसिंक्स-टू-जनरेटर, बैबेल-पॉलीफिल और बैबेल-प्रीसेट-एसस २०१५ याद आ रहा था:

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

पूर्ण कोड जिप:

मुझे एक बहुत ही उपयोगी और संक्षिप्त GitHub गिस्ट से कोड मिला है जिसे आप यहां पा सकते हैं ।

Comments

इसके envबजाय प्रीसेट का उपयोग करना बेहतर है es2015। पहले से ही envशामिल है es2015।

— न्यूरोट्रांसमीटर

Answer 14

मुझे क्रोम में यह समस्या थी। RienNeVaPlu͢s के उत्तर के समान, इसने मेरे लिए इसे हल किया:

npm install --save-dev regenerator-runtime

फिर मेरे कोड में:

import 'regenerator-runtime/runtime';

अतिरिक्त 200 kB से बचने के लिए खुश babel-polyfill।

Answer 15

आपको एक त्रुटि मिल रही है क्योंकि async / wait उपयोग जनरेटर, जो कि ES2016 सुविधा है, ES2015 नहीं। इसे ठीक करने का एक तरीका ES2016 के लिए बैबल प्रीसेट स्थापित करना है ( npm install --save babel-preset-es2016) और ES2016 के बजाय ES2016 के लिए संकलन करें:

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

जैसा कि अन्य उत्तर में उल्लेख किया गया है, आप पॉलीफ़िल का उपयोग भी कर सकते हैं (हालांकि यह सुनिश्चित करें कि आप किसी अन्य कोड रन से पहले पॉलीफ़िल को पहले लोड करते हैं )। वैकल्पिक रूप से, यदि आप पॉलीफ़िल निर्भरता के सभी को शामिल नहीं करना चाहते हैं, तो आप बेबल-रीजनरेटर-रनटाइम या बैबल-प्लगइन-ट्रांसफ़ॉर्म-रनटाइम का उपयोग कर सकते हैं ।

Answer 16

मैंने बैबल-पॉलीफिल स्थापित करके इस त्रुटि को ठीक किया

npm install babel-polyfill --save

फिर मैंने इसे अपने ऐप प्रविष्टि बिंदु में आयात किया

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

परीक्षण के लिए मैंने अपनी टेस्ट स्क्रिप्ट में ब्रीफेल-पॉलीफ़िल शामिल किया

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

Answer 17

यह त्रुटि तब होती है जब async/awaitउचित बैबल प्लगइन्स के बिना फ़ंक्शन का उपयोग किया जाता है। मार्च 2020 तक, आपको निम्नलिखित सभी कार्य करने चाहिए। ( @babel/polyfillऔर बहुत से स्वीकृत समाधानों को बाबेल में पदावनत कर दिया गया है। बाबेल डॉक्स में और पढ़ें । )

कमांड लाइन में, टाइप करें:

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

अपनी babel.config.jsफ़ाइल में, इस प्लगइन को जोड़ें @babel/plugin-transform-runtime। नोट: नीचे दिए गए उदाहरण में अन्य प्रीसेट और प्लगइन्स शामिल हैं जो मेरे पास एक छोटे रिएक्ट / नोड / एक्सप्रेस प्रोजेक्ट के लिए हैं जो मैंने हाल ही में काम किया है:

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

Comments

मुझे हमेशा आश्चर्य होता है कि डेवलपर्स कैसे आलसी हैं। बाबेल देवों ने कार्यक्षमता को कम करने का फैसला किया, वे उम्मीद कर सकते हैं कि यह एक मुद्दा बन जाएगा। क्यों नहीं लोगों को पता है कि सबसे अधिक संभावित इरादा क्या था, और उन्हें इसे ठीक करने के लिए क्या करना चाहिए। लेकिन नहीं, चलो बस कुछ संदेश दिखाते हैं जो newbies के लिए बेकार है।

— पावेल वोरोनिन

यह काम नहीं करता imgur.com/a/2Ea8WDk

— असंभव

मेरे लिए बहुत अच्छा काम किया। मेरी गैर-प्रतिक्रिया परियोजना .babelrcइस तरह दिखती है: `` `{" प्रीसेट ": [" @ babel / प्रीसेट-एनवी "]," प्लगइन्स ": [" @ बेबल / प्लगइन-ट्रांसफॉर्म-रनटाइम "]}` ``

— एंथनी

Answer 18

नया उत्तर आप मेरे उत्तर का अनुसरण क्यों करते हैं?

उत्तर: क्योंकि मैं आपको नवीनतम अपडेट संस्करण npm प्रोजेक्ट के साथ उत्तर देने जा रहा हूं।

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"

यदि आपका Npm और अन्य सभी संस्करणों के इस संस्करण या अधिक यूपी संस्करण का उपयोग करें ... तो बस बदलने की आवश्यकता है:

webpack.config.js

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

webpack.config.jsफ़ाइलों को बदलने के बाद अपने कोड के शीर्ष पर बस इस पंक्ति को जोड़ें।

import "babel-polyfill";

अब सब कुछ ठीक है की जाँच करें। संदर्भ लिंक

इसके अलावा @BrunoLM को उनके अच्छे उत्तर के लिए धन्यवाद।

Comments

अगर वह बैकएंड सेवा है तो वह वेबपैक का उपयोग क्यों करेगा? आपके उत्तर का अर्थ है कि उसे वेबपैक का उपयोग करना है?

— स्पॉक

@ एस्कॉक, मैंने इसके बारे में सोचा। मैं एक ही समस्या का सामना कर रहा था और मैंने अपनी समस्या को इस सरल तरीके से हल किया। मुझे लगता है कि यह वेबपैक उपयोगकर्ता के लिए सकारात्मक उत्तर है और हरेक के पास अधिक सही उत्तर है ताकि आप किसी भी अभिगमन का अनुसरण कर सकें।

— एमडी आशिक

क्यों आप बात करने के लिए आप नीचे वोट की जरूरत है !!!! अगर आप मेरी मदद करना चाहते हैं तो क्या आप इसका कारण कह सकते हैं?

— एमडी आशिक

Answer 19

लक्षित ब्राउज़रों को मुझे पहले से ही async / प्रतीक्षा का समर्थन करने की आवश्यकता है, लेकिन जब मोचा परीक्षण लिखते हैं, तो उचित सेटिंग के बिना मुझे अभी भी यह त्रुटि मिली है।

लेख मैं googled के अधिकांश सहित स्वीकार किए जाते हैं जवाब और उच्च जवाब यहां मतदान किया, यानी आप की जरूरत नहीं है, पुराने हो गए हैं polyfill, babel-regenerator-runtime, babel-plugin-transform-runtime। आदि यदि आपका टारगेट ब्राउजर पहले से ही एसिंक्स / वेट का समर्थन करता है (बेशक अगर आपको पॉलीफिल की जरूरत नहीं है)

मैं webpackया तो उपयोग नहीं करना चाहता ।

टायलर लॉन्ग का उत्तर वास्तव में सही रास्ते पर है क्योंकि उन्होंने सुझाव दिया था babel-preset-env(लेकिन मैंने इसे पहले छोड़ दिया क्योंकि उन्होंने शुरुआत में पॉलीफिल का उल्लेख किया था)। मुझे अभी भी ReferenceError: regeneratorRuntime is not definedसबसे पहले मिला था तब मुझे एहसास हुआ कि मैंने लक्ष्य निर्धारित नहीं किया था। नोड के लिए लक्ष्य निर्धारित करने के बाद, मैं regenerator रनटाइम त्रुटि को ठीक करता हूं node

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

Answer 20

Babel7 उपयोगकर्ताओं और ParcelJS> = 1.10.0 उपयोगकर्ताओं के लिए

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 से लिया गया

Answer 21

1 - बाबेल-प्लगइन-ट्रांसफॉर्मेशन-एसिंक्स-टू-मॉड्यूल-विधि, बैबेल-पॉलीफ़िल, ब्लूबर्ड, बैबेल-प्रीसेट-एएस2015, बेबल-कोर स्थापित करें:

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

2 - अपने जेएस बेबल पॉलीफिल में जोड़ें:

import 'babel-polyfill';

3 - अपने .babelrc में प्लगइन जोड़ें:

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

स्रोत: http://babeljs.io/docs/plugins/transform-async-to-module-betheth/

Answer 22

मेरे पास वेबपैक का उपयोग करने और मोचा के
साथ एक सेटअप था जो वेबपैक द्वारा संकलित परीक्षण चला रहा था।presets: ['es2015', 'stage-0']

async/awaitपरीक्षणों में अपना काम करने के लिए मुझे केवल इतना करना होगा कि mocha --require babel-polyfillविकल्प जोड़ें ।

Answer 23

जब मैंने ES6 जनरेटर का उपयोग करने की कोशिश की तो मुझे रोलअप के साथ gulp का उपयोग करने में यह त्रुटि मिली:

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

मैं इस मामले को हल कर सकता हूं babel-polyfillकि बोवर घटक के रूप में शामिल किया गया था :

bower install babel-polyfill --save

और इसे index.html में निर्भरता के रूप में जोड़ें:

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

Comments

धन्यवाद। इसने मेरे लिए काम किया। मुझे नहीं पता था कि क्लाइंट साइड में काम करने के लिए मुझे स्क्रिप्ट टैग को जोड़ना होगा।

— रज़ा

Answer 24

babel-polyfillसंस्करण 7 ^ का उपयोग करने के इच्छुक लोगों के लिए webpackver3 ^ के साथ ऐसा करें ।

Npm मॉड्यूल स्थापित करें npm i -D @babel/polyfill

फिर webpackआपके entryबिंदु में आपकी फ़ाइल में ऐसा करते हैं

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

Answer 25

पुनर्योजी रनटाइम के साथ प्रतिक्रिया के लिए मेरा काम करने वाला बेबल 7 बॉयलरप्लेट:

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

....

Answer 26

यदि आप एक ऐप बना रहे हैं, तो आपको बस @babel/preset-envऔर चाहिए @babel/polyfill:

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

(ध्यान दें: आपको पैकेज core-jsऔर regenerator-runtimeपैकेज स्थापित करने की आवश्यकता नहीं है क्योंकि वे दोनों @ बैबल / पॉलीफ़िल द्वारा स्थापित किए गए होंगे)

फिर में .babelrc:

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

अब अपने लक्षित वातावरण सेट करें। यहाँ, हम इसे .browserslistrcफाइल में करते हैं:

# Browsers that we support

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

अंत में, यदि आप साथ गए थे useBuiltIns: "entry", डाल दियाimport @babel/polyfill अपनी प्रविष्टि फ़ाइल के शीर्ष पर। अन्यथा, आप कर रहे हैं।

इस पद्धति का उपयोग करके चुनिंदा रूप से उन पॉलीफ़िल्स और 'पुनर्योजी-रनटाइम' फ़ाइल (आपकी regeneratorRuntime is not definedसमस्या को यहां ठीक करना ) को केवल तभी आयात किया जाएगा जब उन्हें आपके किसी लक्षित वातावरण / ब्राउज़र द्वारा आवश्यक हो।

Answer 27

भविष्य के संदर्भ के लिए :

बैबल वर्जन के रूप में 7.0.0-beta.55 स्टेज प्रीसेट को हटा दिया गया है

ब्लॉग देखें https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

async प्रतीक्षा का उपयोग अभी भी किया जा सकता है

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

स्थापना

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

में उपयोग .babelrc

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

और बेबल पॉलीफिल https://babeljs.io/docs/en/babel-polyfill का उपयोग कर रहा है

स्थापना

npm install --save @babel/polyfill

webpack.config.js

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

Answer 28

2019 के साथ Babel 7.4.0+, babel-polyfillपैकेज को सीधे core-js/stable( जिसमें पॉलीफिल ईसीएमएस्क्रिप्ट फीचर्स को शामिल करने के लिए core-js@3+) और regenerator-runtime/runtime(ट्रांसप्लेंड जनरेटर कार्यों का उपयोग करने की आवश्यकता ) सहित शामिल किया गया है :

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

babel-polyfill प्रलेखन से जानकारी ।

Answer 29

अपने कंसोल में इस 'रीजेनरेटररंट डिफाइन्ड नॉट डिफाइन इश्यू' को ठीक करने का सबसे आसान तरीका:

आपको कोई अनावश्यक प्लग इन स्थापित करने की आवश्यकता नहीं है। बस जोड़ दो:

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

आपके index.html में शरीर के अंदर। अब पुनर्जननकर्ता को परिभाषित किया जाना चाहिए जब आप कोलाहल करते हैं और अब आपके async / प्रतीक्षा कार्यों को ES2015 में सफलतापूर्वक संकलित किया जाना चाहिए

Answer 30

यदि आप एक दृश्यपटल के लिए Gulp + Babel का उपयोग कर रहे हैं, तो आपको babel-polyfill का उपयोग करने की आवश्यकता है

npm install babel-polyfill

और फिर सभी अन्य स्क्रिप्ट टैग्स के ऊपर index.html में एक स्क्रिप्ट टैग जोड़ें और नोड_मॉड्यूल्स से बैबल-पॉलीफिल को संदर्भ दें

Comments

मैं नहीं देखता कि क्यों नीचे और टिप्पणी। मैं इसे फ़ायरफ़ॉक्स ब्राउज़र के लिए चाहता था। इसके अलावा, मैं सीधे बेबल वेबसाइट से ही जानकारी लेता हूं। टिप्पणी ने मुझे इस मुद्दे को हल करने में मदद नहीं की जब मैंने इसे आज़माया।

— पेट्रोस काइराकौ