ক্রিয়া-রিএ্যাক্ট-অ্যাপ্লিকেশন ব্যবহার করে এমন অ্যাপ্লিকেশনটিতে পলফিল ES6 বৈশিষ্ট্যগুলির সেরা উপায়

Question 1

আমি আমার এক্সপ্লোরার এক্সপ্লোরারটিতে আমার রিয়েট.জেএস অ্যাপ্লিকেশনটি পরীক্ষা করে দেখছি এবং এটি দেখতে পেয়েছে যে কিছু ES6 / 7 কোড Array.prototype.includes()এটি ব্রেক করে।

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

আপনি যদি অন্য কোনও ES6 + বৈশিষ্ট্য ব্যবহার করেন যার জন্য রানটাইম সমর্থন (যেমন অ্যারে.ফ্রোম () বা সিম্বল) প্রয়োজন হয় তবে নিশ্চিত হয়ে নিন যে আপনি নিজে নিজে উপযুক্ত পলিফিলগুলি অন্তর্ভুক্ত করছেন, বা আপনি যে ব্রাউজারগুলি লক্ষ্য রেখেছেন সেগুলি ইতিমধ্যে সেগুলি সমর্থন করে।

সুতরাং ... এগুলি 'ম্যানুয়ালি' অন্তর্ভুক্ত করার সর্বোত্তম উপায় কোনটি?

Question 2

আপডেট : তৈরি করুন-প্রতিক্রিয়া-অ্যাপ্লিকেশন পলিফিল পদ্ধতির এবং ডকস এই প্রশ্ন / উত্তর থেকে পরিবর্তন হয়েছে। আপনি যদি 11 এর মতো পুরানো ব্রাউজারগুলিকে সমর্থন করতে চান তবে আপনাকে এখন react-app-polyfill( এখানে ) অন্তর্ভুক্ত করা উচিত । তবে এটিতে কেবল " ... ন্যূনতম প্রয়োজনীয়তা এবং সাধারণভাবে ব্যবহৃত ভাষা বৈশিষ্ট্যগুলি " অন্তর্ভুক্ত থাকে, সুতরাং আপনি কম সাধারণ ES6 / 7 বৈশিষ্ট্যের জন্য নীচের পদ্ধতির একটি ব্যবহার করতে চাই (যেমন Array.includes)

এই দুটি পদ্ধতির উভয় কাজ:

1. প্রতিক্রিয়া-অ্যাপ্লিকেশন-পলিফিল এবং কোর-জেএস থেকে ম্যানুয়াল আমদানি

রিঅ্যাক্ট-অ্যাপ-পলিফিল এবং কোর- জেএস (3.0+) ইনস্টল করুন :

npm install react-app-polyfill core-js বা yarn add react-app-polyfill core-js

পলিফিলস.জেএস নামে একটি ফাইল তৈরি করুন এবং এটি আপনার মূল সূচক.জেএস ফাইলটিতে আমদানি করুন। তারপরে বেসিক রিএ্যাক্ট-অ্যাপ পলিফিলগুলি, পাশাপাশি কোনও নির্দিষ্ট প্রয়োজনীয় বৈশিষ্ট্যগুলি আমদানি করুন:

/* polyfills.js */

import 'react-app-polyfill/ie11';
import 'core-js/features/array/find';
import 'core-js/features/array/includes';
import 'core-js/features/number/is-nan';

/* index.js */

import './polyfills'
...

২. পলিফিল পরিষেবা

Polyfill.io সিডিএন ব্যবহার করে কাস্টম, ব্রাউজার-নির্দিষ্ট পলফিলগুলি পুনরুদ্ধার করতে সূচক html এ এই লাইনটি যুক্ত করে:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes"></script>

দ্রষ্টব্য, আমাকে Array.prototype.includesবৈশিষ্ট্যটির অনুরোধ করতে হয়েছিল কারণ এটি ডিফল্ট বৈশিষ্ট্য সেটটিতে অন্তর্ভুক্ত করা হয়নি।

Question 3

রিঅ্যাক্ট-অ্যাপ-পলিফিল ব্যবহার করুন যা রিঅ্যাক্টে ব্যবহৃত সাধারণ ES6 বৈশিষ্ট্যের জন্য পলিফিল রয়েছে। এবং এটি তৈরি-প্রতিক্রিয়া-অ্যাপের অংশ । README- এ সংজ্ঞায়িত অনুসারে আপনি index.js এর শুরুতে এটি অন্তর্ভুক্ত করেছেন তা নিশ্চিত করুন।

Question 4

আমি পলিফিল ডাউনলোড করতে সুতা ব্যবহার করেছি এবং এটি সরাসরি আমার সূচি.জেজে আমদানি করেছি।

কমান্ড প্রম্পটে:

yarn add array.prototype.fill

এবং তারপরে, এর শীর্ষে index.js:

import 'array.prototype.fill' // <-- newly added import
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
...

আমি এই পদ্ধতিটি পছন্দ করি যেহেতু আমি বিশেষভাবে প্রকল্পে আমার যা প্রয়োজন তা আমদানি করছি।

Question 5

এটির মূল্যের জন্য আমি নতুন গুগল অনুসন্ধান কনসোল এবং আমার প্রতিক্রিয়া অ্যাপ্লিকেশান (ক্রিয়েট-রিএ্যাক্ট-অ্যাপ) নিয়ে সমস্যা হচ্ছিলাম। Es6shim যুক্ত করার পরে, সমস্ত সমাধান করা হয়েছিল।

আমি আমার সর্বজনীন সূচক html পৃষ্ঠাতে নীচে যুক্ত করেছি।

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

Question 6

আপনার তৈরি প্রতিক্রিয়া অ্যাপ্লিকেশন প্রকল্প থেকে বের করুন

এরপরে আপনি আপনার সমস্ত পলিফিলগুলি আপনার /config/polyfills.jsফাইলটিতে রাখতে পারেন

ফাইলটির শেষে নিম্নলিখিতটি রাখুন

Object.values = Object.values ? Object.values : o=>Object.keys(o).map(k=>o[k]);

ওয়েবপ্যাকটি স্বয়ংক্রিয়ভাবে আপনার জন্য এটি ঠিক করে দেবে;)

Question 7

আমারও একই সমস্যা ছিল। ড্যানিয়েল লোইটারনের একটি সমাধান আমার পক্ষে কার্যকর হয়নি। কিন্তু! আমি কোর-জেএস থেকে আরও একটি আমদানি যুক্ত করেছি import 'core-js/modules/es6.symbol';এবং এটি আইই 11 এ আমার জন্য কাজ করে।