Nurga all: Kuidas toetada IE11

Selles artiklis näitan teile toiminguid Internet Explorer 11 toetamiseks nurga all. Selle esimene pool näitab kiiresti vajalikud toimingud ja teine ​​pool jaotab need üksikasjalikumalt kõigile, kes soovivad rohkem teada saada. Lõpuks lisan veel mõned näpunäited, mis võivad ilmneda reaalainete rakenduses.

Teeme selle korda

1. samm - ES5 sihtimine

IE11 toetab parimal juhul ainult ES5. Seetõttu peame oma tsconfig.jsonit värskendama. Värskendage kompilaatoriOptionsis olevat atribuuti, et see vastaks järgmisele, kui see pole veel olemas:

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

2. samm - värskendage ülekandeloendit

Avage brauseriloendifail ja muutke rida mitte IE 9-11, et see vastaks:

mitte IE 9-10 IE 11

3. samm - polütäidised

Kui teie või mõni teie sõltuvustest kasutab ES6 + funktsioone, peate need mitu korda täitma. CoreJS on kaasas nurgainstalli ja seda saab kasutada enamiku vajalike polütäidete jaoks.

Avage fail polyfills.ts ja pange ülaosas BROWSER POLYFILLS alljärgnev:

Kui vajate kiiret võitu (EI SOOVITAKSE):

import 'tuum-js';

Vastasel juhul proovige tuvastada, milliseid polüfitäide te vajate. Ma leidsin, et need hõlmasid minu kasutusjuhtu:

impordi 'core-js / es6 / sümbol'; import 'tuum-js / es6 / objekt'; impordi 'core-js / es6 / function'; import 'core-js / es6 / pars-int'; impordi 'core-js / es6 / pars-float'; impordi 'core-js / es6 / number'; impordi 'core-js / es6 / matemaatika'; import 'core-js / es6 / string'; import „core-js / es6 / kuupäev”; import 'core-js / es6 / regexp'; import 'core-js / es6 / map'; import 'tuum-js / es6 / nõrk-kaart'; import 'core-js / es6 / set'; impordi 'core-js / es6 / array'; impordi 'core-js / es7 / array'; // jaoks .inclates ()

Järgmine osa, mis peame tegema, on leida polüfills.ts ülaosast järgmised read:

/ ** IE10 ja IE11 nõuavad SVG elementide NgClassi toe jaoks järgmist: * / // import 'classlist.js'; // Käivitage `npm install --save classlist.js`.

Vastavalt juhistele: npm install --save classlist.js

ja siis tühistage importimine:

/ ** IE10 ja IE11 nõuavad SVG elementide NgClassi toe jaoks järgmist: * / import 'classlist.js'; // Käivitage `npm install --save classlist.js`.

Kui kasutate nurgelisi materjale või animatsiooniBuilder saidilt @ nurk / platvorm-brauser / animatsioonid, leidke järgmine rida:

// impordi 'veebianimatsioonid-js'; // Käivitage `npm install - salvestage veebianimatsioonid-js`.

Tühistage impordi väljavõte ja käivitage npm install - salvestage veebianimatsioonid-js.

Teie viimane polyfills.ts fail peaks välja nägema sarnane:

Lõpetatud

Ja see ongi kõik! Teil peaks olema hea minna!

Teil võib tekkida veel probleeme. Mõnda neist arutatakse nüüd käesoleva artikli teises pooles.

Aga miks?

Vaatame kiiresti läbi iga ülaltoodud sammu põhjused, enne kui uurime täiendavaid näpunäiteid tekkivate täiendavate probleemide kohta.

  • Sihtmärk ES5: üsna sirgjooneline, IE11 toetab ainult ES5 või madalamat. Seetõttu peab TypeScript teie koodi tõlkima ES5-ga ühilduvaks koodiks.
  • Brauseriloend: see on huvitav. Peame ütlema, et toetame IE 11, kuid kui me ei toeta IE 9 või 10, on sama oluline öelda konkreetselt, et me ei toeta neid, vastasel juhul sisaldab diferentsiaallaadur palju guffi. _ (Aitäh @wescopeland_ selle nõuande eest) _
  • Polütäited - osa raamatukogudest, millega me töötame, või kood, mida me kirjutame, tugineb ECMAScripti versioonide funktsioonidele, mida IE11 ei toeta, seetõttu peame selle funktsiooni ES5-le käsitsi andma, kasutades ümberarvutusi. See võimaldab kaasaegseid funktsioone kasutaval koodil õigesti töötada. (Märkus. Iga polüetäidisega suurendatakse kimbu suurust, nii et imporditavate polütäidete valimisel olge ettevaatlik.)

Mõned täiendavad näpunäited

Ok, nii et motivatsioon selle artikli kirjutamiseks tulenes ülesandest toetada IE11 meie rohelise välja rakenduses. See oli eriti valus, kuna järelmõte tõi seejärel välja IE11 toetamise ühilduvusprobleemid:

Kolmandate osapoolte sõltuvused peavad toetama ES5

See ilmnes kiiresti, kuna vead sülitati hõlpsalt konsooli. Kuid see tõi esile huvitava probleemi.

Nüüd, kui tahame oma rakendusse lisada uue sõltuvuse või teegi, peame veenduma, et see tugineb ES5-le ja toetab seda, vastasel juhul peame selle vahele jätma. See võib potentsiaalselt piirata meie edasisi valikuid, mis pole kunagi ideaalne.

IE11 ei toeta CSS-i kohandatud atribuute

Sellest sai kiiresti põrgu. IE11 ei toeta CSS-i kohandatud omadusi, näiteks - primaarne värv: sinine; mis tähendas, et meie heegeldamise lahendus oli potentsiaalselt trossidel.

Pärast palju uurimist leidsin, et see võib olla mitmekordselt täidetud, kuid minu leitud polüetäidised olid aeglased, mõjutasid kimbu suurust tohutult ega olnud täiesti täiuslikud. puuduvad funktsioonid, näiteks mitu kohandatud atribuuti ühel real muude probleemide hulgas.

Need ei töötanud ka meie konkreetse kasutusotstarbe ja meie pakkumislahenduse jaoks, mis tugines kohandatud atribuutide käitusaja seadistusele.

Minu lahendus sellele tuli css-vars-ponyfill-ist, mis võimaldas käitusel globaalseid kohandatud atribuute seada. Vinge

Stiili atribuudi määramine rakenduses IE11

IE11 lubab DOM Elemendi stiili atribuudi seadistada ainult toetatud CSS-i atribuutidega. Näiteks toimides järgmiselt:

document.body.style = '- põhivärv: sinine; kirjasuurus: 18 pikslit ';

põhjustab IE11-s järgmise tulemuse, kaotades esmase värvi: sinine.

Flexboxi toest tulenevad stiiliprobleemid

IE11 küll toetab flexboxi, kuid selle valimise kohta on väga valiv. Ma märkasin, et kui ma tahan kasutada flexit: 1; et element saaks ülejäänud ruumi täita, pidin IE11-l seadistama täieliku painde omaduse: flex: 1 0 auto; või midagi sarnast.

DevTools'i käitamine IE11-s on vastuolus saidiga zone.js

Jep. Mingil põhjusel põhjustab dev-tööriistade avamisel IE11-l teenindamise ajal konflikte zon.js;

Selle parandamiseks peate pisut täiendava koodi käivitamiseks lisama tsooni globaalse ZONE FLAG-i.

Teete seda saidil polyfills.ts. Leidke importimine zone.js ja lisage järgmine, nii et see näeks välja järgmine:

(aken nagu tahes) .__ Zone_enable_cross_context_check = true; import 'tsoon.js / dist / tsoon'; // Komplektis nurga CLI-ga.

Järeldus

Mul ei olnud lõbus nädala jooksul seda tööle saada. Nüüd, kui olen seda toetanud; Tunnen end päris saavutatuna . Loodan, et see artikkel võib tulevikus kellelegi valu päästa!

Loodetavasti olete selle artikli lugemisest midagi saanud, võib-olla mingi nipi, mida te varem ei teadnud.

Kui teil on küsimusi, küsige julgelt allpool või pöörduge minu poole Twitteris: @FerryColum.

Algselt avaldati aadressil https://dev.to 10. jaanuaril 2020.