M

MLOG

العربية

استكشف ESBuild، أداة تجميع وتحويل جافاسكريبت فائقة السرعة. تعلم كيف تُحسن سير عمل تطوير الويب لديك للسرعة والكفاءة والأداء.

ESBuild: تجميع وتحويل جافاسكريبت فائق السرعة

في عالم تطوير الويب المتسارع، تعد أدوات البناء ضرورية لتحسين الأداء وتبسيط سير العمل. ظهر ESBuild كأداة غيرت قواعد اللعبة، حيث يوفر سرعة وكفاءة لا مثيل لها في تجميع وتحويل JavaScript. تقدم هذه المقالة دليلًا شاملاً لـ ESBuild، وتستكشف ميزاته وفوائده وتطبيقاته العملية للمطورين في جميع أنحاء العالم.

ما هو ESBuild؟

ESBuild هو مُجمِّع ومُحوِّل JavaScript مكتوب بلغة Go. الهدف الأساسي منه هو توفير أوقات بناء أسرع بكثير مقارنة بأدوات التجميع التقليدية القائمة على JavaScript مثل Webpack و Parcel و Rollup. يحقق ESBuild هذه السرعة من خلال العديد من التحسينات الرئيسية، بما في ذلك:

يدعم ESBuild مجموعة واسعة من الميزات، مما يجعله أداة متعددة الاستخدامات لتطوير الويب الحديث:

لماذا تستخدم ESBuild؟

الفائدة الأساسية من استخدام ESBuild هي سرعته. غالبًا ما تكون أوقات البناء أسرع بكثير من أدوات التجميع الأخرى. تترجم هذه السرعة إلى:

بالإضافة إلى السرعة، يوفر ESBuild مزايا مقنعة أخرى:

البدء باستخدام ESBuild

لبدء استخدام ESBuild، ستحتاج إلى تثبيت Node.js و npm (أو Yarn) على نظامك.

التثبيت

قم بتثبيت ESBuild عالميًا أو كأحد تبعيات المشروع:

npm install -g esbuild
# or
npm install --save-dev esbuild

الاستخدام الأساسي

أبسط طريقة لاستخدام ESBuild هي من سطر الأوامر:

esbuild input.js --bundle --outfile=output.js

يقوم هذا الأمر بتجميع input.js وجميع تبعياته في ملف واحد يسمى output.js.

ملف التكوين (اختياري)

بالنسبة للمشاريع الأكثر تعقيدًا، يمكنك إنشاء ملف تكوين (على سبيل المثال، esbuild.config.js) لتحديد خيارات البناء الخاصة بك:

// esbuild.config.js
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm', // or 'cjs' for CommonJS
  minify: true,
  sourcemap: true,
}).catch(() => process.exit(1));

ثم، قم بتشغيل ESBuild باستخدام ملف التكوين:

node esbuild.config.js

الميزات والإعدادات المتقدمة

يوفر ESBuild مجموعة واسعة من الخيارات لتخصيص عملية الإنشاء الخاصة بك. فيما يلي بعض الميزات وخيارات التكوين الرئيسية:

تقسيم التعليمات البرمجية

يقسم تقسيم التعليمات البرمجية تعليمات تطبيقك إلى أجزاء أصغر يمكن تحميلها عند الطلب. يمكن لهذا الإجراء أن يحسن بشكل كبير أوقات تحميل الصفحة الأولية عن طريق تقليل مقدار JavaScript الذي يحتاج إلى تنزيله وتحليله مسبقًا.

لتمكين تقسيم التعليمات البرمجية، استخدم الخيار format: 'esm' وحدد دليلاً لملفات الإخراج:

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outdir: 'dist',
  format: 'esm',
  splitting: true,
  minify: true,
  sourcemap: true,
}).catch(() => process.exit(1));

سيقوم ESBuild تلقائيًا بإنشاء أجزاء منفصلة لنقاط دخول تطبيقك وأي وحدات مستوردة ديناميكيًا.

التصغير وهز الشجرة

يعمل التصغير على تقليل حجم التعليمات البرمجية عن طريق إزالة المسافات البيضاء وتقصير أسماء المتغيرات وتطبيق التحسينات الأخرى. تعمل هز الشجرة على إزالة التعليمات البرمجية غير المستخدمة (التعليمات البرمجية التي لم يتم تنفيذها أبدًا) لتقليل حجم الحزمة بشكل أكبر.

لتمكين التصغير وهز الشجرة، استخدم الخيار minify: true:

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  minify: true,
  treeShaking: true, // Enabled by default when minify is true
  sourcemap: true,
}).catch(() => process.exit(1));

يتم تمكين هز الشجرة افتراضيًا عند تمكين التصغير.

المكونات الإضافية

يتيح لك نظام المكونات الإضافية في ESBuild توسيع وظائفه باستخدام مكونات إضافية مخصصة. يمكن استخدام المكونات الإضافية لأداء مجموعة متنوعة من المهام، مثل:

فيما يلي مثال لمكون إضافي بسيط لـ ESBuild يحل محل جميع تكرارات __VERSION__ بالإصدار الحالي لحزمتك:

// version-plugin.js
const fs = require('fs');
const path = require('path');

function versionPlugin() {
  return {
    name: 'version-plugin',
    setup(build) {
      build.onLoad({ filter: /\.(js|ts|jsx|tsx)$/ }, async (args) => {
        const contents = await fs.promises.readFile(args.path, 'utf8');
        const packageJsonPath = path.resolve(process.cwd(), 'package.json');
        const packageJson = JSON.parse(await fs.promises.readFile(packageJsonPath, 'utf8'));
        const version = packageJson.version;
        const modifiedContents = contents.replace(/__VERSION__/g, version);
        return {
          contents: modifiedContents,
          loader: args.loader,
        };
      });
    },
  };
}

module.exports = versionPlugin;

لاستخدام المكون الإضافي، قم بتضمينه في تكوين ESBuild الخاص بك:

// esbuild.config.js
const esbuild = require('esbuild');
const versionPlugin = require('./version-plugin');

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  minify: true,
  sourcemap: true,
  plugins: [versionPlugin()],
}).catch(() => process.exit(1));

البيئات المستهدفة

يتيح لك ESBuild تحديد البيئات المستهدفة للتعليمات البرمجية الخاصة بك. يضمن هذا أن التعليمات البرمجية الخاصة بك متوافقة مع المتصفحات أو إصدارات Node.js التي تستهدفها. ستستخدم المناطق وقواعد المستخدمين المختلفة متصفحات وإصدارات مختلفة. هذه الميزة ضرورية لتطوير التطبيقات العالمية.

استخدم الخيار target لتحديد البيئات المستهدفة:

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  minify: true,
  sourcemap: true,
  target: ['es2015', 'chrome58', 'firefox57', 'safari11', 'edge16'],
}).catch(() => process.exit(1));

في هذا المثال، سيقوم ESBuild بتحويل التعليمات البرمجية الخاصة بك لتكون متوافقة مع ES2015 و Chrome 58 و Firefox 57 و Safari 11 و Edge 16.

ESBuild مقابل أدوات التجميع الأخرى

بينما يوفر ESBuild مزايا سرعة كبيرة، من المهم مراعاة المفاضلات الخاصة به مقارنة بأدوات التجميع الأخرى مثل Webpack و Parcel و Rollup.

Webpack

Webpack هو أداة تجميع قابلة للتكوين للغاية ومتعددة الاستخدامات مع نظام بيئي كبير وناضج. إنه يوفر مجموعة واسعة من الميزات والمكونات الإضافية، ولكن تعقيده قد يمثل عائقًا للدخول. يكون ESBuild عادةً أسرع بكثير من Webpack لمعظم المشاريع، ولكن قد يكون النظام البيئي الواسع للمكونات الإضافية لـ Webpack ضروريًا لبعض حالات الاستخدام.

Parcel

Parcel هو أداة تجميع بدون تكوين تهدف إلى توفير تجربة تطوير بسيطة وبديهية. يكتشف أصول مشروعك ويجمعها تلقائيًا، ولكن الافتقار إلى إمكانية التكوين يمكن أن يكون مقيدًا للمشاريع المعقدة. ESBuild أسرع بشكل عام من Parcel ويوفر المزيد من خيارات التكوين.

Rollup

Rollup هو أداة تجميع مصممة خصيصًا لإنشاء مكتبات JavaScript. إنه يتفوق في هز الشجرة وإنشاء حزم مُحسَّنة للغاية. ESBuild أسرع عادةً من Rollup، خاصة بالنسبة للمشاريع الأكبر حجمًا، ويوفر دعمًا أكثر شمولاً لأنواع الملفات والميزات المختلفة.

فيما يلي جدول يلخص الاختلافات الرئيسية:

الميزة ESBuild Webpack Parcel Rollup
السرعة سريع جدًا معتدل معتدل سريع
التكوين معتدل مرتفع منخفض معتدل
النظام البيئي للمكونات الإضافية متنامي ناضج محدود معتدل
حالات الاستخدام تطبيقات الويب والمكتبات تطبيقات الويب تطبيقات الويب البسيطة مكتبات JavaScript

أمثلة عملية وحالات الاستخدام

يمكن استخدام ESBuild في مجموعة متنوعة من مشاريع تطوير الويب. فيما يلي بعض الأمثلة العملية وحالات الاستخدام:

إنشاء تطبيق React

يمكن استخدام ESBuild لتجميع تطبيق React مع دعم TypeScript و JSX. إليك مثال على التكوين:

// esbuild.config.js
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.tsx'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  minify: true,
  sourcemap: true,
  jsxFactory: 'React.createElement',
  jsxFragment: 'React.Fragment',
  loader: {
    '.ts': 'tsx',
    '.js': 'jsx',
  },
}).catch(() => process.exit(1));

يوجه هذا التكوين ESBuild لتجميع ملف src/index.tsx وتحويل بناء جملة JSX و TSX وإنشاء حزمة مُصغَّرة مع خرائط المصدر.

إنشاء تطبيق Vue.js

بينما لا يدعم ESBuild مكونات الملف الواحد Vue.js (ملفات .vue) في الأصل، يمكنك استخدام مكون إضافي مثل esbuild-plugin-vue3 لإضافة الدعم لها. تحظى Vue.js بشعبية في أجزاء كثيرة من العالم، مثل شرق آسيا.

// esbuild.config.js
const esbuild = require('esbuild');
const vuePlugin = require('esbuild-plugin-vue3');

esbuild.build({
  entryPoints: ['src/main.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  minify: true,
  sourcemap: true,
  plugins: [vuePlugin()],
}).catch(() => process.exit(1));

يستخدم هذا التكوين المكون الإضافي esbuild-plugin-vue3 للتعامل مع ملفات .vue وتجميع تطبيق Vue.js الخاص بك.

إنشاء تطبيق Node.js

يمكن أيضًا استخدام ESBuild لتجميع تطبيقات Node.js. قد يكون هذا مفيدًا لإنشاء ملفات قابلة للتنفيذ ذات ملف واحد أو لتحسين وقت بدء تشغيل تطبيقك.

// esbuild.config.js
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  platform: 'node',
  format: 'cjs',
  minify: true,
  sourcemap: true,
}).catch(() => process.exit(1));

يوجه هذا التكوين ESBuild لتجميع الملف src/index.js لمنصة Node.js، باستخدام تنسيق الوحدة النمطية CommonJS.

ESBuild في مناطق وبيئات مختلفة

تجعل سرعة ESBuild وكفاءته أداة قيمة لمطوري الويب في جميع أنحاء العالم. فيما يلي بعض الاعتبارات لاستخدام ESBuild في مناطق وبيئات مختلفة:

أفضل الممارسات لاستخدام ESBuild

لتحقيق أقصى استفادة من ESBuild، اتبع أفضل الممارسات التالية:

الخاتمة

ESBuild هو أداة تجميع وتحويل JavaScript قوية وفعالة يمكنها تحسين سير عمل تطوير الويب بشكل كبير. إن سرعته وبساطته وميزاته الحديثة تجعله خيارًا ممتازًا للمشاريع من جميع الأحجام. باتباع أفضل الممارسات الموضحة في هذه المقالة، يمكنك الاستفادة من ESBuild لإنشاء تطبيقات ويب أسرع وأكثر كفاءة وأكثر قابلية للصيانة للمستخدمين في جميع أنحاء العالم.

سواء كنت تقوم ببناء موقع ويب صغير أو تطبيق مؤسسي كبير، يمكن أن يساعدك ESBuild في تحسين عملية تطوير الواجهة الأمامية الخاصة بك وتقديم تجربة مستخدم أفضل. إن سرعته وكفاءته تجعله أصلًا قيمًا لمجموعة أدوات أي مطور ويب. نظرًا لأن مشهد تطوير الويب يستمر في التطور، فإن ESBuild على استعداد لأن يظل الخيار الرائد لتجميع وتحويل JavaScript، مما يمكّن المطورين من إنشاء تطبيقات ويب أسرع وأكثر كفاءة لجمهور عالمي.

بينما يستمر ESBuild في التطور، راقب مساهمات المجتمع والتحديثات الرسمية للاستفادة من أحدث الميزات والتحسينات. من خلال البقاء على اطلاع والمشاركة بنشاط في النظام البيئي لـ ESBuild، يمكنك التأكد من أن مشاريع تطوير الويب الخاصة بك تستفيد من الأداء والقدرات المتطورة التي يوفرها ESBuild.