از بسته وب تا vite: وضوح ماژول سفارشی، واردات sass، پیکربندی babel

زمینه

از آنجایی که مدت‌ها کاربر Webpack بودم و بر اکثر ویژگی‌های آن تسلط داشتم، تمایلی به مهاجرت به ابزار ساخت دیگر نداشتم.

از طرف دیگر، اخباری مانند استوری‌بوک که پشتیبانی از vite را بهبود می‌بخشد یا سرعت گرفتن Vite باعث شد من به فکر مهاجرت از ابزار قدیمی باشم. توسعه‌دهنده اصلی Webpack که به پروژه دیگری منتقل شد، در تصمیم‌گیری برای مدرن‌سازی پشته ساخت کمک کرد.

من می‌توانم Turbopack یا Rspack را امتحان کنم که صراحتاً قصد دارد یک جانشین وب‌پک باشد، اما تصمیم گرفتم با Vite که در حال حاضر بالغ‌تر است، استفاده کنم.

در زیر مشکلاتی که با آنها مواجه شدم و نحوه غلبه بر آنها آورده شده است.

وضوح ماژول سفارشی

من Webpack را برای جستجوی ماژول ها در آن پیکربندی کرده ام ./src و ./src/common. را resolve.modules گزینه آن را مستقیم جلوه می دهد:

 {
   //.. 
   resolve: {
     modules: [
        path.resolve(__dirname, './src/common'),
        path.resolve(__dirname, './src'),
        'node_modules',
     ],
   },
 } 

این گزینه ای است که من انتظار داشتم توسط Vite افشا شود، اما وجود ندارد و نخواهد بود.

به دنبال پیشنهاد در شماره، من به vite-tsconfig-paths نگاه کردم که حتی بهتر است زیرا من قبلاً vscode را از طریق پیکربندی typescript پیکربندی کرده ام:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    // This must be specified if "paths" is set
    "baseUrl": "./src/",
    // Relative to "baseUrl"
    "paths": {
      "*": [
        "./common/*",
        "*"
      ]
    }
  }
}

یک مشکل کوچک انتقال را کمی به تاخیر انداخت: عدم پشتیبانی از jsconfig.json. تغییر نام jsconfig.json به tsconfig.json و اضافه کردن allowJs گزینه باعث شد کار کند.

به عنوان یک امتیاز، پیکربندی جستجوی ماژول اکنون تنها در یک مکان است.

وارد کردن ماژول های ساس خارجی

با Webpack من باید یک “~” در جلوی نام ماژول به ترتیب وارد کردن sass اضافه کنم.

Vite به آن نیاز ندارد.

@import '~bootstrap/scss/bootstrap';

تبدیل می شود

@import 'bootstrap/scss/bootstrap';

پیکربندی بابل

من از دکوراتورها به طور گسترده در پروژه هایم استفاده می کنم، بنابراین Babel مورد نیاز است. vite-plugin-babel آنچه را که من نیاز دارم انجام می دهد: هم در توسعه و هم در تولید.

در ابتدا فقط با پیروی از دستورالعمل های پروژه کار می کرد، اما برای مطابقت با نیازهای من نیاز به تغییراتی دارد:

• اضافه کردن نقشه های منبع در حال توسعه. گزینه babelConfig: { sourceMaps: mode === 'development' ? 'inline' : false } آن را به کار انداخت.
• node_modules را حذف کنید. به‌طور پیش‌فرض vite-plugin-babel همه جاوا اسکریپت‌ها از جمله آنهایی که از بسته‌های خارجی هستند را ترجمه می‌کند. تنظیمات filter: /^(?!.*node_modules(?!.*luipack)).*\.jsx?$/ این ترفند را انجام داد (ماژول luipack باید ترجمه شود)

برداشت های اولیه

تا اینجا، نتیجه همان چیزی است که انتظار داشتم: راه اندازی سریعتر و بارگیری مجدد با پیکربندی کمتر.

من فقط یک برنامه شروع را مهاجرت کردم اما امیدوارم با پروژه های واقعی / بزرگ از مزایای مشابهی برخوردار شوم.