বাবেল 6 পুনর্নির্মাণকালীন সময় সংজ্ঞায়িত করা হয় না

633

আমি অ্যাসিঙ্কটি ব্যবহার করার চেষ্টা করছি, বাবেল 6-এ স্ক্র্যাচ থেকে অপেক্ষা করুন, তবে আমি পুনর্নির্মাণকারী রানটাইমকে সংজ্ঞায়িত করা হচ্ছে না।

.babelrc ফাইল

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

প্যাকেজ.জসন ফাইল

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

অ্যাসিঙ্ক / প্রতীক্ষা ছাড়াই এটি সাধারণত ব্যবহার করা ঠিক কাজ করে। কোন ধারণা আমি কি ভুল করছি?

javascript  node.js  babeljs 
— BrunoLM
সূত্র
আপনি কি পুনর্গঠককে অন্তর্ভুক্ত করেছেন?
— ssube
3
বাবেল-পলিফিল আপনার যা প্রয়োজন।
— রনি রয়স্টন
বাবেল-পলিফিল 7.4 হিসাবে অবচয় করা হয়েছে; এই আপডেট তাই পোস্ট মাইগ্রেশন বর্ণনা করে।
— জেডব্লিউসিএস
যারা বাবেল এবং নোডের নতুন সংস্করণ ব্যবহার করছেন তাদের জন্য: stackoverflow.com/a/62254909/8169904
— সোম

উত্তর:

681

babel-polyfill( অবচিত হট্টগোল 7.4 এর হিসাবে) প্রয়োজন হয়। অ্যাসিঙ্ক / কাজের অপেক্ষার জন্য আপনাকে অবশ্যই এটি ইনস্টল করতে হবে।

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

আপনি যদি ওয়েবপ্যাক ব্যবহার করছেন তবে আপনার @Cemen মন্তব্য অনুসারে entryআপনার ওয়েবপ্যাক কনফিগারেশন ফাইলে (সাধারণত webpack.config.js) আপনার অ্যারের প্রথম মান হিসাবে এটি রাখা দরকার :

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
— BrunoLM
সূত্র
77
গুরুত্বপূর্ণ যখন আপনি webpack সঙ্গে Babel ব্যবহার করছেন: বদলে ব্যবহার require("babel-polyfill")যা কাজ করছে না, আপনি যোগ "babel-polyfill"আপনার মধ্যে entryকনফিগ মধ্যে, এভাবে: entry: ["babel-polyfill", "src/main.js"]। এটি এইচএমআর সহ ওয়েবপ্যাক-ডেভ-সার্ভারে ব্যবহার সহ আমার পক্ষে কাজ করেছে।
— সেমেন
6
আমি আমার মোচা টেস্টগুলি ব্যাবেল 6 এবং অ্যাসিঙ্কের সাথে চালানোর জন্য চেষ্টা করছিলাম এবং আমাকে এনপিএম পরীক্ষার রানার কনফিগারেশনে --require বাবেল-পলফিল যোগ করতে হয়েছিল
— এরিসালেক্সিস
13
বাবেল-নিবন্ধের জন্য কি?
— trusktr
6
@ লয়েড devDependencyআপনি যদি ওয়েবপ্যাক ব্যবহার করছেন তবে এটি চালানোর আগে ফাইলগুলি "সংকলন" করবে। dependencyআপনি যদি ওয়েবপ্যাকটি ব্যবহার না করে থাকেন এবং আপনার প্রয়োজন হয় requ
— BrunoLM
4
এটি আউটপুট ফাইলের আকারটিকে বিশাল করে তোলে ... কেবলমাত্র বাবেল-পলফিলের পরিবর্তে আপনার যা প্রয়োজন তা কেবল ব্যবহার করা আরও ভাল।
— ইনঙ্ক গুমাস
339

পলিফিল ছাড়াও, আমি ব্যাবেল -প্লাগইন-ট্রান্সফর্ম-রানটাইম ব্যবহার করি । প্লাগইনটি বর্ণনা করা হয়েছে:

সহায়তাকারীদের এবং বিল্টিনগুলিতে বাহ্যিক রেফারেন্সগুলি, স্বয়ংক্রিয়ভাবে আপনার কোডটিকে দূষণকারী গ্লোবালগুলি ছাড়াই পলিফিলিং করে। যদিও এর আসলে কী অর্থ? মূলত, আপনি বিল্ট-ইনগুলি যেমন প্রতিশ্রুতি, সেট, সিম্বল ইত্যাদি ব্যবহার করতে পারেন এবং পাশাপাশি সমস্ত বাবেল বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন যা কোনও পলফিলের নির্বিঘ্নে, বৈশ্বিক দূষণ ছাড়াই লাইব্রেরির জন্য অত্যন্ত উপযুক্ত করে তোলে।

এটি ES 6 এর অন্যান্য বিল্ট-ইনগুলির সাথে async / প্রতীক্ষার জন্য সমর্থনও অন্তর্ভুক্ত করে। 

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

ইন .babelrc, রানটাইম প্লাগইন যুক্ত করুন

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

দ্রষ্টব্য আপনি বাবেল 7 ব্যবহার করে থাকলে প্যাকেজটির নামকরণ করা হয়েছে @ ব্যাবেল / প্লাগইন-ট্রান্সফর্ম-রানটাইম ।

— জনি
সূত্র
11
আমার babel-runtimeasync কাজ করার জন্য অপেক্ষা করার দরকার নেই not এটা কি ঠিক? সম্পাদনা: আমি কোড সার্ভারের পাশ দিয়ে চলেছি। :)
— গিজসানবি
8
আপনি যদি ব্যাবেল-রানটাইম ছাড়াই এটি ব্যবহার করতে সক্ষম হন তবে এটি ইতিমধ্যে আপনার নির্ভরতা গাছের মধ্যে রয়েছে। সুতরাং সচেতন হন যে আপনি যদি কোনও লাইব্রেরি লিখছেন, এবং ব্যাবেল-রানটাইম ডেভ নির্ভরতা হিসাবে আসছে, এটি আপনার ব্যবহারকারীদের জন্য নাও থাকতে পারে। আপনাকে এটিকে বিতরণের জন্য সাধারণ নির্ভরতা হিসাবে অন্তর্ভুক্ত করতে হবে।
— neverfox
22
শুধুমাত্র babel-plugin-transform-runtimeপ্রয়োজন। একটি যাদুমন্ত্র মত কাজ করে.
— সাইকে
9
এই সমাধানটি ঠিক নয় কারণ প্লাগইন requireদ্বারা যুক্ত হওয়া কলগুলি প্রসারিত করতে অতিরিক্ত ব্রাউজারফি বা ওয়েবপ্যাক কাজ প্রয়োজন transform-runtime।
— খেজুর
9
নোট করুন যে বাবেল 7 এর জন্য আপনাকে চালানো দরকারnpm install --save-dev @babel/plugin-transform-runtime
— আন্দ্রে সেমাকিন
196

ব্যাবেল 7 জন ব্যবহারকারী

বেশিরভাগ তথ্য পূর্বের বাবেল সংস্করণগুলির জন্য ছিল বলে আমি এটি ঘিরে কিছুটা সমস্যা পেয়েছি। বাবেল 7 এর জন্য, এই দুটি নির্ভরতা ইনস্টল করুন:

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

এবং .babelrc এ যোগ করুন:

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
}
— ম্যাট শিরলি
সূত্র
আমরা এটি কীভাবে .বাবেলর্ক ছাড়াই করতে পারি (কেবল ওয়েবপ্যাক কনফিগারেশন ফাইল ব্যবহার করে)
— পোয়া জব্বারিসানী
2
ডকটি এখানে ব্যবহারের "plugins": ["@babel/plugin-transform-runtime"]পরিবর্তে ব্যবহারটি দেখায় "plugins": [ ["@babel/transform-runtime"] ]। বিভিন্ন প্লাগইন নাম। দুটোই কাজ করে। তবে কোনটি যথাযথ? ..
— kyw
5
এই পদ্ধতিটি অনুসরণ করার সময় আমার প্রয়োজনীয়তা সংজ্ঞায়িত হয় না
— ব্যাটম্যান
1
@ky সর্বদা ডক্স অনুসরণ করা ভাল - কনভেনশন ব্যতীত অন্য কোনও পার্থক্য নেই।
— ম্যাট
4
@babel/transform-runtimeপ্লাগিনগুলিতে যুক্ত করা আমার জন্য "রফতানি সংজ্ঞায়িত নয়" ত্রুটিযুক্ত। আমি এটি এটিকে পরিবর্তিত করে ব্যাবেল 7 এ অসিঙ্ক কাজ করার জন্য:["@babel/plugin-transform-runtime", { "regenerator": true } ]
— হরি
105

হালনাগাদ

আপনি যদি 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 /// ব্রাউজারলিস্ট অনুসারে ব্রাউজারগুলির তালিকাকে সূক্ষ্ম-সুর করতে পারেন

আমাকে বলুন, কীভাবে বলবেন না।

আমি সত্যিই babel-preset-envএর দর্শন পছন্দ করি : আপনি কোন পরিবেশকে সমর্থন করতে চান তা বলুন, কীভাবে তাদের সমর্থন করবেন তা আমাকে বলবেন না। এটি ঘোষিত প্রোগ্রামিংয়ের সৌন্দর্য।

আমি পরীক্ষা করেছি async awaitএবং তারা কাজ করে। আমি জানি না তারা কীভাবে কাজ করে এবং আমি সত্যিই তা জানতে চাই না। আমি তার পরিবর্তে আমার নিজস্ব কোড এবং আমার ব্যবসায়িক যুক্তিতে আমার সময় ব্যয় করতে চাই। ধন্যবাদ babel-preset-env, এটি আমাকে বাবেল কনফিগারেশন নরক থেকে মুক্তি দেয়।

— টাইলার লম্বা
সূত্র
3
এটি সত্যিই কাজ করে। একমাত্র নেতিবাচকতা নির্ভরযোগ্যতার একগুচ্ছ দ্বারা টানা babel-preset-envকিন্তু আমি মনে করি এটি এর পক্ষে মূল্যবান। ঘোষণামূলক স্টাইলটিও পছন্দ করুন। এছাড়াও yarn installএখনyarn add
— রোমান উশেরেঙ্কো
1
@gargantuan হ্যাঁ এটি করে।
— টাইলার দীর্ঘ
3
আপনি যদি পুরানো ব্রাউজারগুলি বা নোড সংস্করণগুলিকে লক্ষ্য করতে চান তবে সত্যই কোনও সমাধান নয় ।
— রোহান অর্টন
2
যদি কেবল এটি সুস্পষ্ট না হয় .... এই
— মরিস
7
কেন এত বেশি ভোট রয়েছে? এটি কেবলমাত্র কাজ করে কারণ এটি আর অ্যাসিঙ্ক / অপেক্ষারত রূপান্তর করে না এবং সুতরাং আর পুনর্নবীকরণকালীন সময়ের প্রয়োজন হয় না এবং এটি রূপান্তরিত না হওয়ায় এটি সমর্থন করে না এমন ব্রাউজারগুলিতে কাজ করবে না।
— শিক्यो
47

বিকল্পভাবে, আপনার যদি সমস্ত মডিউল babel-polyfillসরবরাহকারীর প্রয়োজন না হয় তবে আপনি কেবল babel-regenerator-runtimeআপনার ওয়েবপ্যাক কনফিগারেশনে নির্দিষ্ট করতে পারেন :

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

  // ...
};

এইচএমআর এর সাথে ওয়েবপ্যাক-ডেভ-সার্ভার ব্যবহার করার সময়, এটি প্রতিটি বিল্ডে অনেকগুলি সংকলনকারী ফাইলের সংখ্যা হ্রাস করে। এই মডিউলটি babel-polyfillএরই অংশ হিসাবে ইনস্টল করা আছে যদি আপনার যদি ইতিমধ্যে ভাল থাকে তবে অন্যথায় আপনি এটির সাথে আলাদাভাবে ইনস্টল করতে পারেন npm i -D babel-regenerator-runtime।

— অ্যান্টনি মাটিভোস
সূত্র
এটি সবচেয়ে সুবিধাজনক সমাধান বলে মনে হচ্ছে। তবে বেশিরভাগ ব্রাউজারগুলি জেনারেটরকে সমর্থন করে, সুতরাং এই সমাধানটি সম্ভবত অনুকূলতম নয়। দেখুন: ব্লগস ক্যান্ডোয়ার্জ
— প্রশ্ন
আপনি যদি ওয়েবপ্যাকটি ব্যবহার করছেন না?
— ব্যাটম্যান
38

আমার সহজ সমাধান:

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"
  ]
}
— E. Fortes
সূত্র
1
আপনি প্লাগিনগুলিতে "ট্রান্সফর্ম-অ্যাসিঙ্ক-টু জেনারেটর" অনুপস্থিত। এটিকে কাজ করতে
— আমাকেও
@ গ্যাব্রিয়েলবিবি পোস্টটি সম্পাদনা করেছি তাই এটি সম্পূর্ণ উদাহরণ।
— ওয়েবনুব
2
হয় loose: trueপ্রয়োজন?
— টম স্যাডারলুন্ড 2'18
এটি ব্যবহার করার সময় এটি আমার ফাইলে প্রয়োজনীয়তা যুক্ত করে এবং এটি ব্রাউজারে অপরিজ্ঞাত হয়।
— ব্যাটম্যান
আলগা: সত্য প্রয়োজন হয় না। আপনার .babelrc এ যা আপনার সত্যিকারের দরকার তা হ'ল: {"প্রিসেট": ["es2015", "প্রতিক্রিয়া", "পর্যায় -২" "]," প্লাগইনস ": [" রূপান্তর-রানটাইম "," রূপান্তর-অ্যাসিঙ্ক-টু-জেনারেটর "]}
— এফিয়ে আরিয়ারু
29

বাবেল 7.4.0 বা তার পরে (কোর-জেএস 2/3)

বাবেল 7.4.0 হিসাবে , অবচিত @babel/polyfill করা হয়েছে re ।

সাধারণভাবে, পলিফিল / পুনর্নবীকরণ স্থাপনের দুটি উপায় রয়েছে: গ্লোবাল নেমস্পেসের মাধ্যমে (বিকল্প 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পরিবর্তে, এখানে দেখুন ।

চিয়ার্স

— ford04
সূত্র
2
এটি সঠিক, সর্বাধিক টু ডেট উত্তর এবং আমার বর্তমান প্রকল্পে একটি সমস্যায় আমাকে সহায়তা করেছে। ধন্যবাদ!
— সিডিপাউটসচ
2
pre "প্রিসেটস": [["@ বাবেল / প্রিসেট-এনভ", {"লক্ষ্যগুলি": {"এসমোডিয়ুলস": সত্য}}]]} এটি আমাকে নোড.জেস তৈরি করতে সহায়তা করেছে
— স্মোলিন পাভেল
3
আমি বলতে চাইছি যে আমি ইতিমধ্যে জানতাম তবে অন্যকে সাহায্য করার জন্য এটি সঠিক উত্তর হওয়া উচিত। শুভেচ্ছান্তে!
— নিউইয়াদমস্কি পাওয়ে
দ্রষ্টব্য: আমি মনে করি, বাবেল 7 থ্রেডটি ব্যবহার করা বোধগম্য , সুতরাং সংস্করণ সম্পর্কিত ত্রুটিগুলি আরও ভালভাবে চিহ্নিত করা যায়। আপনি এই উত্তর একটি নির্দিষ্ট সংস্করণ খুঁজে পেতে পারেন এখানে (কিন্তু বিবৃতি এখনও সত্য রাখা উপরে)
— ford04
16

babel-regenerator-runtimeএখন হ্রাস করা হয়েছে , পরিবর্তে এটি ব্যবহার করা উচিতregenerator-runtime ।

webpackএবং সাথে রানটাইম জেনারেটর ব্যবহার করতেbabel v7 :

ইনস্টল করুন regenerator-runtime:

npm i -D regenerator-runtime

এবং তারপরে ওয়েবপ্যাক কনফিগারেশনের মধ্যে যুক্ত করুন: 

entry: [
  'regenerator-runtime/runtime',
  YOUR_APP_ENTRY
]
— jony89
সূত্র
এই হওয়া উচিত গৃহীত উত্তর, Babel-polyfill উপায় খুব যোগ করা অন্যান্য উপাদান
— Shikyo
আমার জন্য নিখুঁত কাজ করুন ... অনেক অনেক ধন্যবাদ
— লিয়ান্ড্রো উইলিয়াম
1
যদিও এই পদ্ধতিতে সর্বদা রানটাইম অন্তর্ভুক্ত থাকে। আমি বিশ্বাস করি এর ফলে নষ্ট @babel/preset-env'র useBuiltInsপরিবর্তনশীল আপনার টার্গেট ব্রাউজার উপর ভিত্তি করে রানটাইম ঢোকাতে থেকে।
— kyw
13

আপনার আপডেট .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"
        }
      }
    ]
  ]
}
— শূন্য
সূত্র
2
দয়া করে আপনার উত্তরটি ব্যাখ্যা করবেন? "নোড": "বর্তমান" কি করে
— বিশাল সোলঙ্কি
আমি এটি জানতে চাই এবং এটি যদি প্রস্তাবিত সমাধান হয় - তবে এটি কোনও কিছুর ক্ষতি করে না এবং এটি "ভবিষ্যতের প্রমাণ" (এই মুহুর্তে যতটা হতে পারে)। 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"প্রক্রিয়াটিতে সরিয়ে ফেলেছি) এবং পুনরুত্থানের ত্রুটি চলে গেছে।
— ব্যবহারকারী 1063287
1
@ বুঙ্কারবয় সুবিধার্থে আপনি "নোড": "কারেন্ট" ব্যবহার করতে পারবেন কেবলমাত্র প্রয়োজনীয় পলিফিলগুলি অন্তর্ভুক্ত করতে এবং আপনি বাবেল চালানোর জন্য যে নোড.জেএস সংস্করণটি ব্যবহার করেন তা রূপান্তর করে
— জিরো
সুতরাং এই জন্য আমি পলিফিল ইনস্টল করতে হবে না?
— বিশাল সোলঙ্কি
12

উত্তোলিত কার্যাদি সম্পর্কে সতর্ক থাকুন

আমার একই ফাইলটিতে আমার 'পলিফিল আমদানি' এবং আমার 'অ্যাসিঙ্ক ফাংশন' উভয়ই ছিল, তবে আমি ফাংশন সিনট্যাক্সটি ব্যবহার করে যা এটি পলিফিলের উপরে উত্তোলন করে যা আমাকে ReferenceError: regeneratorRuntime is not definedত্রুটি দেয়।

এই কোডটি পরিবর্তন করুন

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

এই

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

এটি পলিফিল আমদানির উপরে উত্তোলন করা রোধ করতে।

— মিত্র
সূত্র
5
a; kgjablrsdkjfjasnkljfbajklfdablkhjnfl; দু: খিত আমি আমার মন হারাচ্ছিলাম এবং আপনি আমাকে বাঁচিয়েছেন আমি আপনাকে ভালোবাসি
— জন আর পেরি
11

অক্টোবর 2019 পর্যন্ত এটি আমার পক্ষে কাজ করেছে:

প্রিসেট এ এটি যোগ করুন। 

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

তারপরে এনপিএম ব্যবহার করে পুনরায় উত্পাদক-রানটাইম ইনস্টল করুন।

npm i regenerator-runtime

এবং তারপরে আপনার মূল ফাইলটির ব্যবহার: (এই আমদানিটি কেবল একবার ব্যবহার করা হবে)

import "regenerator-runtime/runtime";

এটি আপনাকে async awaitsআপনার ফাইলে ব্যবহার করতে এবং এটিকে সরাতে সক্ষম করেregenerator error

— Deke
সূত্র
এর জন্য মান নির্ধারণ না করা useBuiltInsএটিকে ডিফল্ট করবে false। এটি টার্গেট পরিবেশের উপর নির্ভর করে কোনও পলিফিলগুলি স্বয়ংক্রিয়ভাবে আমদানি করবে না, যা কিন্ডার উদ্দেশ্যকে ক্ষুন্ন করে "@babel/preset-env"। বাবল বিকাশকারীদের একজনের সাথে সম্পর্কিত মন্তব্য এখানে ।
— bela53
10

যদি ব্যবহার করে থাকেন babel-preset-stage-2তবে কেবল স্ক্রিপ্টটি দিয়ে শুরু করতে হবে --require babel-polyfill।

আমার ক্ষেত্রে এই ত্রুটি Mochaপরীক্ষা দ্বারা নিক্ষেপ করা হয়েছিল ।

নিম্নলিখিত সমস্যার সমাধান

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

— জুবায়ের আলম
সূত্র
9

আমার প্রকল্পটিকে একটি টাইপ স্ক্রিপ্ট প্রকল্পে রূপান্তর করার পরে আমি এই ত্রুটি পেতে শুরু করেছি। আমি যা বুঝতে পারি তা থেকে সমস্যাটি async থেকে উদ্ভূত হয় / স্বীকৃত না হওয়ার জন্য অপেক্ষা করে।

আমার জন্য ত্রুটিটি আমার সেটআপে দুটি জিনিস যুক্ত করে ঠিক করা হয়েছিল:

  1. উপরে বহুবার উল্লিখিত হিসাবে, আমার আমার ওয়েবপ্যাক এন্ট্রি অ্যারেতে ব্যাবেল-পলিফিল যুক্ত করা দরকার:

    ...

প্রবেশ: ['ব্যাবেল-পলিফিল', './index.js'],

...

  2. জেনারেটরগুলিতে অ্যাসিঙ্ক / অপেক্ষা করার প্রশংসা করতে আমার আমার .babelrc আপডেট করতে হবে:

    {
  "প্রিসেটগুলি": ["এস ২০১৫"],
  "প্লাগইনস": ["রূপান্তর-অ্যাসিঙ্ক-থেকে জেনারেটর"]
}

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

সম্পূর্ণ কোডের সংক্ষিপ্তসার:

আপনি এখানে খুঁজে পেতে পারেন এমন একটি সত্যই সহায়ক এবং সংক্ষিপ্ত গিটহাবের সংক্ষেপের কাছ থেকে আমি কোড পেয়েছি ।

— জোশুয়া ডাইক
সূত্র
3
envপরিবর্তে প্রিসেট ব্যবহার করা ভাল es2015। ইতিমধ্যে envঅন্তর্ভুক্ত es2015।
— নিউরোট্রান্সমিটার
9

ক্রোমে আমার এই সমস্যা ছিল। RienNeVaPlu͢s এর উত্তরের মতো, এটি আমার জন্য এটি সমাধান করেছে:

npm install --save-dev regenerator-runtime

তারপরে আমার কোডে:

import 'regenerator-runtime/runtime';

অতিরিক্ত 200 কেবি এড়াতে খুশি babel-polyfill।

— টম স্যাডারলুন্ড
সূত্র
8

আপনি একটি ত্রুটি পেয়ে যাচ্ছেন কারণ অ্যাসিঙ্ক / ব্যবহার জেনারেটরের জন্য অপেক্ষা করছেন, যা ES2016 বৈশিষ্ট্য, ES2015 নয়। এটির সমাধানের একটি উপায় হ'ল ES2016 ( npm install --save babel-preset-es2016) এর জন্য বাবেল প্রিসেটটি ইনস্টল করা এবং ES2015 এর পরিবর্তে ES2016 তে সংকলন করা:

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

অন্যান্য উত্তরগুলির উল্লেখ হিসাবে, আপনি এটিও ব্যবহার করতে পারেন পলিফিলগুলিও (তবে নিশ্চিত হয়ে নিন যে আপনি অন্য কোনও কোড চালানোর আগে পলিফিলটি প্রথমে লোড করেছেন )। বিকল্পভাবে, আপনি যদি পলিফিল নির্ভরতাগুলির সমস্ত অন্তর্ভুক্ত না করতে চান তবে আপনি ব্যাবেল -পুনর্নবীকরণকারী-রানটাইম বা ব্যাবেল-প্লাগইন-ট্রান্সফর্ম-রানটাইম ব্যবহার করতে পারেন ।

— গ্যালেন লং
সূত্র
7

বাবেল-পলিফিল ইনস্টল করে আমি এই ত্রুটিটি ঠিক করেছি

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"
— Ayobami
সূত্র
7

async/awaitসঠিক ব্যাবেল প্লাগইন ছাড়াই ফাংশন ব্যবহার করা হলে এই ত্রুটি ঘটে । 2020 সালের মার্চ পর্যন্ত, নিম্নলিখিতগুলি আপনাকে যা করতে হবে তা করা উচিত। ( @babel/polyfillএবং প্রচুর স্বীকৃত সমাধানগুলি বাবেলে হ্রাস করা হয়েছে the বাবেল ডক্সে আরও পড়ুন ))

কমান্ড লাইনে, টাইপ করুন:

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'],
};
— বিড়াল পেরি
সূত্র
আমাকে সর্বদা যা অবাক করে তা হ'ল বিকাশকারীরা কীভাবে অলস হন। বাবেল ডেভস কার্যকারিতা হ্রাস করার সিদ্ধান্ত নিয়েছে, তারা এটি কোনও সমস্যা হয়ে উঠতে পারে বলে আশা করতে পারে। লোকেরা কেন জানাতে দেয় না যে সর্বাধিক সম্ভাব্য উদ্দেশ্য কী ছিল এবং এটি ঠিক করার জন্য তাদের কী করা উচিত। তবে না, আসুন আমরা কিছু বার্তা দেখাই যা নবীনদের জন্য নিখুঁতভাবে অকেজো।
— পাভেল ভোরোনিন
— অসম্ভব
আমার জন্য দুর্দান্ত কাজ করেছেন আমার অ-প্রতিক্রিয়া প্রকল্পটি এর .babelrcমতো দেখাচ্ছে: `` `{" প্রিসেট ": [" বাবেল / প্রিসেট-এনভি "", "প্লাগইনস": ["বাবেল / প্লাগইন-ট্রান্সফর্ম-রানটাইম"]} `` `
— অ্যান্টনি
6

নতুন উত্তর আপনি আমার উত্তর অনুসরণ করেন কেন?

উত্তর: কারণ আমি আপনাকে সর্বশেষ আপডেট সংস্করণ এনপিএম প্রকল্পের সাথে একটি উত্তর দিতে যাচ্ছি।

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"

আপনার যদি এই সংস্করণটি বা এনপিএম এবং আরও সমস্ত ইউপি সংস্করণ ব্যবহার করা হয় ... তবে কেবল এটি পরিবর্তন করা দরকার:

webpack.config.js

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

webpack.config.jsফাইলগুলি পরিবর্তন করার পরে আপনার কোডের শীর্ষে এই লাইনটি যুক্ত করুন।

import "babel-polyfill";

এখন সব ঠিক আছে পরীক্ষা করুন। রেফারেন্স লিংক

এছাড়াও তার সুন্দর উত্তরের জন্য @ ব্রুনোএলএমকে ধন্যবাদ জানাই।

— এমডি আশিক
সূত্র
1
যদি ব্যাকএন্ড পরিষেবা হয় তবে তিনি কেন ওয়েবপ্যাকটি ব্যবহার করবেন? আপনার উত্তরটি বোঝায় যে তাকে ওয়েবপ্যাক ব্যবহার করতে হবে?
— স্পোক করুন
1
@ স্পোক, আমি এটি সম্পর্কে চিন্তাভাবনা করেছি। আমি একই সমস্যার মুখোমুখি হয়েছি এবং আমি আমার সমস্যাটি এই সহজ সমাধান করেছি। আমি মনে করি এটি ওয়েবপ্যাক ব্যবহারকারীর পক্ষে ইতিবাচক উত্তর এবং খরগোশের আরও সঠিক উত্তর রয়েছে যাতে আপনি অন্য যাকে অনুসরণ করতে পারেন।
— এমডি আশিক
আপনি কেন ভোট চাপতে হবে এমন জিনিস !!!! আপনি যদি আমাকে সাহায্য করতে চান তবে আপনি কি কারণ বলতে পারেন?
— এমডি আশিক
6

লক্ষ্যযুক্ত ব্রাউজারগুলিকে আমার ইতিমধ্যে এসাইক / অপেক্ষা করতে সহায়তা করতে হবে, তবে মোচা টেস্টগুলি লেখার সময়, সঠিক বিন্যাস ছাড়াই আমার এখনও এই ত্রুটি হয়েছিল।

প্রবন্ধ আমি googled অধিকাংশই সহ গৃহীত উত্তর এবং উচ্চ উত্তর এখানে ভোট দিয়েছেন, অর্থাত আপনি প্রয়োজন নেই, তারিখ উত্তীর্ণ হয় polyfill, babel-regenerator-runtime, babel-plugin-transform-runtime। ইত্যাদি যদি আপনার টার্গেট ব্রাউজার (গুলি) ইতিমধ্যে async / অপেক্ষার সমর্থন করে (অবশ্যই আপনার যদি পলিফিলের প্রয়োজন না হয়)

আমিও ব্যবহার করতে চাই না webpack।

টাইলার লংয়ের উত্তর আসলেই সঠিক পথে রয়েছে কারণ তিনি প্রস্তাব করেছিলেন babel-preset-env(তবে প্রথম দিকে তিনি পলিফিলের কথা উল্লেখ করার পরে আমি এটিকে বাদ দিয়েছিলাম)। আমি এখনও ReferenceError: regeneratorRuntime is not definedপ্রথমটি পেয়েছিলাম তখন বুঝতে পারি এটি লক্ষ্য কারণ আমি লক্ষ্য স্থির করি নি। নোডের জন্য লক্ষ্য নির্ধারণের পরে আমি পুনরায় উত্পাদককে ঠিক করেছি রনটাইম ত্রুটি ：

  "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
      }]
    ]
  }
— Qiulang
সূত্র
4

1 - ব্যাবেল-প্লাগ-ইন-রূপান্তর-অ্যাসিঙ্ক-থেকে-মডিউল-পদ্ধতি, বাবেল-পলফিল, ব্লুবার্ড, ব্যাবেল-প্রসেট-এস2015, বাবেল-কোর ইনস্টল করুন:

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

2 - আপনার জেএস বাবেল পলিফিল যুক্ত করুন:

import 'babel-polyfill';

3 - আপনার .babrcrc এ প্লাগইন যুক্ত করুন:

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

সূত্র: http://babeljs.io/docs/plugins/transfor-async-to-module-method/

— Luisangonzalez
সূত্র
3

ওয়েবপ্যাকটি ব্যবহার করে এবং মোচা যা ওয়েবপ্যাক দ্বারা সংকলিত পরীক্ষাগুলি চলছিল তা
নিয়ে আমার একটি সেটআপ ছিল।presets: ['es2015', 'stage-0']

আমার async/awaitপরীক্ষাগুলিতে কাজ করার জন্য আমাকে যা করতে হয়েছিল তা হ'ল mocha --require babel-polyfillবিকল্প।

— lakesare
সূত্র
3

আমি 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 }));
});

আমি সমাধানটি babel-polyfillবোরো উপাদান হিসাবে অন্তর্ভুক্ত করতে পারে কেস করতে পারেন :

bower install babel-polyfill --save

এবং সূচক html এ নির্ভরতা হিসাবে যুক্ত করুন:

<script src="/bower_components/babel-polyfill/browser-polyfill.js"></script>
— csharpfolk
সূত্র
ধন্যবাদ. এটি আমার পক্ষে কাজ করেছে। আমি জানতাম না যে এটির ক্লায়েন্টের পক্ষে কাজ করার জন্য আমার স্ক্রিপ্ট ট্যাগ যুক্ত করা দরকার।
— রাজা
3

লোকেরা babel-polyfill7 সংস্করণটি ব্যবহার করতে webpackচাইছে For এটি ver3 ^ দিয়ে করুন ^

এনপিএম মডিউল ইনস্টল করুন npm i -D @babel/polyfill

তারপরে আপনার webpackফাইলে আপনার entryপয়েন্টে এটি করুন

entry: ['@babel/polyfill', path.resolve(APP_DIR, 'App.js')],
— আদিল ইমরান
সূত্র
3

পুনর্জেটর রানটাইমের সাথে প্রতিক্রিয়া জানাতে আমার ওয়ার্কিং ব্যাবেল 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";

....
— gazdagergo
সূত্র
2

আপনি যদি কোনও অ্যাপ তৈরি করে থাকেন তবে আপনার কেবলমাত্র @babel/preset-envএবং @babel/polyfill:

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

(দ্রষ্টব্য: আপনি ইনস্টল করতে হবে না core-jsএবং regenerator-runtimeযেহেতু তারা উভয় দ্বারা ইনস্টল করা হবে প্যাকেজ @ Babel / polyfill)

তারপরে .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সমস্যাটি এখানে ফিক্সিং ) কেবলমাত্র আপনার টার্গেট পরিবেশ / ব্রাউজারগুলির প্রয়োজন হলে তা আমদানি করবে ।

— kyw
সূত্র
2

ভবিষ্যতের রেফারেন্সের জন্য :

বাবেল সংস্করণ হিসাবে 7.0.0-beta.55 পর্যায়ের প্রিসেটগুলি সরানো হয়েছে

ব্লগটি https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets দেখুন

অ্যাসিঙ্ক ওয়েটিং এখনও ব্যবহার করা যেতে পারে

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"],
};
— Zeref
সূত্র
2

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 ডকুমেন্টেশন থেকে তথ্য ।

— nickbullock
সূত্র
2

আপনার কনসোলে এই 'পুনরায় উত্পাদকের সময়কাল সংজ্ঞায়িত সমস্যাটি' ঠিক করার সহজতম উপায়:

আপনাকে কোনও অপ্রয়োজনীয় প্লাগইন ইনস্টল করতে হবে না। শুধু যোগ কর:

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

আপনার সূচী শৃঙ্খলে শরীরের ভিতরে। একবার আপনি বাবেল চালনার পরে পুনর্নিযাত্রী রানটাইম সংজ্ঞায়িত করা উচিত এবং এখন আপনার async / প্রতীক্ষিত ফাংশনগুলি ES2015 এ সফলভাবে সংকলন করা উচিত

— জ্যাকি সান্টানা
সূত্র
1

আপনি যদি ফ্রন্টএন্ডের জন্য গুল্প + বাবেল ব্যবহার করেন তবে আপনাকে বাবেল-পলিফিল ব্যবহার করা উচিত

npm install babel-polyfill

এবং তারপরে নোড_মডিউলগুলি থেকে সমস্ত অন্যান্য স্ক্রিপ্ট ট্যাগ এবং রেফারেন্স ব্যাবেল-পলফিলের উপরে সূচক html এ একটি স্ক্রিপ্ট ট্যাগ যুক্ত করুন

— পেট্রোস কিরিয়াকু
সূত্র
ডাউনভোট এবং মন্তব্য কেন আমি তা দেখতে পাচ্ছি না। আমি এটি ফায়ারফক্স ব্রাউজারের জন্য চেয়েছিলাম। এছাড়াও আমি সরাসরি বাবেল ওয়েবসাইট থেকে তথ্য নিয়েছি। মন্তব্যটি চেষ্টা করার সময় সমস্যাটি সমাধান করতে আমাকে সহায়তা করেনি।
— পেট্রোস কিরিয়াকু
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.