Бұрыш: IE11-ті қалай қолдау керек

Бұл мақалада мен Internet Explorer 11-ті Angular-мен қолдау үшін жасаған қадамдарымды көрсетемін. Оның бірінші жартысы сізге қажет қадамдарды тез көрсетеді, ал екінші жартысында көбірек білгісі келетіндер үшін бұл қадамдар толығырақ қарастырылады. Соңында мен нақты әлемде қолдануға болатын қосымша кеңестерді қосамын.

Келіңіздер

1 1-қадам - ​​ES5-ке мақсат қою

IE11 тек ең жақсы ES5 қолдайды. Сондықтан біздің tsconfig.json-ды жаңартуымыз керек. Мақсатты сипатты келесіге сәйкестендіру үшін compilerOptions бағдарламасында жаңартыңыз, егер ондай болмаса:

«compilerOptions»: {«target»: «es5»}

2-қадам - ​​қысқартылған тізімді жаңартыңыз

Сізге шолғыш тізімінің файлын ашып, IE 9-11 емес жолды сәйкес ету үшін өзгертіңіз:

емес IE 9-10 IE 11

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'; import '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'; // үшін .includes ()

Келесі бөлім - polyfills.ts жоғарғы жағында келесі жолдарды табу:

/ ** IE10 және IE11 SVG элементтерінде NgClass қолдауы үшін мыналарды қажет етеді * / // import 'classlist.js'; // npm орнатуды іске қосыңыз - classlist.js` сақтаңыз.

Нұсқаулық бойынша: npm орнату - classlist.js сақтау

содан кейін импортты бөлшектеу:

/ ** IE10 және IE11 SVG элементтерінде NgClass қолдауы үшін мыналарды қажет етеді * / import 'classlist.js'; // npm орнатуды іске қосыңыз - classlist.js` сақтаңыз.

Егер сіз бұрыштық материалды немесе AnimationBuilder-ді @ angular / platform-browser / анимациядан пайдалансаңыз, келесі жолды табыңыз:

// импорттау 'web-animations-js'; // npm орнатуды іске қосыңыз - веб-анимациялар-js сақтаңыз.

Импорт мәлімдемесін жіберіп, npm орнатуды іске қосыңыз - web-animations-js сақтаңыз.

Соңғы polyfills.ts файлыңыз келесідей болуы керек:

Аяқталды

Бұл да сол! Сіз баруыңыз керек!

Басқа мәселелерге тап болуыңыз мүмкін. Енді кейбіреулері осы мақаланың екінші жартысында талқыланады.

Бірақ неге?

Болуы мүмкін қосымша мәселелерге қатысты кеңестерге кіріспес бұрын, жоғарыдағы әр қадамның неліктен тез жүретінін білейік.

  • Мақсатты ES5: өте қарапайым, IE11 тек ES5 немесе одан төмен нұсқаларды қолдайды. Сондықтан TypeScript-ке кодты ES5 үйлесімді кодына аудару қажет.
  • Браузерлер тізімі: Бұл қызықты. Біз IE 11-ді қолдаймыз деп айтуымыз керек, бірақ егер IE 9 немесе 10-ны қолдамасақ, онда біз оларды қолдамайтынымызды айту өте маңызды, әйтпесе дифференциалды жүктегіште көптеген гуфф болады. _ (Осы кеңес үшін @wescopeland_-ге рахмет) _
  • Polyfills - біз жұмыс істейтін кейбір кітапханалар немесе біз жазатын код IMA11 қолдамайтын ECMAScript нұсқаларындағы мүмкіндіктерге сүйенеді, сондықтан біз бұл функцияны ES5-ке қолмен жұмыс жасауды қамтамасыз етуіміз керек. Бұл заманауи мүмкіндіктерді қолданатын кодтың дұрыс жұмыс істеуін жалғастыруға мүмкіндік береді. (Ескерту: Әр полифилия пакеттің көлемін ұлғайтады, сондықтан импорттауды таңдаған кезде абай болыңыз)

Кейбір қосымша кеңестер

Жарайды, сондықтан мақаланы жазуға мотивация IE11-ді біздің жасыл алаңдағы қосымшамызға қосылды. Бұл өте ауыр болды, өйткені кейіннен IE11-ді қолдаудың үйлесімділік мәселелері айтылды:

Үшінші тараптардың тәуелділігі ES5 қолдауына ие болуы керек

Бұл тез арада анықталды, өйткені қателер консольге оңай шашылды. Бірақ бұл қызықты мәселеге назар аударды.

Егер біз жаңа тәуелділікті немесе кітапхананы қосымшамызға қосқымыз келсе, онда ол ES5-ті құрайтынына және оны қолдайтынына көз жеткізуіміз керек, әйтпесе оны өткізіп жіберуге тура келеді. Бұл біздің таңдауымызды ілгерілетуі мүмкін, бұл ешқашан идеал емес.

IE11 CSS Custom сипаттарын қолдамайды

Бұл тез тозаққа айналды. IE11 CSS-тің Custom сипаттарын қолдамайды, мысалы: - бастапқы-color: blue; Бұл біздің тақырыптық шешіміміз арқандарда болуы мүмкін дегенді білдіреді.

Көптеген тергеулерден кейін мен оны полимен толтыруға болатындығын таптым, алайда мен тапқан полифилингтер баяу, байламның көлеміне қатты әсер еткен және мүлдем жетілмеген. жетіспейтін мүмкіндіктер, мысалы, басқа мәселелердің арасында бір жолда бірнеше Custom Properties сияқты.

Сондай-ақ, олар біздің жеке пайдалану жағдайымызға және Custom Properties-тің жұмыс уақыты режиміне негізделген тақырыптық шешімімізге жұмыс істемеді.

Мұны менің шешімім css-vars-ponyfill - жұмыс уақытында ғаламдық Custom Properties орнатуға мүмкіндік берді. Керемет

IE11 стиль атрибутын орнату

IE11 тек DOM Element стиль атрибуциясын CSS қасиеттерімен орнатуға мүмкіндік береді. Мысалы, келесі әрекеттерді орындау:

document.body.style = '- бастапқы түс: көк; шрифт өлшемі: 18px ';

IE11-де келесі нәтижелер пайда болады: - бастапқы түсі: көк.

Flexbox қолдауынан туындаған сәндеу мәселелері

IE11 Flexbox-ты қолдайды, бірақ оның қалай жасалатыны өте қызықты. Егер мен икемді қолданғым келсе: 1; Элементтің қалған кеңістікті толтыруына мүмкіндік беру үшін IE11-де мен толық сипаттамасын орнатуға тура келді: flex: 1 0 auto; немесе ұқсас нәрсе.

IE11-де DevTools-ды іске қосу zon.js-пен қайшы келеді

Иә. Кейбір себептермен, сіз IE11-де жұмыс істей отырып, әзірлеу құралдарын ашқанда, zon.js-пен қайшылықтар туындайды;

Мұны түзету үшін сәл қосымша кодты орындау үшін аймаққа жаһандық ZONE FLAG қосу керек.

Сіз мұны polyfills.ts ішінде жасайсыз. Zon.js импортты тауып, келесідей етіп қосыңыз:

(терезе кез келген сияқты) .__ Zone_enable_cross_context_check = true; импорт 'zone.js / dist / zone'; // Angular CLI-мен бірге.

Қорытынды

Мен бұны бір апта ішінде жұмысқа алғым келмеді. Енді мен оны қолдадым; Өзімді өте жақсы сезінемін . Бұл мақала болашақта біреуді азаптан құтқарады деп сенемін!

Сіз осы мақаланы оқығаннан бір нәрсеге қол жеткізген боларсыз деп үміттенемін, мүмкін сіз бұрын білмеген титт.

Егер сізде сұрақтар туындаса, төмендегілерден сұрай аласыз немесе маған Twitter-де хабарласыңыз: @FerryColum.

Алғашында https://dev.to сайтында 2020 жылдың 10 қаңтарында жарияланған.