Γωνιακή: Πώς να υποστηρίξετε το 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 - Πολυπροπυλένια

Εάν εσείς ή κάποιο από τα εξαρτήματά σας χρησιμοποιείτε χαρακτηριστικά από το ES6 +, θα χρειαστεί να τα συμπληρώσετε. Το CoreJS περιλαμβάνεται στην εφαρμογή γωνιακής εγκατάστασης και μπορεί να χρησιμοποιηθεί για την πλειοψηφία των πολυπροπυλών που χρειάζεστε.

Ανοίξτε το αρχείο polyfills.ts και τοποθετήστε τα παρακάτω στο επάνω μέρος κάτω από το POLYFILLS BROWSER:

Εάν χρειάζεστε μια γρήγορη νίκη (NOT RECOMMED):

εισαγωγή 'core-js';

Διαφορετικά, προσπαθήστε να διακρίνετε ποια polyfills χρειάζεστε. Διαπίστωσα ότι αυτά κάλυψαν τη χρήση μου:

εισαγωγή 'core-js / es6 / σύμβολο'. εισαγωγή 'core-js / es6 / αντικείμενο'; εισαγωγή 'core-js / es6 / λειτουργία'; εισαγωγή 'core-js / es6 / parse-int' εισαγωγή 'core-js / es6 / parse-float'. εισαγωγή 'core-js / es6 / αριθμός'; Εισαγωγή 'core-js / es6 / math'; εισαγωγή 'core-js / es6 / string'; εισαγωγή 'core-js / es6 / ημερομηνία'; εισαγωγή 'core-js / es6 / regexp'. εισαγωγή 'core-js / es6 / map'. εισαγωγή 'core-js / es6 / weak-map'. εισαγωγή 'core-js / es6 / set'. εισαγωγή 'core-js / es6 / array'. εισαγωγή 'core-js / es7 / array'. // για .περιλαμβάνει ()

Το επόμενο μέρος που πρέπει να κάνουμε είναι να βρούμε τις ακόλουθες γραμμές, κοντά στην κορυφή του polyfills.ts:

/ ** Οι IE10 και IE11 απαιτούν τα εξής για την υποστήριξη NgClass στα στοιχεία SVG * / // import 'classlist.js'; // Εκτελέστε `npm install --save classlist.js`.

Σύμφωνα με τις οδηγίες: npm install --save classlist.js

και στη συνέχεια να καταργήσετε την εισαγωγή:

/ ** Οι IE10 και IE11 απαιτούν τα εξής για την υποστήριξη NgClass στα στοιχεία SVG * / import 'classlist.js'. // Εκτελέστε `npm install --save classlist.js`.

Εάν χρησιμοποιείτε το Γωνιακό Υλικό ή το AnimationBuilder από το @ γωνιακό / πλατφόρμα / πρόγραμμα περιήγησης / κινούμενα γραφικά τότε βρείτε την ακόλουθη γραμμή:

// εισαγωγή 'web-animations-js'; // Εκτελέστε `npm install --save web-animations-js`.

Αποσυνδέστε τη δήλωση εισαγωγής και εκτελέστε npm install --save web-animations-js.

Το τελικό αρχείο polyfills.ts θα πρέπει να μοιάζει με:

Ολοκληρώθηκε

Και αυτό είναι! Πρέπει να είσαι καλός για να φύγεις!

Μπορείτε να αντιμετωπίσετε περαιτέρω ζητήματα. Ορισμένα από αυτά θα συζητηθούν τώρα στο δεύτερο μισό αυτού του άρθρου.

Αλλά γιατί;

Ας πάμε γρήγορα να περάσουμε από το γιατί για κάθε βήμα παραπάνω πριν πάμε σε μερικές περαιτέρω συμβουλές για πρόσθετα προβλήματα που μπορεί να προκύψουν.

  • Στόχος ES5: Πολύ απλός, ο IE11 υποστηρίζει μόνο το ES5 ή χαμηλότερο. Επομένως, το TypeScript πρέπει να μεταγλωττίσει τον κωδικό σας σε συμβατό με ES5 κώδικα.
  • Λίστα Browser: Αυτό είναι ένα ενδιαφέρον. Πρέπει να πούμε ότι στηρίζουμε τον IE 11, αλλά αν δεν υποστηρίζουμε IE 9 ή 10, είναι εξίσου σημαντικό να πούμε ότι δεν τους υποστηρίζουμε, διαφορετικά ο διαφορικός φορτωτής θα περιλαμβάνει πολλά κουμπιά. _ (Χάρη @wescopeland_ για αυτές τις συμβουλές) _
  • Polyfills - Ορισμένες από τις βιβλιοθήκες με τις οποίες εργαζόμαστε ή τον κώδικα που γράφουμε βασίζονται σε λειτουργίες από εκδόσεις του ECMAScript που δεν υποστηρίζει το IE11, επομένως πρέπει να παρέχουμε αυτή τη λειτουργία στο ES5 με χρήση χειροκίνητων λύσεων. Αυτό θα επιτρέψει στον κώδικα που χρησιμοποιεί σύγχρονα χαρακτηριστικά να συνεχίσει να λειτουργεί σωστά. (Σημείωση: Κάθε polyfill θα αυξήσει το μέγεθος της δέσμης, οπότε προσέξτε να επιλέξετε ποια polyfills να εισαγάγετε)

Μερικές πρόσθετες συμβουλές

Εντάξει, οπότε το κίνητρο για να γράψω αυτό το άρθρο προήλθε από την υποχρέωση να υποστηρίξουμε τον IE11 στην εφαρμογή μας στο πράσινο πεδίο. Ήταν ιδιαίτερα οδυνηρή καθώς ήταν μια δεύτερη σκέψη που στη συνέχεια τόνισε θέματα συμβατότητας με την υποστήριξη του IE11:

Οι εξαρτήσεις τρίτου μέρους πρέπει να υποστηρίζουν το ES5

Αυτό έγινε φανερό γρήγορα καθώς τα λάθη φεύγουν εύκολα στην κονσόλα. Αλλά έδειξε ένα ενδιαφέρον πρόβλημα.

Τώρα, εάν θέλουμε να συμπεριλάβουμε μια νέα εξάρτηση ή βιβλιοθήκη στην εφαρμογή μας, πρέπει να διασφαλίσουμε ότι βασίζεται και υποστηρίζει το ES5, διαφορετικά πρέπει να το παρακάμψουμε. Αυτό θα μπορούσε ενδεχομένως να περιορίσει τις επιλογές μας προς τα εμπρός, κάτι που δεν είναι ποτέ ιδανικό.

Το IE11 δεν υποστηρίζει CSS Custom Properties

Αυτό έγινε γρήγορα κόλαση. Το IE11 δεν υποστηρίζει προσαρμοσμένες ιδιότητες CSS όπως - αρχικό χρώμα: μπλε; πράγμα που σήμαινε ότι η λύση μας ήταν ενδεχομένως στα σχοινιά.

Μετά από πολλές έρευνες, διαπίστωσα ότι θα μπορούσε να είναι πολυπροπυλένιο, ωστόσο, οι πολυπροπυλέτες που βρήκα ήταν αργές, είχαν τεράστιο αντίκτυπο στο μέγεθος της δέσμης και δεν ήταν τελείως τέλειοι. λείπουν χαρακτηριστικά, όπως πολλαπλές προσαρμοσμένες ιδιότητες σε μια γραμμή μεταξύ άλλων θεμάτων.

Επίσης, δεν λειτούργησαν για τη συγκεκριμένη περίπτωση χρήσης και τη λύση των θεμάτων που βασίστηκαν στη ρύθμιση χρόνου εκτέλεσης των προσαρμοσμένων ιδιοτήτων.

Η λύση μου για αυτό προέκυψε από το css-vars-ponyfill που επέτρεψε τη ρύθμιση των παγκόσμιων προσαρμοσμένων ιδιοτήτων κατά το χρόνο εκτέλεσης. Awesome

Ορισμός του χαρακτηριστικού στυλ στο IE11

Το IE11 επιτρέπει μόνο τη ρύθμιση του χαρακτηριστικού στυλ DOM Element με τις ιδιότητες CSS που υποστηρίζει. Για παράδειγμα, κάντε τα εξής:

document.body.style = '- αρχικό χρώμα: μπλε; μέγεθος γραμματοσειράς: 18px ';

καταλήγει στο εξής στον IE11, χάνοντας το - αρχικό χρώμα: μπλε.

Ζητήματα σχεδίασης που προκύπτουν από την υποστήριξη flexbox

Το IE11 υποστηρίζει το flexbox, αλλά είναι πολύ επιλεκτικό για το πώς το κάνει. Παρατήρησα ότι αν ήθελα να χρησιμοποιήσω flex: 1; για να επιτρέψω σε ένα στοιχείο να γεμίσει τον υπόλοιπο χώρο, στο IE11 έπρεπε να ορίσω την πλήρη ιδιότητα flex: flex: 1 0 auto; ή κάτι παρόμοιο.

Η εκτέλεση DevTools στο IE11 έρχεται σε σύγκρουση με το zone.js

Ναι. Για κάποιο λόγο, όταν ανοίγετε τα εργαλεία dev ενώ έχετε ng εξυπηρετήσει σε IE11 προκαλεί συγκρούσεις με zone.js;

Για να διορθώσετε αυτό πρέπει να προσθέσετε μια σφαιρική ΖΩΝΗ ΖΩΝΗΣ για ζώνη για να εκτελέσετε λίγο πρόσθετο κώδικα.

Κάνετε αυτό στο polyfills.ts. Βρείτε την εισαγωγή του zone.js και προσθέστε τα παρακάτω, ώστε να μοιάζει με αυτό:

(παράθυρο ως οποιοδήποτε) .__ Zone_enable_cross_context_check = true; εισαγωγή 'zone.js / dist / zone'; // Περιλαμβάνεται με γωνιακό CLI.

Συμπέρασμα

Δεν είχα την ευχαρίστηση να προσπαθώ να το βρω αυτό το βράδυ. Τώρα που το έχω στηρίξει. Αισθάνομαι αρκετά επιτυχής . Ελπίζω ότι αυτό το άρθρο μπορεί να σώσει κάποιον πόνο στο μέλλον!

Ας ελπίσουμε ότι έχετε κερδίσει κάτι από την ανάγνωση αυτού του άρθρου, ίσως ένα tidbit που δεν ξέρατε πριν.

Εάν έχετε οποιεσδήποτε ερωτήσεις, μη διστάσετε να ρωτήσετε παρακάτω ή να επικοινωνήσετε μαζί μου στο Twitter: @FerryColum.

Αρχικά δημοσιεύθηκε στη διεύθυνση https://dev.to στις 10 Ιανουαρίου 2020.