কৌণিক: কীভাবে IE11 সমর্থন করবেন

এই নিবন্ধে আমি আপনাকে অ্যাঙ্গুলার সহ ইন্টারনেট এক্সপ্লোরার 11 সমর্থন করার জন্য নেওয়া পদক্ষেপগুলি দেখাব show এর প্রথমার্ধটি আপনার প্রয়োজনীয় পদক্ষেপগুলি তাড়াতাড়ি প্রদর্শন করবে এবং দ্বিতীয়ার্ধে আরও কিছু জানতে আগ্রহী যে কেউ আরও বিশদে এই পদক্ষেপগুলি ভেঙে দেবে। শেষে আমি কিছু অতিরিক্ত টিপস যুক্ত করব যা আসল-বিশ্বের অ্যাপ্লিকেশনটিতে আসতে পারে।

আসুন এটি করা যাক

পদক্ষেপ 1 - লক্ষ্য ES5

আইই 11 কেবলমাত্র সেরা ইএস 5 এ সমর্থন করে। অতএব আমাদের আমাদের tsconfig.json আপডেট করতে হবে। নিম্নলিখিতটি মিলানোর জন্য সংকলকগুলিতে লক্ষ্য সম্পত্তিটি আপডেট করুন, যদি তা ইতিমধ্যে না থাকে:

"সংকলক অপশন": target "লক্ষ্য": "এস 5"}

পদক্ষেপ 2 - ব্রোসওয়ারলিস্ট আপডেট করুন

আপনার ব্রাউজারলিস্ট ফাইলটি খুলুন এবং আইই 9-11 নয় ম্যাচের জন্য লাইনটি পরিবর্তন করুন:

আইই 9-10 আইই 11 নয়

পদক্ষেপ 3 - পলিফিলস

আপনি বা আপনার নির্ভরতাগুলির কোনও যদি ES6 + এর বৈশিষ্ট্যগুলি ব্যবহার করেন তবে আপনাকে সেগুলি পলিফিল করতে হবে। কোরজেএস অ্যাংুলার ইনস্টল সহ অন্তর্ভুক্ত রয়েছে এবং আপনার প্রয়োজনীয় পলিফিলের বেশিরভাগ অংশের জন্য ব্যবহার করা যেতে পারে।

আপনার পলিফিল.এসটি ফাইলটি খুলুন এবং নীচে ব্রাউজার পলফিলসের নীচে শীর্ষে রাখুন:

আপনার যদি দ্রুত জয়ের দরকার হয় (প্রস্তাবিত নয়):

আমদানি 'কোর-জেএস';

অন্যথায়, আপনার কী পলিফিলগুলি প্রয়োজন তা বোঝার চেষ্টা করুন। আমি দেখতে পেয়েছি যে এগুলি আমার ব্যবহারের ক্ষেত্রে আবৃত রয়েছে:

আমদানি করুন 'কোর-জে / এস 6 / প্রতীক'; আমদানি করুন 'কোর-জে / এস 6 / অবজেক্ট'; আমদানি করুন 'কোর-জে / এস 6 / ফাংশন'; আমদানি করুন 'কোর-জে / এস 6 / পার্স-ইন'; আমদানি করুন 'কোর-জে / এস 6 / পার্স-ফ্লোট'; আমদানি করুন 'কোর-জে / এস 6 / নম্বর'; আমদানি করুন 'কোর-জে / এস / / গণিত'; আমদানি করুন 'কোর-জে / এস 6 / স্ট্রিং'; আমদানি করুন 'কোর-জেএস / এস / / তারিখ'; আমদানি করুন 'কোর-জে / এস 6 / রেজিপ এক্স'; আমদানি করুন 'কোর-জে / এস 6 / মানচিত্র'; আমদানি করুন 'কোর-জেএস / এস 6 / দুর্বল-মানচিত্র'; আমদানি করুন 'কোর-জেএস / এস 6 / সেট'; আমদানি করুন 'কোর-জেএস / এস 6 / অ্যারে'; আমদানি করুন 'কোর-জে / এস 7 / অ্যারে'; // জন্য। অন্তর্ভুক্ত ()

পরের অংশটি যা আমাদের করা দরকার তা হ'ল পলফিল.সটসের শীর্ষের নিকটে নিম্নলিখিত লাইনগুলি সন্ধান করা:

/ ** আই 10 এবং আই 11 এর জন্য এসভিজি উপাদানগুলিতে এনগ্লাস ক্লাসের জন্য নিম্নলিখিতগুলির প্রয়োজন * / // আমদানি 'শ্রেণি তালিকা। জেএস'; // চালান `npm ইনস্টল করুন - সেভ শ্রেণি তালিকা। Js``

নির্দেশিত রান হিসাবে: এনপিএম ইনস্টল করুন - সেভ ক্লাসলিস্ট.জে

এবং তারপরে আমদানিটিকে নিয়ন্ত্রণ করুন:

/ ** আই 10 এবং আই 11 এর এসভিজি উপাদানগুলিতে এনগ্লাস ক্লাসের জন্য নিম্নলিখিতগুলি প্রয়োজন / * আমদানি করুন 'শ্রেণি তালিকাভুক্ত'; // চালান `npm ইনস্টল করুন - সেভ শ্রেণি তালিকা। Js``

আপনি যদি @ কৌণিক / প্ল্যাটফর্ম ব্রাউজার / অ্যানিমেশন থেকে কৌণিক উপাদান বা অ্যানিমেশনবিল্ডার ব্যবহার করেন তবে নিম্নলিখিত লাইনটি সন্ধান করুন:

// আমদানি করুন 'ওয়েব-অ্যানিমেশন-জেএস'; // রান করুন pm npm ইনস্টল করুন - সেভ ওয়েব-অ্যানিমেশন-জেএস` `

আমদানির বিবৃতিটি মন্তব্য করুন এবং এনপিএম ইনস্টল করুন - সেভ ওয়েব-অ্যানিমেশন-জেএস চালান।

আপনার চূড়ান্ত পলিফিল.এসটি ফাইলের মতো দেখতে পাওয়া উচিত:

সমাপ্ত

এবং এটাই! আপনার যেতে ভাল হওয়া উচিত!

আপনি আরও সমস্যা ভালভাবে চালাতে পারেন। এর কয়েকটি এখন এই নিবন্ধের দ্বিতীয়ার্ধে আলোচনা করা হবে।

তবে কেন?

আসুন আমরা যে অতিরিক্ত সমস্যা দেখা দিতে পারে তার আরও কিছু টিপসগুলিতে যাওয়ার আগে উপরের প্রতিটি পদক্ষেপের কারণগুলি দ্রুত যাব।

  • লক্ষ্য ES5: খুব সোজা সোজা, IE11 কেবল ES5 বা তার চেয়ে কম সমর্থন করে। অতএব, টাইপস্ক্রিপ্ট আপনার কোডটি ES5 সামঞ্জস্যপূর্ণ কোডে ট্রান্সপ্লাই করা প্রয়োজন।
  • ব্রাউজারলিস্ট: এটি একটি আকর্ষণীয়। আমাদের বলা দরকার যে আমরা আইই ১১-কে সমর্থন করছি, তবে আমরা যদি আইই 9 বা 10 সমর্থন করি না, তবে এটি নির্দিষ্ট করে বলা সমানভাবে গুরুত্বপূর্ণ যে আমরা তাদের সমর্থন করছি না, অন্যথায় ডিফারেনশিয়াল লোডারটিতে প্রচুর পরিমাণে ঘাটতি থাকবে। _ (এই পরামর্শের জন্য @ ওয়েসকোপল্যান্ড_কে ধন্যবাদ) _
  • পলিফিলস - আমরা যে লাইব্রেরি নিয়ে কাজ করি বা আমরা যে কোড লিখি সেগুলির কয়েকটি ECMAScript এর সংস্করণগুলির বৈশিষ্ট্যগুলির উপর নির্ভর করে যা আই 11 সমর্থন করে না, সুতরাং আমাদের ওয়ার্কআরউন্ডগুলি ব্যবহার করে ম্যানুয়ালি ES5 এ এই কার্যকারিতা সরবরাহ করতে হবে। এটি আধুনিক বৈশিষ্ট্যগুলি ব্যবহার করে কোডটিকে সঠিকভাবে চালিয়ে যেতে অনুমতি দেবে। (দ্রষ্টব্য: প্রতিটি পলিফিল বান্ডিলের আকার বাড়িয়ে তুলবে, তাই কোন পলিফিলগুলি আমদানি করতে হবে তা চয়ন করার সময় সাবধানতা অবলম্বন করুন)

কিছু অতিরিক্ত টিপস

ঠিক আছে, সুতরাং এই নিবন্ধটি লেখার অনুপ্রেরণাটি আমাদের সবুজ ক্ষেত্রের অ্যাপ্লিকেশনটিতে আইই 11 সমর্থন করার দায়িত্ব দেওয়া হয়েছিল। এটি বিশেষত বেদনাদায়ক ছিল কারণ এটি একটি চিন্তাভাবনা ছিল যা তখন IE11 সমর্থন করে সামঞ্জস্যতার বিষয়গুলি হাইলাইট করেছিল:

তৃতীয় পক্ষের নির্ভরতা ES5 সমর্থন করা প্রয়োজন

ত্রুটিগুলি সহজে কনসোলে ছড়িয়ে দেওয়া হওয়ায় এটি দ্রুত স্পষ্ট হয়ে ওঠে। তবে এটি একটি আকর্ষণীয় সমস্যা হাইলাইট করেছিল।

এখন যদি আমরা আমাদের অ্যাপ্লিকেশনটিতে একটি নতুন নির্ভরতা বা গ্রন্থাগার অন্তর্ভুক্ত করতে চাই তবে আমাদের এটি নিশ্চিত করতে হবে যে এটি ES5 তে তৈরি করে এবং সমর্থন করে, অন্যথায়, আমাদের এটি এড়িয়ে যেতে হবে। এটি সম্ভাব্যভাবে আমাদের পছন্দগুলি এগিয়ে যেতে সীমিত করতে পারে, যা কখনই আদর্শ নয়।

আইই 11 সিএসএস কাস্টম প্রোপার্টি সমর্থন করে না

এটি দ্রুত জাহান্নামে পরিণত হয়েছিল। আইই 11 সিএসএস কাস্টম বৈশিষ্ট্যগুলিকে সমর্থন করে না যেমন - প্রাইমারি-রঙ: নীল; যার অর্থ হ'ল আমাদের থিশিং সমাধানটি দড়ির উপরে ছিল।

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

তারা আমাদের নির্দিষ্ট ব্যবহারের ক্ষেত্রে এবং আমাদের থিসিং সমাধানের জন্যও কাজ করেনি যা কাস্টম সম্পত্তিগুলির রানটাইম সেটিংয়ের উপর নির্ভর করে।

আমার সমাধানটি সিএসএস-ওয়ার্স-পনিফিল থেকে এসেছে যা রানটাইমের সময় বিশ্বব্যাপী কাস্টম সম্পত্তি স্থাপনের মঞ্জুরি দেয়। দুর্দান্ত

আইই 11 এ শৈলীর বৈশিষ্ট্য নির্ধারণ করা

আইই 11 কেবলমাত্র সিএসএস বৈশিষ্ট্যগুলির সাথে এটি কোনও ডোম এলিমেন্টের স্টাইল বৈশিষ্ট্যটি সেট করার অনুমতি দেবে। উদাহরণস্বরূপ, নিম্নলিখিতগুলি করা:

ডকুমেন্ট.বডি.স্টাইল = '- প্রাথমিক-বর্ণ: নীল; হরফ-আকার: 18px ';

নীচের ফলাফলগুলি আইই 11 এ, - প্রাইমারি-রঙটি হারাতে: নীল।

স্টাইলিং ইস্যুগুলি ফ্লেক্সবক্স সমর্থন থেকে উদ্ভূত

আইই ১১ হ'ল ফ্লেক্সবক্সকে সমর্থন করে তবে এটি কীভাবে এটি করে তা খুব আকর্ষণীয়। আমি লক্ষ্য করেছি যে আমি যদি ফ্লেক্স ব্যবহার করতে চাই: 1; কোনও উপাদানকে অবশিষ্ট স্থান পূরণ করার অনুমতি দেওয়ার জন্য, আইই 11 এ আমাকে পূর্ণ ফ্লেক্স সম্পত্তি সেট করতে হয়েছিল: ফ্লেক্স: 1 0 অটো; বা অনুরূপ কিছু।

আইই 11 এ ডিভলটুলগুলি জোন.জেজেসের সাথে দ্বন্দ্ব রয়েছে

হাঁ। কোনও কারণে, আপনি যখন আইই 11 এ এনজি চালানোর সময় দেব সরঞ্জাম খুলেন তখন জোন.জেএস এর সাথে দ্বন্দ্ব সৃষ্টি হয়;

এটি ঠিক করার জন্য আপনাকে কিছুটা অতিরিক্ত কোড কার্যকর করতে জোনটির জন্য একটি গ্লোবাল জোনে ফ্ল্যাগ যুক্ত করতে হবে।

আপনি এটি পলিফিল.সেটগুলিতে করেন। অঞ্চল.js আমদানি সন্ধান করুন এবং নীচেরগুলি যুক্ত করুন যাতে এটি দেখতে দেখতে এমন হয়:

(উইন্ডো যেকোন হিসাবে) __ অঞ্চল_ সক্ষম_ক্রস_কন্টেক্সট_চেক = সত্য; আমদানি 'জোন.জেএস / ডিস্ট / জোন'; // কৌনিক সিএলআই সহ অন্তর্ভুক্ত।

উপসংহার

আমি সপ্তাহে এই কাজ করতে চেষ্টা মজা না। আমি এখন এটি সমর্থন করেছি; আমি বেশ দক্ষতা বোধ করছি আমি আশা করি এই নিবন্ধটি ভবিষ্যতে কাউকে কিছুটা বেদনা বাঁচাতে পারে!

আশা করি আপনি এই নিবন্ধটি পড়ার মাধ্যমে কিছু অর্জন করেছেন, সম্ভবত এমন একটি বিড়ম্বনা যা আপনি আগে জানতেন না।

আপনার যদি কোনও প্রশ্ন থাকে তবে নিচে নির্দ্বিধায় জিজ্ঞাসা করুন বা টুইটারে আমার কাছে যোগাযোগ করুন: @ ফেরিকলাম।

মূলত প্রকাশিত https://dev.to এ 10 জানুয়ারী, 2020।