الزاوي: كيفية دعم IE11

في هذه المقالة سأوضح لك الخطوات التي اتخذتها لدعم Internet Explorer 11 مع Angular. سيعرض النصف الأول من هذا الخطوات التي تحتاج إلى اتخاذها بسرعة ، وسيفصل النصف الثاني هذه الخطوات بمزيد من التفاصيل لأي شخص يرغب في معرفة المزيد. في النهاية ، سأضيف بعض النصائح الإضافية التي قد تظهر في تطبيق واقعي.

دعنا ننجزها

1 الخطوة الأولى - استهداف ES5

يدعم IE11 فقط في أفضل حالاته ES5. لذلك يتعين علينا تحديث tsconfig.json. قم بتحديث الخاصية الهدف في compilerOptions لمطابقة ما يلي ، إن لم يكن بالفعل:

"compilerOptions": {"target": "es5"}

الخطوة 2 - تحديث قائمة broswerlist

افتح ملف قائمة المستعرضات لديك وقم بتغيير الخط غير IE 9-11 للمطابقة:

لا IE 9-10 IE 11

3 الخطوة 3 - العبوات المتعددة

إذا كنت أنت أو أي من تبعياتك تستخدم ميزات من ES6 + ، فستحتاج إلى إعادة ملء تلك الميزات. يتم تضمين CoreJS مع التثبيت الزاوي ، ويمكن استخدامه لغالبية الرقائق المتعددة التي تحتاجها.

افتح ملف polyfills.ts وضع ما يلي في الجزء العلوي ضمن BROWSER POLYFILLS:

إذا كنت بحاجة إلى فوز سريع (غير موصى به):

استيراد "Core-js" ؛

بخلاف ذلك ، حاول تمييز ما إذا كنت ترغب في ذلك. اكتشفت أن هذه الأشياء تغطي حالة الاستخدام الخاصة بي:

استيراد 'core-js / es6 / symbol' ؛ استيراد "core-js / es6 / object" ؛ استيراد "core-js / es6 / function" ؛ استيراد "core-js / es6 / parse-int" ؛ استيراد "core-js / es6 / parse-float" ؛ استيراد "core-js / es6 / number" ؛ استيراد "core-js / es6 / math" ؛ استيراد "core-js / es6 / string" ؛ استيراد "core-js / es6 / date" ؛ استيراد "core-js / es6 / regexp" ؛ استيراد "core-js / es6 / map" ؛ استيراد "core-js / es6 /ضعف-خريطة" ؛ استيراد "core-js / es6 / set" ؛ استيراد 'core-js / es6 / array' ؛ استيراد 'core-js / es7 / array' ؛ // for .includes ()

الجزء التالي الذي نحتاج إلى القيام به هو العثور على السطور التالية ، بالقرب من الجزء العلوي من polyfills.ts:

/ ** يتطلب IE10 و IE11 ما يلي لدعم NgClass على عناصر SVG * / // import 'classlist.js'؛ // تشغيل `npm install - حفظ classlist.js`.

وفقًا للتعليمات: npm install - حفظ classlist.js

ثم قم بإلغاء تعليق الاستيراد:

/ ** يتطلب IE10 و IE11 ما يلي لدعم NgClass على عناصر SVG * / import 'classlist.js'؛ // تشغيل `npm install - حفظ classlist.js`.

إذا كنت تستخدم Angular Material أو AnimationBuilder من @ angular / platform-browser / animations ، فابحث عن السطر التالي:

// import 'web-animations-js'؛ // شغّل `npm install - حفظ الويب- الرسوم المتحركة- js`.

قم بإلغاء تعليق بيان الاستيراد وتشغيل تثبيت npm - حفظ الويب - animations-js.

يجب أن يبدو ملف polyfills.ts النهائي مشابهًا لما يلي:

أنجز

وهذا كل شيء! يجب أن تكون على ما يرام!

قد تواجه مشاكل أخرى. سيتم مناقشة بعض هذه الآن في النصف الثاني من هذه المقالة.

لكن لماذا؟

دعنا نتناول بسرعة سبب كل خطوة أعلاه قبل أن نذهب إلى بعض النصائح الإضافية حول المشاكل الإضافية التي قد تنشأ.

  • الهدف ES5: بسيط جدًا ، يدعم IE11 فقط ES5 أو أقل. لذلك ، يحتاج TypeScript إلى نقل التعليمات البرمجية إلى التعليمات البرمجية المتوافقة مع ES5.
  • قائمة المتصفح: هذه واحدة مثيرة للاهتمام. نحتاج إلى القول أننا ندعم IE 11 ، ولكن إذا لم ندعم IE 9 أو 10 ، فمن المهم أيضًا أن نقول على وجه التحديد أننا لا ندعمهم ، وإلا فإن اللودر التفاضلي سيشمل الكثير من guff. _ (شكرا @ wescopeland_ على هذه النصيحة) _
  • Polyfills - تعتمد بعض المكتبات التي نعمل معها ، أو الشفرة التي نكتبها ، على ميزات من إصدارات ECMAScript التي لا يدعمها IE11 ، لذلك نحتاج إلى توفير هذه الوظيفة لـ ES5 يدويًا باستخدام الحلول البديلة. سيسمح هذا للكود باستخدام الميزات الحديثة بمواصلة العمل بشكل صحيح. (ملاحظة: كل ملف متعدد سوف يزيد من حجم الحزمة ، لذا كن حذرًا عند اختيار أي نوع من المواد المراد استيرادها)

بعض النصائح الإضافية

حسنًا ، جاء الدافع لكتابة هذا المقال من تكليفه بدعم IE11 في تطبيقنا في المجال الأخضر. كان الأمر مؤلمًا بشكل خاص لأنه كان فكرة لاحقة سلطت الضوء بعد ذلك على قضايا التوافق مع دعم IE11:

تحتاج تبعيات الطرف الثالث إلى دعم ES5

أصبح هذا واضحًا بسرعة حيث تم بصق الأخطاء بسهولة في وحدة التحكم. لكنها سلطت الضوء على مشكلة مثيرة للاهتمام.

الآن إذا أردنا تضمين تبعية جديدة أو مكتبة جديدة في تطبيقنا ، فنحن بحاجة إلى التأكد من أنها تبني على ES5 وتدعمها ، وإلا فعلينا تخطيها. هذا يمكن أن يحد من خياراتنا في المستقبل ، وهو ليس مثاليًا على الإطلاق.

لا يدعم IE11 خصائص CSS المخصصة

أصبح هذا الجحيم بسرعة. لا يدعم IE11 خصائص CSS المخصصة مثل --primary-color: blue؛ مما يعني أن حلنا الأساسي كان على الأرجح في الحبال.

بعد الكثير من الاستقصاء ، اكتشفت أنه يمكن إعادة ملئها ، ومع ذلك ، فإن الرقائق المتعددة التي وجدتها كانت بطيئة ، وكان لها تأثير كبير على حجم الحزمة وليست مثالية تمامًا. ميزات مفقودة مثل خصائص مخصصة متعددة في سطر واحد من بين مشكلات أخرى.

كما أنها لم تعمل لحالة الاستخدام الخاصة بنا وحلولنا التي تعتمد على إعداد وقت تشغيل الخصائص المخصصة.

جاء حل هذا من css-vars-ponyfill الذي سمح بإعداد الخصائص المخصصة العامة في وقت التشغيل. رائع

تحديد سمة النمط في IE11

سيسمح IE11 فقط بتعيين سمة نمط عنصر DOM مع خصائص CSS التي يدعمها. على سبيل المثال ، قم بما يلي:

document.body.style = '- اللون الأساسي: أزرق ؛ حجم الخط: 18 بكسل '؛

ينتج عن ما يلي في IE11 ، تفقد اللون الأساسي: أزرق.

مشاكل التصميم الناشئة عن دعم flexbox

IE11 يدعم Flexbox ، لكنه من الصعب إرضاءه حول كيفية القيام بذلك. لاحظت أنه إذا أردت استخدام المرن: 1 ؛ للسماح لعنصر بملء المساحة المتبقية ، في IE11 اضطررت إلى تعيين خاصية الثني الكاملة: flex: 1 0 auto؛ أو شيئا من هذا القبيل.

يتعارض تشغيل DevTools في IE11 مع zone.js

أجل. لسبب ما ، عندما تفتح أدوات dev أثناء تشغيل ng تعمل على IE11 يتسبب في حدوث تعارضات مع zone.js ؛

لإصلاح ذلك ، تحتاج إلى إضافة ZONE FLAG للمنطقة لتنفيذ رمز إضافي قليلاً.

يمكنك القيام بذلك في polyfills.ts. ابحث عن استيراد Zone.js وأضف ما يلي بحيث يبدو كالتالي:

(أي نافذة) .__ Zone_enable_cross_context_check = true ؛ استيراد "zone.js / dist / zone" ؛ // مضمنة مع Angular CLI.

الخلاصة

لم أستمتع بمحاولة تشغيل هذا خلال الأسبوع. الآن بعد أن دعمته. أشعر بالإنجاز الجميل . آمل أن تنقذ هذه المقالة بعض الألم في المستقبل!

آمل أن تكون قد اكتسبت شيئًا من قراءة هذه المقالة ، ربما رواية لم تكن تعرفها من قبل.

إذا كانت لديك أي أسئلة ، فلا تتردد في طرح الأسئلة أدناه أو التواصل معي على Twitter:FerryColum.

نُشر في الأصل على https://dev.to في 10 يناير 2020.