M

MLOG

فارسی

با ESBuild، باندلر و ترنسفورمر فوق سریع جاوا اسکریپت آشنا شوید. بیاموزید چگونه گردش کار توسعه وب شما را برای سرعت، کارایی و عملکرد بهتر بهینه می‌کند.

ESBuild: باندل و تبدیل فوق سریع جاوا اسکریپت

در دنیای پرشتاب توسعه وب، ابزارهای ساخت برای بهینه‌سازی عملکرد و ساده‌سازی گردش کار ضروری هستند. ESBuild به عنوان یک تغییردهنده بازی ظهور کرده و سرعت و کارایی بی‌نظیری را در باندل و تبدیل جاوا اسکریپت ارائه می‌دهد. این مقاله راهنمای جامعی برای ESBuild است که ویژگی‌ها، مزایا و کاربردهای عملی آن را برای توسعه‌دهندگان در سراسر جهان بررسی می‌کند.

ESBuild چیست؟

ESBuild یک باندلر و ترنسفورمر جاوا اسکریپت است که با زبان Go نوشته شده است. هدف اصلی آن ارائه زمان‌های ساخت به طور قابل توجهی سریع‌تر در مقایسه با باندلرهای سنتی مبتنی بر جاوا اسکریپت مانند 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 طیف گسترده‌ای از گزینه‌ها را برای سفارشی‌سازی فرآیند ساخت شما فراهم می‌کند. در اینجا برخی از ویژگی‌ها و گزینه‌های کلیدی پیکربندی آورده شده است:

تقسیم کد (Code Splitting)

تقسیم کد، کد برنامه شما را به قطعات کوچک‌تری تقسیم می‌کند که می‌توانند بر حسب تقاضا بارگذاری شوند. این کار می‌تواند با کاهش مقدار جاوا اسکریپتی که باید در ابتدا دانلود و تجزیه شود، زمان بارگذاری اولیه صفحه را به طور قابل توجهی بهبود بخشد.

برای فعال کردن تقسیم کد، از گزینه 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 به طور خودکار قطعات جداگانه‌ای برای نقاط ورودی برنامه شما و هر ماژول وارد شده به صورت پویا ایجاد می‌کند.

کوچک‌سازی و حذف کد مرده

کوچک‌سازی با حذف فاصله‌های خالی، کوتاه کردن نام متغیرها و اعمال بهینه‌سازی‌های دیگر، حجم کد را کاهش می‌دهد. حذف کد مرده (Tree shaking) کدی را که هرگز اجرا نمی‌شود حذف می‌کند تا حجم باندل را بیشتر کاهش دهد.

برای فعال کردن کوچک‌سازی و حذف کد مرده، از گزینه 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 یک باندلر است که به طور خاص برای ایجاد کتابخانه‌های جاوا اسکریپت طراحی شده است. این ابزار در حذف کد مرده (tree shaking) و تولید باندل‌های بسیار بهینه برتری دارد. ESBuild معمولاً سریع‌تر از Rollup است، به خصوص برای پروژه‌های بزرگ‌تر، و پشتیبانی جامع‌تری برای انواع فایل‌ها و ویژگی‌های مختلف ارائه می‌دهد.

در اینجا جدولی برای خلاصه کردن تفاوت‌های کلیدی آورده شده است:

ویژگی ESBuild Webpack Parcel Rollup
سرعت بسیار سریع متوسط متوسط سریع
پیکربندی متوسط زیاد کم متوسط
اکوسیستم پلاگین در حال رشد بالغ محدود متوسط
موارد استفاده برنامه‌های وب، کتابخانه‌ها برنامه‌های وب برنامه‌های وب ساده کتابخانه‌های جاوا اسکریپت

مثال‌های عملی و موارد استفاده

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 یک باندلر و ترنسفورمر قدرتمند و کارآمد جاوا اسکریپت است که می‌تواند گردش کار توسعه وب شما را به طور قابل توجهی بهبود بخشد. سرعت، سادگی و ویژگی‌های مدرن آن، آن را به گزینه‌ای عالی برای پروژه‌هایی با هر اندازه‌ای تبدیل می‌کند. با پیروی از بهترین شیوه‌های ذکر شده در این مقاله، می‌توانید از ESBuild برای ایجاد برنامه‌های وب سریع‌تر، کارآمدتر و قابل نگهداری‌تر برای کاربران در سراسر جهان استفاده کنید.

چه در حال ساخت یک وب‌سایت کوچک باشید و چه یک برنامه سازمانی بزرگ، ESBuild می‌تواند به شما در بهینه‌سازی فرآیند توسعه فرانت‌اند و ارائه تجربه کاربری بهتر کمک کند. سرعت و کارایی آن، آن را به یک دارایی ارزشمند برای جعبه ابزار هر توسعه‌دهنده وب تبدیل می‌کند. همانطور که چشم‌انداز توسعه وب به تکامل خود ادامه می‌دهد، ESBuild آماده است تا به عنوان یک انتخاب پیشرو برای باندل و تبدیل جاوا اسکریپت باقی بماند و توسعه‌دهندگان را برای ساخت برنامه‌های وب سریع‌تر و کارآمدتر برای مخاطبان جهانی توانمند سازد.

همانطور که ESBuild به تکامل خود ادامه می‌دهد، به مشارکت‌های جامعه و به‌روزرسانی‌های رسمی توجه داشته باشید تا از آخرین ویژگی‌ها و بهینه‌سازی‌ها بهره‌مند شوید. با آگاه ماندن و مشارکت فعال در اکوسیستم ESBuild، می‌توانید اطمینان حاصل کنید که پروژه‌های توسعه وب شما از عملکرد و قابلیت‌های پیشرفته‌ای که ESBuild ارائه می‌دهد، بهره‌مند می‌شوند.