הגדרת Babel לטרנספילציית JavaScript: Presets ו-Plugins

הגדרת Babel לטרנספילציית JavaScript

JavaScript מודרני עם אופרטורים ?. ו-?? לא עובד ב-Internet Explorer 11. JSX ו-TypeScript דורשים גם הם עיבוד נוסף. Babel פותר את הבעיות האלה: הוא הופך קוד מודרני לתחביר שדפדפנים ישנים מבינים ומבצע טרנספילציה של JSX, TypeScript, הצעות TC39 ניסיוניות ודקורטורים. הגדרנו את Babel לעשרות פרויקטים—מעמודי נחיתה ועד פלטפורמות SaaS גדולות. הגדרה נכונה מקטינה את גודל ה-bundle ב-20% ומאיצה את טעינת הדפים. במאמר זה, נפרק הגדרה מוכנה לייצור.

מה צריך לדעת לפני שמגדירים

בניות frontend מודרניות כמעט ולא מסתדרות בלי Babel. גם אם משתמשים ב-SWC למהירות, Babel נשאר חיוני לטרנספורמציות AST מורכבות ותוספים מותאמים אישית. הניסיון שלנו מראה ש-Babel מוגדר כראוי מקטין את זמן הדיבאג לדפדפנים ישנים ב-30% ומפחית עלויות תחזוקה באמצעות בחירת polyfill מדויקת. חשוב להבין את ההבדל בין presets לתוספים—presets הם קבוצות של תוספים, ותוספים מבצעים טרנספורמציות AST ספציפיות.

איך להגדיר את Babel: שלב אחר שלב

התקנה והגדרה בסיסית

התקן תלויות עם פקודה אחת:

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/plugin-transform-runtime @babel/runtime 

צור npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/plugin-transform-runtime @babel/runtime בשורש הפרויקט. להלן הגדרה מוכנה ל-frontend מודרני עם React ו-TypeScript. שים לב לקטע babel.config.json: הוא עוקף הגדרות עבור סביבת הבדיקות.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.5%, last 2 versions, not dead, not ie 11",
        "useBuiltIns": "usage",
        "corejs": "3.38",
        "modules": false
      }
    ],
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ],
    [
      "@babel/preset-typescript",
      {
        "allExtensions": true,
        "isTSX": true
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false,
        "helpers": true,
        "regenerator": true
      }
    ]
  ],
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "node": "current"
            },
            "modules": "commonjs"
          }
        ]
      ]
    }
  }
}

הפרמטר env הוא קריטי עבור bundlers—הוא מאפשר ל-Webpack או Rollup לטפל במודולי ECMAScript ולבצע tree-shaking. בסביבת הבדיקות (Jest), { "presets": [ [ "@babel/preset-env", { "targets": "> 0.5%, last 2 versions, not dead, not ie 11", "useBuiltIns": "usage", "corejs": "3.38", "modules": false } ], [ "@babel/preset-react", { "runtime": "automatic" } ], [ "@babel/preset-typescript", { "allExtensions": true, "isTSX": true } ] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": false, "helpers": true, "regenerator": true } ] ], "env": { "test": { "presets": [ ["@babel/preset-env", { "targets": { "node": "current" }, "modules": "commonjs" }] ] } } } נדרש כי Node מצפה ל-CommonJS.

בחירת Presets: טבלה

יעדים ו-browserslist

במקום לקודד יעדים בהגדרת Babel, השתמש ב-"modules": false או בקטע "modules": "commonjs" בתוך .browserslistrc—קובץ זה נקרא אוטומטית על ידי Babel, Autoprefixer וכלים אחרים. דוגמה לייצור:

# .browserslistrc
[production]
> 0.5%
last 2 versions
not dead
not ie 11

[development]
last 1 chrome version
last 1 firefox version
last 1 safari version

Browserslist מכסה כ-95% מהדפדפנים הפעילים. אם צריך לתמוך ב-IE 11, הוסף browserslist, אבל שים לב שזה יגדיל את גודל ה-polyfill ב-15–20%.

דקורטורים ב-TypeScript

דקורטורים (metadata, Angular, MobX, TypeORM) דורשים תוסף מיוחד:

npm install --save-dev @babel/plugin-proposal-decorators 

{
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "version": "2023-11"
      }
    ]
  ]
}

הגרסה package.json היא התקן הסופי של TC39 Stage 3. עבור דקורטורים legacy של TypeScript (# .browserslistrc [production] > 0.5% last 2 versions not dead not ie 11 [development] last 1 chrome version last 1 firefox version last 1 safari version ), השתמש ב-"ie 11".

כתיבת תוסף מותאם אישית

תוספי Babel הם פונקציות שעובדות עם AST. דוגמה: החלף את כל npm install --save-dev @babel/plugin-proposal-decorators ב-noop בייצור:

// babel-plugin-remove-console.js
module.exports = function ({ types: t }) {
  return {
    visitor: {
      CallExpression(path) {
        const callee = path.get('callee');
        if (
          callee.isMemberExpression() &&
          callee.get('object').isIdentifier({ name: 'console' }) &&
          callee.get('property').isIdentifier({ name: 'log' })
        ) {
          path.remove();
        }
      },
    },
  };
};

חבר את התוסף דרך קטע ה-env ב-{ "plugins": [ ["@babel/plugin-proposal-decorators", { "version": "2023-11" }] ] } . תוסף מותאם אישית יכול לעשות כל דבר—מהחלפת קריאות API ועד להטמעת משאבים. זה מספק גמישות ש-SWC לא יכול להתאים לה.

אינטגרציה עם כלי בנייה

Webpack

התקן "2023-11" והוסף כלל ל-experimentalDecorators: true. הפעל caching כדי להאיץ בניות חוזרות.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            cacheCompression: false,
          },
        },
      },
    ],
  },
};

Jest

Jest קולט אוטומטית את הגדרת Babel אם "legacy" קיים. עבור הגדרה נפרדת, ציין את הנתיב ב-console.log().

// jest.config.js
module.exports = {
  transform: {
    '^.+\.(js|jsx|ts|tsx)$': ['babel-jest', { configFile: './babel.config.test.json' }],
  },
};

תהליך ההתקנה ולוחות זמנים

הגדרת Babel המקצועית שלנו כוללת:

• הגדרת // babel-plugin-remove-console.js module.exports = function ({ types: t }) { return { visitor: { CallExpression(path) { const callee = path.get('callee'); if ( callee.isMemberExpression() && callee.get('object').isIdentifier({ name: 'console' }) && callee.get('property').isIdentifier({ name: 'log' }) ) { path.remove(); } }, }, }; }; עם presets מותאמים ליעדים שלך.
• אינטגרציה עם Webpack, Vite או bundler אחר.
• הגדרת polyfill דרך core-js (שימוש ב-babel.config.json מקטין את גודל ה-bundle ב-20–30% לעומת babel-loader).
• תיעוד עבור browserslist וסביבות.
• תמיכה בתוספים מותאמים אישית אם נדרש.
• בנייה ובדיקה בכל דפדפני היעד.

העלות מחושבת באופן אישי—תלויה במורכבות הפרויקט ובמספר הסביבות. צור קשר לבדיקה חינמית של הבנייה הנוכחית שלך, ונמצא את ההגדרה האופטימלית.

האצת בניות וניתוח

Babel יכול להיות צוואר בקבוק. השתמש ב-caching (webpack.config.js), ולבניות ייצור שקול לעבור ל-SWC. עם זאת, אם אתה צריך טרנספורמציות לא סטנדרטיות, Babel הוא בלתי מנוצח.

נתח מה מתורגם באמצעות ה-CLI: // webpack.config.js module.exports = { module: { rules: [ { test: /\.(js|jsx|ts|tsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { cacheDirectory: true, cacheCompression: false, }, }, }, ], }, }; .

למה להפקיד את ההגדרה בידי מקצוענים?

הגדרת Babel שגויה מובילה ל-polyfills כפולים, גודל bundle מוגדל וזמני טעינה איטיים יותר. במהלך השנים, הגדרנו את Babel ל-50+ פרויקטים ומבטיחים פעולה תקינה בכל דפדפני היעד. הזמן הגדרת Babel לפרויקט שלך—ואנחנו נספק הגדרה אופטימלית.