আমি কীভাবে ব্যাবেল-পলিফিল লাইব্রেরি ইনস্টল করব?

Question

আমি কেবলমাত্র ইএস 5 তে আমার ইএস 6 জাভাস্ক্রিপ্ট কোডটি সংকলন করতে বাবেল ব্যবহার শুরু করেছি। আমি যখন প্রতিশ্রুতিগুলি ব্যবহার শুরু করি তখন মনে হয় এটি কাজ করছে না। বাবেল ওয়েবসাইটটি পলিফিলের মাধ্যমে প্রতিশ্রুতির পক্ষে সমর্থন জানিয়েছে।

কোনও ভাগ্য ছাড়াই, আমি যুক্ত করার চেষ্টা করেছি:

require("babel/polyfill");

অথবা

import * as p from "babel/polyfill";

এর সাথে আমি আমার অ্যাপ্লিকেশন বুটস্ট্র্যাপে নিম্নলিখিত ত্রুটিটি পেয়ে যাব:

মডিউল 'বাবেল / পলফিল' খুঁজে পাওয়া যায় না

আমি মডিউলটি অনুসন্ধান করেছি তবে মনে হচ্ছে আমি এখানে কিছু মৌলিক জিনিস অনুপস্থিত। আমি পুরানো এবং ভাল ব্লুবার্ড এনপিএম যুক্ত করার চেষ্টা করেছি কিন্তু দেখে মনে হচ্ছে এটি কাজ করছে না।

বাবেল থেকে পলিফিল কীভাবে ব্যবহার করবেন?

Comments

npm install _name_

— ডান্ডাভিস

দ্রষ্টব্য: বাবেলের এখন এটির জন্য একটি পৃথক এনপিএম প্যাকেজ রয়েছে: বাবেল -পলিফিল

— ডি উইট

@ স্টিজান্ডেউইট আপনাকে কেবল একটি ক্লিক বাঁচাতে এখানে সম্পূর্ণ সংস্করণে সম্পূর্ণ README.md ফাইলটি দেওয়া হচ্ছে:

— গুড়গেট

@gurhet হ্যাঁ তারা সেখানে আমি আরও কিছু তথ্য যুক্ত করতে পারত :) তবে আপনার যা যা সত্যই জানা দরকার তা হ'ল npm install --save babel-polyfillএবং require('babel-polyfill)।

— স্টিজন ডি উইট

যেহেতু আপনি ES6 ব্যবহার করছেন তাই আপনি আমদানি "ব্যাবেল-পলফিল "ও ব্যবহার করতে পারেন।

— হাসিজা প্রেম করুন

Answer 1

এটি ব্যাবেল ভি 6-তে কিছুটা পরিবর্তন হয়েছে।

ডক্স থেকে:

পলিফিল একটি সম্পূর্ণ ES6 পরিবেশ অনুকরণ করবে। বাবেল-নোড ব্যবহার করার সময় এই পলিফিলটি স্বয়ংক্রিয়ভাবে লোড হয়।

স্থাপন:
$ npm install babel-polyfill

নোড / ব্রাউজারিফাই / ওয়েবপ্যাকের ব্যবহার: পলিফিল
অন্তর্ভুক্ত করতে আপনার আবেদনের প্রবেশের শীর্ষে এটির প্রয়োজন।
require("babel-polyfill");

ব্রাউজারে ব্যবহার: একটি এনপিএম রিলিজের মধ্যে ফাইল
থেকে উপলব্ধ । আপনার সমস্ত সংকলিত বাবেল কোডের আগে এটি অন্তর্ভুক্ত করা দরকার। আপনি এটি আপনার সংকলিত কোডে প্রেন্ডেন্ড করতে পারেন বা এটির আগে এটি অন্তর্ভুক্ত করতে পারেন।dist/polyfill.jsbabel-polyfill<script>

দ্রষ্টব্য: requireব্রাউসরিফাই ইত্যাদির মাধ্যমে এটি করবেন না babel-polyfill।

Comments

পলিফিল কখন প্রয়োজন হয় তা সম্পর্কে আমি এখনও পুরোপুরি নিশ্চিত নই। কেন ES6 মডিউলগুলি কেবল বাবেল.জেএস নিয়ে কাজ করে তবে পলিফিল Array.protorype.findIndex()ব্যতীত কাজ করে না এবং বাপ্পলটি সঞ্চালনের সময় কোনও ব্যতিক্রম বাড়াবে না? এটি কি পলিফিলের প্রকৃতি?

— রিমেম্বার

মূলত বাবেল পলিফিলটি কেবল গিথুব / পৃষ্ঠাসমূহ / রিজেনেটর এবং github.com/zloirock/core-js সম্মিলিত। আপনার আসলে পলিফিলগুলি প্রয়োজন কিনা তা জানতে সেই 2 টি রেপগুলি দেখুন।

— vdclouis

আমি মনে করি যে কারণগুলির মধ্যে একটি কাজ করে এবং অন্যটি নয় এটি হ'ল বাবেল যখন ট্রান্সপ্লিং করে তখন একটি নির্দিষ্ট স্তরের সমর্থন নিয়ে একটি অনুমান জেএস ইঞ্জিনকে লক্ষ্য করে। রিয়েল ব্রাউজারগুলি এই অনুমান ইঞ্জিনের চেয়ে কম বা বেশি সমর্থন করতে পারে। অনুশীলনে আমি মনে করি যে হাইপোটিটিকাল ব্রাউজার তারা টার্গেট করে আইই 10 স্তরের কোথাও রয়েছে, তাই পুরানো ব্রাউজারগুলিতে কিছু সমস্যা থাকতে পারে। পৃথক পলিফিলের জন্য এর জন্য সংশোধনগুলি রেখে আপনি সিদ্ধান্তটি ছেড়ে দেন যে আপনি এইরকম পুরানো ব্রাউজারগুলিকে সমর্থন করতে চান। এর কিছুটা jQuery এর মতো এটির 1.0 টি শাখা রয়েছে এবং 2.0 টি শাখা যা IE8 সমর্থন করে না। @ রিমবার

— ডি উইট

@ ডৌগম্যাকলিন যদি ফাইন্ড ইন্ডেক্স আপনার প্রয়োজনীয় একমাত্র পলফিল হয় তবে আপনি কেবল এটিই আপনার কোডের মধ্যে অন্তর্ভুক্ত করতে পারেন। Polyfills জন্য MDN চেক করুন: developer.mozilla.org/en/docs/Web/JavaScript/Reference/...

— vdclouis

@ ভিডক্লুইস, আপনি কীভাবে ওয়েবপ্যাকের মাধ্যমে সেই পলিফিল কোডটি অন্তর্ভুক্ত করবেন যাতে এটি প্রকল্পের যে কোনও জায়গায় পাওয়া যায়?

— ডগম্যাকলিন

Answer 2

হট্টগোল ডক্স এই বর্ণনা চমত্কার সংক্ষেপে:

বাবেলে একটি পলিফিল রয়েছে যার মধ্যে একটি কাস্টম পুনর্জাতক রানটাইম এবং কোর.জেএস অন্তর্ভুক্ত রয়েছে includes

এটি সম্পূর্ণ ES6 পরিবেশ অনুকরণ করবে। বাবেল-নোড এবং বাবেল / রেজিস্টার ব্যবহার করার সময় এই পলিফিলটি স্বয়ংক্রিয়ভাবে লোড হয়।

আপনার অ্যাপ্লিকেশনের এন্ট্রি-পয়েন্টে অন্য যে কোনও কিছু বলার আগে আপনার এটির প্রয়োজন আছে তা নিশ্চিত করুন। আপনি যদি ওয়েবপ্যাকের মতো কোনও সরঞ্জাম ব্যবহার করে থাকেন তবে তা বেশ সহজ হয়ে যায় (আপনি ওয়েবপ্যাকটিকে এটি বান্ডলে অন্তর্ভুক্ত করতে বলতে পারেন)।

যদি আপনি gulp-babelবা এর মতো কোনও সরঞ্জাম ব্যবহার করেন তবে পলিফিল ব্যবহার করার জন্য আপনাকে প্যাকেজটি নিজেই babel-loaderইনস্টল babelকরতে হবে।

এছাড়াও নোট করুন যে বিশ্বব্যাপী স্কোপকে প্রভাবিত করে এমন মডিউলগুলির জন্য (পলিফিল এবং এর মতো), আপনি আপনার মডিউলে অব্যবহৃত ভেরিয়েবলগুলি এড়াতে একটি সংশ্লেষ আমদানি ব্যবহার করতে পারেন:

import 'babel/polyfill';

Comments

কেবল একটি নোট যুক্ত করতে, এবং আমি এটি পুরোপুরি সঠিক কিনা 100% নিশ্চিত নই, তবে আমি import 'babel-core/polyfill'ইনস্টল না করে ব্যবহার করার চেষ্টা করেছি babelএবং এটি ঠিক কাজ করেছে।

— নাথান লটারম্যান

জায়েজ , আমার ধারণা আপনি ইতিমধ্যে ব্যাবেল ইনস্টল করেছেন, তাই import 'babel-core/polifyll'কাজ করে। আমি এটি ইনস্টল না করেই চেষ্টা করেছি babelএবং এটি আমার পক্ষে কার্যকর হয়নি। উপায় দ্বারা: ssube কাজ পরামর্শ।

— ওয়েবব্রোড়

ওয়েবপ্যাক ব্যবহার করার সময় আপনি এটি কোথায় অন্তর্ভুক্ত করবেন?

— theptrk

@ থিটারটাক ওয়েবপ্যাক ব্যবহার করে আপনি কেবল এটি মডিউল হিসাবে আমদানি করতে পারেন, যেহেতু ওয়েবপ্যাকটি এনপিএম প্যাকেজ আমদানি করতে দেয়। কর্মের জন্য, আপনি এটি পরীক্ষা করার আগে অন্তর্ভুক্ত করার জন্য একটি ফাইল হিসাবে সেট আপ করেছেন ।

— ssube

ধন্যবাদ, সম্ভবত আমার আলাদা সংস্করণ ছিল তবে তার পরিবর্তে আমাকে ব্যাবেল-কোর ব্যবহার করতে হয়েছিল => "আমদানি 'ব্যাবেল-কোর / পলিফিল';

— থিটার্ক

Answer 3

বাবেল সংস্করণ For এর জন্য, যদি আপনি @ বাবেল / প্রিসেট-এনভি ব্যবহার করে থাকেন তবে পলিফিল অন্তর্ভুক্ত করতে আপনাকে যা করতে হবে তা হ'ল আপনার ব্যাবেল কনফিগারেশনে 'ব্যবহারের মান সহ একটি পতাকা' ইউজবিল্টইনস 'যুক্ত করুন। আপনার অ্যাপের এন্ট্রি পয়েন্টে পলিফিলের প্রয়োজন বা আমদানি করার দরকার নেই।

এই পতাকাটি নির্দিষ্ট করে, বাবেল 7 7 অনুকূলিত করবে এবং কেবলমাত্র আপনার প্রয়োজনীয় পলিফিলগুলি অন্তর্ভুক্ত করবে।

ইনস্টলেশনের পরে এই পতাকাটি ব্যবহার করতে:

npm install --save-dev  @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

কেবল পতাকা যুক্ত করুন:

useBuiltIns: "usage" 

"বাবেল / এনভিভি" বিভাগের অধীনে "বাবেল।

// file: babel.config.js

module.exports = () => {
   const presets = [
      [
         "@babel/env", 
         { 
             targets: { /* your targeted browser */ },
             useBuiltIns: "usage"  // <-----------------*** add this
         }
      ]
   ];

   return { presets };
};

রেফারেন্স:

• ব্যবহারের # polyfill
• Babel-polyfill # ব্যবহার-ইন-নোড-browserify-webpack
• Babel-প্রিসেট-env # usebuiltins

---

আগস্ট 2019 আপডেট করুন:

বাবেল 7.4.0 (19 মার্চ, 2019) প্রকাশের সাথে @ বাবেল / পলিফিল অবমূল্যায়ন করা হয়েছে। @ খোকামনি / পলিফিল ইনস্টল করার পরিবর্তে আপনি কোর-জেএস ইনস্টল করবেন:

npm install --save core-js@3

corejsআপনার babel.config.js এ একটি নতুন এন্ট্রি যুক্ত করা হয়েছে

// file: babel.config.js

module.exports = () => {
   const presets = [
      [
         "@babel/env", 
         { 
             targets: { /* your targeted browser */ },
             useBuiltIns: "usage",
             corejs: 3  // <----- specify version of corejs used
         }
      ]
   ];

   return { presets };
};

উদাহরণ দেখুন: https://github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v3

রেফারেন্স:

• 7.4.0 প্রকাশিত: কোর-জেএস 3, স্ট্যাটিক ব্যক্তিগত পদ্ধতি এবং আংশিক প্রয়োগ
• কোর-জেএস @ 3, বাবেল এবং ভবিষ্যতের চেহারা

Comments

আপনি কি উত্পাদনের ক্ষেত্রে এটি ব্যবহার করেন? কোন ঝুঁকি?

— রায়

useBuiltIns: "usage"আমার পক্ষে কাজ করে না। এটি কেবল কোনও বান্ডিলের মধ্যে কোনও পলিফিল অন্তর্ভুক্ত করে না (উদাহরণস্বরূপ: আমি জেনারেটর ব্যবহার করি এবং একটি ত্রুটি পাই "রিজেনেটরআরটাইম সংজ্ঞায়িত নয়")। কোন ধারনা?

— ওয়েবব্রোড়

: @WebBrother, আমার জন্য কাজ করে ... যেমন দেখতে github.com/ApolloTang/stackoverflow-eg--babel-polyfill

— অ্যাপোলো

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

— অ্যাপোলো

Answer 4

যদি আপনার প্যাকেজ.জসন নিম্নলিখিতগুলির মতো কিছু দেখায়:

  ...
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-eslint": "^6.0.4",
    "babel-polyfill": "^6.8.0",
    "babel-preset-es2015": "^6.6.0",
    "babelify": "^7.3.0",
  ...

এবং আপনি Cannot find module 'babel/polyfill'ত্রুটি বার্তাটি পান, তবে আপনাকে সম্ভবত আপনার আমদানি বিবৃতিটি FROM থেকে পরিবর্তন করতে হবে:

import "babel/polyfill";

প্রতি:

import "babel-polyfill";

এবং নিশ্চিত হয়ে নিন যে এটি অন্য কোনওটির আগে এসেছে import বিবৃতি (আপনার আবেদনের এন্ট্রি পয়েন্টে অগত্যা নয়)।

তথ্যসূত্র: https://babeljs.io/docs/usage/polyfill/

Comments

এই উত্তরে ব্যাবেল-পলিফিল প্যাকেজটি 'ডিভডিপেন্ডেন্স' এর অধীনে তালিকাভুক্ত করা হয়েছে। এটি করার ফলে ব্যাবেল-পলিফিল মোতায়েনের অন্তর্ভুক্ত থাকবে না। আপনাকে ডি-ফ্ল্যাগের সাথে ব্যাবেল-পলফিল ইনস্টল করা উচিত নয় তবে-এস পতাকা সহ তাই এটি 'নির্ভরতা' এর অধীনে তালিকাভুক্ত করা হয় এবং তাই আপনার স্থাপনার অন্তর্ভুক্ত।

— অ্যাপোলো

Answer 5

প্রথমে, সুস্পষ্ট উত্তর যা কেউ সরবরাহ করেনি, আপনাকে আপনার অ্যাপ্লিকেশনটিতে ব্যাবেল ইনস্টল করতে হবে:

npm install babel --save

(অথবা babel-coreআপনি যদি পরিবর্তে চান)require('babel-core/polyfill') )।

এটি বাদ দিয়ে, আমার এসই 6 এবং জেএসএক্সকে বিল্ড স্টেপ হিসাবে ট্রান্সপ্লাই করার একটি গুরুতর কাজ রয়েছে (যেমন আমি ব্যবহার করতে চাই না babel/register, যার কারণে আমি babel/polyfillসরাসরি প্রথম স্থানে ব্যবহার করার চেষ্টা করছি ), তাই আমি চাই @ ssube এর উত্তরের এই অংশটিতে আরও জোর দিন:

আপনার অ্যাপ্লিকেশনের এন্ট্রি-পয়েন্টে অন্য যে কোনও কিছু বলা হওয়ার আগে আপনার এটির প্রয়োজন হয় তা নিশ্চিত করুন

আমি কিছু অদ্ভুত ইস্যুতে দৌড়েছি যেখানে আমি babel/polyfillকিছু ভাগ করা পরিবেশ স্টার্টআপ ফাইলটি থেকে প্রয়োজনীয়তার চেষ্টা করছিলাম এবং ব্যবহারকারীটি উল্লেখ করা ত্রুটিটি পেয়েছিলাম - আমি মনে করি যে বাবেল অর্ডার বনাম বনাম কীভাবে প্রয়োজন তার সাথে এর কিছু ছিল তবে আমি পুনরুত্পাদন করতে পারিনি এখন। যাইহোক, import 'babel/polyfill'আমার ক্লায়েন্ট এবং সার্ভার স্টার্টআপ স্ক্রিপ্ট উভয়ই প্রথম লাইন হিসাবে সরানো সমস্যার সমাধান করে।

নোট করুন যে আপনি যদি পরিবর্তে ব্যবহার করতে চান তবে require('babel/polyfill')আমি নিশ্চিত করব যে আপনার অন্যান্য সমস্ত মডিউল লোডার বিবৃতিগুলিও আমদানি ব্যবহার করা উচিত নয় - দুটি মিশ্রণ এড়ান avoid অন্য কথায়, আপনার যদি আপনার স্টার্টআপ স্ক্রিপ্টে কোনও আমদানি বিবৃতি থাকে, import babel/polyfillতার পরিবর্তে আপনার স্ক্রিপ্টে প্রথম লাইন তৈরি করুন require('babel/polyfill')।

Comments

আপনাকে sudoএনপিএম ডকসেস

— ভ্লাদিমির

Answer 6

ব্যাবেল-পলফিল আপনাকে সিনট্যাক্স পরিবর্তনের বাইরে ES6 বৈশিষ্ট্যের সম্পূর্ণ সেট ব্যবহার করতে দেয় allows এর মধ্যে প্রতিশ্রুতি এবং উইকম্যাপের মতো নতুন বিল্ট-ইন অবজেক্টের পাশাপাশি অ্যারে.ফ্রম বা অবজেক্ট.সেসাইন এর মতো নতুন স্থিতিশীল পদ্ধতির মতো বৈশিষ্ট্য রয়েছে।

বাবেল-পলফিল ছাড়াই, বাবেল কেবল আপনাকে তীর ফাংশন, ডিস্ট্রাকচারিং, ডিফল্ট আর্গুমেন্টস এবং ES6 তে প্রবর্তিত অন্যান্য সিনট্যাক্স-নির্দিষ্ট বৈশিষ্ট্যগুলির মতো বৈশিষ্ট্যগুলি ব্যবহার করতে দেয়।

https://www.quora.com/What-does-babel-polyfill-do

https://hackernoon.com/polyfills-everything-you-ever-wanted-to-know-or-maybe-a-bit-less-7c8de164e423

Answer 7

ভালো লেগেছে হট্টগোল বলেছেন ডক্স , হট্টগোল> 7.4.0 মডিউলের জন্য @ Babel / polyfill হয় অননুমোদিত , তা সরাসরি ব্যবহার করা বাঞ্ছনীয়, যাতে কিনা কোর-JS এবং পুনরুত্পাদক-রানটাইম আগে @ Babel / polyfill অন্তর্ভূক্ত করা হয় লাইব্রেরি।

সুতরাং এটি আমার পক্ষে কাজ করেছে:

npm install --save core-js@3.6.5
npm install regenerator-runtime

তারপরে আপনার প্রাথমিক জেএস ফাইলের একেবারে শীর্ষে যুক্ত করুন:

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