בניית אתרים שפועלים היטב בכל הדפדפנים הנפוצים היא עיקרון מרכזי של סביבה עסקית פתוחה באינטרנט. עם זאת, המשמעות היא שתצטרכו לוודא שכל הקוד שאתם כותבים נתמך בכל דפדפן שאתם מתכננים לטרגט. אם רוצים להשתמש בתכונות חדשות של שפת JavaScript, צריך לבצע טרנספילציה של התכונות האלה לפורמטים שתואמים לאחור לדפדפנים שלא תומכים בהן.
Babel הוא הכלי הנפוץ ביותר לקומפילציה של קוד שמכיל תחביר חדש יותר לקוד שדפדפנים וסביבות שונים (כמו Node) יכולים להבין. במדריך הזה אנחנו יוצאים מנקודת הנחה שאתם משתמשים ב-Babel, ולכן אתם צריכים לפעול לפי הוראות ההגדרה כדי לכלול אותו באפליקציה שלכם, אם עוד לא עשיתם את זה. בוחרים באפשרות webpack
ב-Build Systems אם משתמשים ב-webpack ככלי לאריזת מודולים באפליקציה.
כדי להשתמש ב-Babel רק כדי לבצע טרנספילציה של מה שנדרש למשתמשים, צריך:
- מזהים את הדפדפנים שרוצים לטרגט.
- משתמשים ב-
@babel/preset-envעם יעדי דפדפן מתאימים. - משתמשים ב-
<script type="module">כדי להפסיק לשלוח קוד שעבר הידור לדפדפנים שלא צריכים אותו.
זיהוי הדפדפנים שרוצים לטרגט
לפני שמתחילים לשנות את אופן ההמרה של הקוד באפליקציה, צריך לזהות את הדפדפנים שדרכם ניגשים לאפליקציה. כדאי לנתח את הדפדפנים שבהם המשתמשים שלכם גולשים ואת הדפדפנים שאתם מתכננים לטרגט, כדי לקבל החלטה מושכלת.
שימוש ב- @babel/preset-env
הידור קוד בדרך כלל יוצר קובץ גדול יותר מהקובץ המקורי. צמצום כמות הקומפילציה יכול להקטין את גודל החבילות ולשפר את הביצועים של דף אינטרנט.
במקום לכלול פלאגינים ספציפיים כדי לבצע קומפילציה סלקטיבית של תכונות שפה מסוימות שבהן אתם משתמשים, Babel מספק מספר הגדרות קבועות מראש שכוללות חבילות של פלאגינים. משתמשים ב-@babel/preset-env כדי לכלול רק את הטרנספורמציות וה-polyfills שדרושים לדפדפנים שאתם מתכננים לטרגט.
כוללים את @babel/preset-env במערך presets בקובץ ההגדרות של Babel, .babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
משתמשים בשדה targets כדי לציין אילו גרסאות של דפדפנים רוצים לכלול. לשם כך, מוסיפים שאילתה מתאימה לשדה browsers. @babel/preset-env
משתלב עם browserslist, הגדרה בקוד פתוח שמשותפת בין כלים שונים לטירגוט דפדפנים. רשימה מלאה של שאילתות תואמות זמינה במסמכי התיעוד של browserslist.
אפשרות נוספת היא להשתמש בקובץ .browserslistrc כדי לפרט את הסביבות שרוצים לטרגט.
הערך ">0.25%" אומר ל-Babel לכלול רק את הטרנספורמציות שנדרשות לתמיכה בדפדפנים שמהווים יותר מ-0.25% מהשימוש העולמי. כך מוודאים שהחבילה לא מכילה קוד מיותר שעבר הידור חוזר לדפדפנים שמשמשים אחוז קטן מאוד של משתמשים.
ברוב המקרים, הגישה הזו עדיפה על פני השימוש בהגדרה הבאה:
"targets": "last 2 versions"
הערך "last 2 versions" מבצע קומפילציה של הקוד לשתי הגרסאות האחרונות של כל דפדפן, מה שאומר שיש תמיכה בדפדפנים שהוצאו משימוש כמו Internet Explorer.
אם אתם לא מצפים שהמשתמשים יגשו לאפליקציה שלכם בדפדפנים האלה, יכול להיות שהפעולה הזו תגדיל את גודל החבילה שלא לצורך.
בסופו של דבר, צריך לבחור את השילוב המתאים של שאילתות כדי לטרגט רק דפדפנים שעונים על הצרכים שלכם.
הפעלת תיקוני באגים מודרניים
@babel/preset-env מקבץ כמה תכונות של תחביר JavaScript באוספים, מפעיל אותן או משבית אותן בהתאם לדפדפני היעד שצוינו. למרות שהשיטה הזו עובדת טוב, אוסף שלם של תכונות תחביר עובר שינוי אם דפדפן היעד מכיל באג בתכונה אחת בלבד.
לכן, לעיתים קרובות מתקבל קוד שעבר שינוי רב יותר מהנדרש.
האפשרות bugfixes ב-@babel/preset-env, שפותחה במקור כהגדרה קבועה מראש נפרדת, פותרת את הבעיה הזו על ידי המרת תחביר מודרני שפגום בדפדפנים מסוימים לתחביר המקביל הקרוב ביותר שלא פגום בדפדפנים האלה. התוצאה היא קוד מודרני כמעט זהה עם כמה שינויים קטנים בתחביר שמבטיחים תאימות בכל דפדפני היעד. כדי להשתמש באופטימיזציה הזו, צריך לוודא שמותקנת גרסה 7.10 ואילך של @babel/preset-env, ואז להגדיר את המאפיין bugfixes לערך true:
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
ב-Babel 8, האפשרות bugfixes תופעל כברירת מחדל.
שימוש ב-<script type="module">
מודולים של JavaScript, או מודולים של ES, הם תכונה חדשה יחסית שנתמכת בכל הדפדפנים העיקריים. אפשר להשתמש במודולים כדי ליצור סקריפטים שיכולים לייבא ולייצא ממודולים אחרים, אבל אפשר גם להשתמש בהם עם @babel/preset-env כדי לטרגט רק דפדפנים שתומכים בהם.
במקום לשלוח שאילתה לגבי גרסאות ספציפיות של דפדפנים או נתח שוק, כדאי לציין "esmodules" : true בשדה targets בקובץ .babelrc.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
הרבה תכונות חדשות יותר של ECMAScript שעברו קומפילציה באמצעות Babel כבר נתמכות בסביבות שתומכות במודולים של JavaScript. כך תוכלו לפשט את התהליך של וידוא השימוש רק בקוד שעבר המרה בדפדפנים שבאמת צריכים אותו.
דפדפנים שתומכים במודולים מתעלמים מסקריפטים עם מאפיין nomodule.
לעומת זאת, דפדפנים שלא תומכים במודולים מתעלמים מרכיבי סקריפט עם type="module". זה אומר שאפשר לכלול מודול וגם חלופה שעברה קומפילציה.
מומלץ לכלול את שני הסקריפטים של גרסאות האפליקציה באופן הבא:
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
דפדפנים שתומכים במודולים מאחזרים ומבצעים את main.mjs ומתעלמים מ-compiled.js. בדפדפנים ללא תמיכה במודולים, התהליך הפוך.
אם אתם משתמשים ב-webpack, אתם יכולים להגדיר יעדים שונים בתצורות שלכם לשתי גרסאות נפרדות של האפליקציה:
- גרסה לדפדפנים שתומכים במודולים.
- גרסה שכוללת סקריפט שעבר קומפילציה ופועל בכל דפדפן מדור קודם. גודל הקובץ גדול יותר, כי התהליך של המרת הקוד צריך לתמוך במגוון רחב יותר של דפדפנים.
תודה לקונור קלארק ולג'ייסון מילר על הביקורות שלהם.