Bucaqlı: IE11-i necə dəstəkləmək olar

Bu yazıda Internet Explorer 11-i Angular ilə dəstəkləmək üçün atdığım addımları sizə göstərəcəyəm. Bunun ilk yarısı atmağınız lazım olan addımları tez göstərəcək, ikinci yarısı daha çox məlumat əldə etmək istəyən hər kəs üçün bu addımları daha ətraflı şəkildə qıracaq. Sonda real bir tətbiqdə yarana biləcək bəzi əlavə məsləhətlər əlavə edəcəyəm.

Gəlin bunu edək

1 addım - ES5 hədəflənməsi

IE11 yalnız ən yaxşı ES5 dəstəkləyir. Buna görə tsconfig.json-u yeniləməliyik. Hədəf xüsusiyyətini kompilyatorOptions-da aşağıdakılara uyğunlaşdırmaq üçün yeniləyin:

"compilerOptions": {"hədəf": "es5"}

Addım 2 - broswer siyahısını yeniləyin

Sizə brauzer siyahısı faylını açın və IE 9-11-i olmayan xətti uyğunlaşdırın:

deyil IE 9-10 IE 11

Addım 3 - Polyfills

Siz və ya asılılığınızdan hər hansı biri ES6 + -nin xüsusiyyətlərindən istifadə edirsə, bunları polisə doldurmalı olacaqsınız. CoreJS bucaqlı quraşdırma ilə daxil edilir və tələb olunan polyfillerin əksəriyyəti üçün istifadə edilə bilər.

Polyfills.ts faylınızı açın və aşağıdakıları BROWSER POLYFILLS-in altına qoyun:

Tez bir qalibiyyətə ehtiyacınız varsa (Tövsiyə edilmir):

idxal 'core-js';

Əks təqdirdə, hansı polifillerə ehtiyacınız olduğunu anlamağa çalışın. Bunların istifadə işimi əhatə etdiyini gördüm:

idxal 'core-js / es6 / symbol'; idxal 'core-js / es6 / object'; idxal 'core-js / es6 / function'; idxal 'core-js / es6 / parse-int'; idxal 'core-js / es6 / parse-float'; idxal 'core-js / es6 / number'; idxal 'core-js / es6 / riyaziyyat'; idxal 'core-js / es6 / string'; idxal 'core-js / es6 / date'; idxal 'core-js / es6 / regexp'; idxal 'core-js / es6 / map'; idxal 'core-js / es6 / zəif xəritə'; idxal 'core-js / es6 / set'; idxal 'core-js / es6 / array'; idxal 'core-js / es7 / array'; // üçün .includur ()

Gəlməli olduğumuz növbəti hissə polyfills.ts üst tərəfində aşağıdakı xətləri tapmaqdır:

/ ** IE10 və IE11 SVG elementlərində NgClass dəstəyi üçün aşağıdakıları tələb edir * / // import 'classlist.js'; // `npm quraşdırmasını işə salın - classlist.js`.

Təlimat verildiyi kimi: npm install --sa classlist.js

və sonra idxal kəsilmə:

/ ** IE10 və IE11 SVG elementlərində NgClass dəstəyi üçün aşağıdakıları tələb edir * / import 'classlist.js'; // `npm quraşdırmasını işə salın - classlist.js`.

@ Angular / platform-browser / animasiyalardan Angular Material və ya AnimationBuilder istifadə etsəniz, aşağıdakı sətri tapın:

// idxal 'web-animasiyalar-js'; // `npm quraşdırmasını işə salın - veb-animasiyalar-js-a baxın.

İdxal bəyanatını sərbəst buraxın və npm quraşdırma qurun - web-animasiyalar-js-a baxın.

Son polyfills.ts sənədiniz oxşar görünməlidir:

Tamamlandı

Və bu qədər! Getmək üçün yaxşı olmalısan!

Daha yaxşı məsələlərə də əl ata bilərsiniz. Bunlardan bəziləri bu məqalənin ikinci yarısında müzakirə ediləcəkdir.

Bəs niyə?

Yarana biləcək əlavə problemlərə dair bəzi məsləhətlərə keçmədən əvvəl niyə yuxarıdakı hər addımın səbəblərini araşdıraq.

  • Hədəf ES5: Olduqca sadədir, IE11 yalnız ES5 və ya daha aşağı səviyyəni dəstəkləyir. Buna görə TypeScript kodunuzu ES5 uyğun koda köçürməlidir.
  • Brauzer siyahısı: Bu maraqlıdır. IE 11'yi dəstəklədiyimizi söyləməliyik, ancaq IE 9 və ya 10'u dəstəkləmədiyimiz təqdirdə, onları dəstəkləmədiyimizi söyləmək eyni dərəcədə vacibdir, əks halda diferensial yükləyiciyə çox sayda guff daxil olacaqdır. _ (Bu məsləhət üçün @wescopeland_ üçün təşəkkürlər) _
  • Polyfills - İşlədiyimiz bəzi kitabxanalar və ya yazdığımız kod, ECMAScript-in IE11-in dəstəkləmədiyi versiyalardan olan xüsusiyyətlərə güvənir, buna görə də əl işlərindən istifadə edərək ES5-ə bu funksiyanı təmin etməliyik. Bu, müasir xüsusiyyətlərdən istifadə edən kodun düzgün işləməsinə imkan verəcəkdir. (Qeyd: Hər bir polyfill paketin ölçüsünü artıracaq, ona görə də hansı polfilllərin idxal olunacağını seçərkən diqqətli olun)

Bəzi əlavə məsləhətlər

Ok, buna görə bu yazını yazmaq üçün motivasiya yaşıl sahə tətbiqimizdə IE11-i dəstəkləmək tapşırığından irəli gəldi. Xüsusilə ağrılı idi, çünki sonradan IE11-i dəstəkləyən uyğunluq məsələlərini diqqətə çatdırdı:

Üçüncü tərəflərdən asılılıqlar ES5 dəstəkləməlidir

Səhvlər asanlıqla konsola tüpürüldükdə bu tez aşkar oldu. Ancaq maraqlı bir problemi vurğuladı.

İndi tətbiqimizə yeni bir asılılıq və ya kitabxana daxil etmək istəyiriksə, ES5-ni qurduğuna və dəstəklədiyinə əmin olmalıyıq, əks təqdirdə atlamalıyıq. Bu, heç vaxt ideal olmayan seçimlərimizi məhdudlaşdıra bilər.

IE11 CSS Xüsusi Xüsusiyyətlərini dəstəkləmir

Bu tez cəhənnəmə çevrildi. IE11 CSS Xüsusi Xüsusiyyətlərini, məsələn, - ilkin rəng: mavi; temalı həll yolumuzun potensial olaraq iplər üzərində olması demək idi.

Bir çox araşdırmadan sonra poli doldurulduğunu gördüm, ancaq tapdığım polyfiller yavaş idi, paket ölçüsünə çox təsir etdi və tamamilə mükəmməl deyil. digər məsələlər arasında bir xəttdə çox Şəxsi Xüsusiyyətlər kimi çatışmayan xüsusiyyətlər.

Xüsusi istifadə vəziyyətimiz və Xüsusi Xüsusiyyətlərin işləmə müddətinə söykənən tema həllimiz üçün də işləmədi.

Buna mənim həll yolum qlobal Xüsusi Xüsusiyyətlərin qurulmasına icazə verən css-vars-ponyfilldən gəldi. Zəhmli

IE11-də stil atributu qurulması

IE11 yalnız DOM Elementinin stil atributunu dəstəklədiyi CSS xüsusiyyətləri ilə tənzimləməyə imkan verəcəkdir. Məsələn, aşağıdakıları etmək:

sənəd.body.style = '- ibtidai rəng: mavi; şrift ölçüsü: 18px ';

IE11-də aşağıdakılar ilə nəticələnir, - ilkin rəngini itirir: mavi.

Fleksbox dəstəyindən yaranan üslub problemləri

IE11 flexbox dəstəkləyir, lakin bunun necə edildiyi barədə çox məlumatlıdır. Fleks istifadə etmək istəsəm: 1; Bir elementin qalan məkanı doldurmasına icazə vermək üçün IE11-də, fleks xüsusiyyətini tam təyin etməliydim: flex: 1 0 auto; ya da buna bənzər bir şey.

IE11-də DevTools işlətmək zon.js ilə ziddiyyət təşkil edir

Bəli. Nədənsə IE11-də işləyərkən dev alətlərini açdığınızda zon.js ilə qarşıdurmalara səbəb olur;

Bunu düzəltmək üçün bir az əlavə kodu icra etmək üçün zonaya ümumdünya ZONE FLAG əlavə etməlisiniz.

Bunu polyfills.ts-də edirsiniz. Zon.js idxalını tapın və aşağıdakı kimi göründüyü üçün əlavə edin:

(istənilən kimi pəncərə) .__ Zona_enable_cross_context_check = doğrudur; idxal 'zone.js / dist / zone'; // Angular CLI ilə birlikdə.

Nəticə

Həftə ərzində bunu işə götürmək üçün əylənmədim. İndi mən bunu dəstəklədim; Özümü tamamən hiss edirəm . Ümid edirəm bu məqalə gələcəkdə kiməsə bir ağrı verə bilər!

İnşallah bu yazını oxumaqdan bir şey qazandınız, bəlkə də əvvəllər tanımadığınız bir səliqə.

Hər hansı bir sualınız varsa, aşağıda xahiş et və ya Twitter-də mənə müraciət edin: @FerryColum.

Əvvəlcə https://dev.to saytında 10 Yanvar 2020 tarixində yayımlandı.