راهنمای مهاجرت از Webpack به Vite

Vite آخرین ابزار توسعه frontend است که از رشد فوق العاده ای در محبوبیت و پذیرش برخوردار است.این روند توسط یک مفهوم کلیدی در قلب Vite هدایت می شود: تجربه توسعه دهنده. در مقایسه با Vite، Webpack می تواند زمان ساخت بسیار سریعتر و زمان بارگذاری مجدد hot را در طول توسعه ارائه دهد. این کار را با بهره گیری از ویژگی های مدرن مرورگر مانند ماژول های ES در مرورگر انجام می دهد.

قبل از اینکه به فرآیند مهاجرت از Webpack به Vite بپردازیم، شایان ذکر است که چشم انداز توسعه frontend به طور مداوم در حال تغییر است و Vite تنها ابزاری نیست که در کانون توجه قرار دارد. esbuild یکی دیگر از بسته‌کننده‌ها و مینی‌فایرهای فوق‌العاده سریع جاوا اسکریپت است که توجه توسعه‌دهندگان وب را به خود جلب کرده است.

ملاحظات قبل از مهاجرت به Vite

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

ده‌ها پلاگین اصلی/رسمی Webpack و صدها (احتمالاً هزاران) پلاگین مشارکت‌شده در جامعه در npm وجود دارد که در طول ده سالی که Webpack استفاده می‌شود، توسعه یافته‌اند. در حالی که پشتیبانی از پلاگین برای Vite بسیار خوب است، ممکن است در موقعیتی قرار بگیرید که افزونه ای که برای پروژه خود به آن تکیه می کنید، معادل Vite نداشته باشد و این می تواند به یک مسدود کننده برای مهاجرت شما به Vite تبدیل شود. اگر مشکلی در مهاجرت از Webpack به Vite ندارید می توانید طبق مراحل زیر بدون مشکل مهاجرت کنید.

مرحله 1: نصب Vite

اولین قدم برای انتقال پروژه، ایجاد یک برنامه جدید Vite و کشف ابزاری است که در حال مهاجرت به آن هستید. می توانید یک برنامه Vite جدید را با موارد زیر آماده کنید:

npm create vite@latest

سپس سرور توسعه را به این صورت راه اندازی کنید:

npm run dev

اکنون، به URL نمایش داده شده لوکال هاست در مرورگر خود بروید.

در پروژه Vite یک سری فایل خواهید دید که بسیاری از این موارد برای شما آشنا خواهند بود و جایگزین های مشابهی در برنامه شما خواهند بود.

مرحله 2: ایجاد تغییرات package.json

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

npm install –save vite

بسته به چارچوب فرانت  اند خود، ممکن است بخواهید افزونه فریمورک خاص را نیز نصب کنید. ما در اینجا از React  استفاده می کنیم:

npm install –save @vitejs/plugin-react

همچنین می توانید هر اسکریپت ساختی را که باید از Vite به جای Webpack استفاده کنید، به روز کنید:

–  "build": "webpack --mode production",
–  "dev": "webpack serve",
++   "build": "vite build",
++  "dev": "vite serve",

در همان زمان، Webpack را حذف کنید:

npm uninstall –save webpack webpack-cli wepack-dev-server

اکنون اسکریپت توسعه خود را اجرا کنید تا آن را امتحان کنید!

npm run dev

مرحله 3: با webpack.config خارج شوید، با vite.config وارد شوید

مگر اینکه بسیار خوش شانس باشید، به احتمال زیاد نیاز به تنظیمات اضافی خواهید داشت. Vite از فایل vite.config.js برای پیکربندی استفاده می کند که تا حد زیادی مشابه فایل webpack.config.js موجود شماست.

می‌توانید مستندات کامل این پیکربندی Vite را در vitejs.dev بیابید، اما یک پیکربندی ساده Vite برای یک برنامه React ممکن است به شکل زیر باشد:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  },
})

مرحله 4: پلاگین ها

در زیر هود، Vite از Rollup به عنوان ابزار ساخت خود استفاده می کند و شما می توانید هر پلاگین Rollup را با نصب آنها با npm به Vite اضافه کنید:

npm install –save @rollup/plugin-image

همچنین آنها را به آرایه پلاگین فایل vite.config.js خود اضافه کنید:

// vite.config.js
import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
      image(),
  ],
})

پلاگین های محبوب Webpack و معادل های Vite آنها

در ادامه به برخی از افزونه‌های محبوب Webpack و معادل‌های Vite آن‌ها نگاه می‌کنیم.

HtmlWebpackPlugin -> vite-plugin-html

HtmlWebpackPlugin ایجاد فایل های HTML را برای ارائه بسته های Webpack شما ساده می کند. اگر از HtmlWebpackPlugin در پروژه خود استفاده می کنید، Vite دارای پلاگین vite-plugin-html است که قابلیت های مشابهی را ارائه می دهد. شما می توانید آن را به این صورت نصب کنید:

npm install --save-dev vite-plugin-html

و به این صورت وارد vite.config.js خود کنید:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { createHtmlPlugin } from 'vite-plugin-html'

export default defineConfig({
  plugins: [
    react(),
    createHtmlPlugin({
      entry: 'src/main.js',
      template: 'public/index.html',
      inject: {
        data: {
          title: 'index',
          injectScript: `<script src="./inject.js"></script>`,
        },
    })
  ]
})

MiniCssExtractPlugin -> vite-plugin-purgecss

MiniCssExtractPlugin یک افزونه برای Webpack است که CSS را در فایل های جداگانه استخراج می کند. برای هر فایل جاوا اسکریپتی که حاوی CSS است یک فایل CSS ایجاد می کند. معمولاً در محیط های تولید برای تسهیل بارگذاری کارآمدتر CSS استفاده می شود. فایده این کار دو چندان است. در مرحله اول، CSS را قادر می سازد تا به طور جداگانه توسط مرورگر کش شود. ثانیا، از فلش محتوای بدون استایل جلوگیری می کند، زیرا CSS دیگر در فایل های جاوا اسکریپت تعبیه نشده است و بنابراین می تواند موازی با جاوا اسکریپت بارگذاری شود، و در نتیجه زمان بارگذاری صفحه سریعتر می شود.

در Vite می توانید از vite-plugin-purgecss استفاده کنید:

npm install --save-dev vite-plugin-html-purgecss

از این افزونه در فایل vite.config.js خود استفاده کنید:

import htmlPurge from 'vite-plugin-html-purgecss'

export default {
    plugins: [
        htmlPurge(),
    ]
}

CopyWebpackPlugin -> vite-plugin-static-copy

CopyWebpackPlugin برای کپی کردن فایل ها یا کل دایرکتوری ها در پوشه build استفاده می شود. Vite پلاگین مشابهی به نام vite-plugin-static-copy دارد:

npm install --save-dev vite-plugin-static-copy

کد زیر را در vite.config.js قرار دهید:

import { viteStaticCopy } from 'vite-plugin-static-copy'

export default {
  plugins: [
    viteStaticCopy({
      targets: [
        {
          src: 'bin/example.wasm',
          dest: 'wasm-files'
        }
      ]
    })
  ]
}

DefinePlugin() -> define

در Webpack، DefinePlugin برای جایگزینی توکن ها در کد منبع با مقادیر اختصاص داده شده آنها در زمان کامپایل استفاده می شود. این به شما اجازه می دهد تا ثابت های سراسری را ایجاد کنید که می توانند در زمان کامپایل پیکربندی شوند. در Vite، می توانید با استفاده از گزینه define در vite.config.js به همان افکت برسید، بنابراین ممکن است نیازی به پلاگین نداشته باشید:

export default defineConfig({
  define: {
    'process.env.NODE_ENV': JSON.stringify('production'),
  },
})

نتیجه

این یک راهنمای ساده برای انتقال یک برنامه Webpack frontend به Vite بوده است، از جمله برخی از محبوب ترین افزونه های Webpack.اگر پروژه شما یک پروژه بزرگ و پیچیده با فرآیند build پیچیده است، پیکربندی غنی و انعطاف پذیر Webpack ممکن است بهترین انتخاب شما باشد.

اگر در حال مهاجرت به یک پروژه کوچکتر یا متوسط هستید، Vite مزایای قانع کننده ای را ارائه می دهد. سرعت آن، هم از نظر راه اندازی سرور و هم از نظر جایگزینی ماژول hot، می تواند به طور قابل توجهی بهره وری توسعه را افزایش دهد. سادگی پیکربندی آن نیز می تواند یک مهلت خوشایند باشد، و طراحی آن با ماژول های بومی ES و سازگاری با چارچوب مدرن در ذهن، آن را به خوبی برای آینده تنظیم می کند.

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

همیشه توجه به چشم انداز در حال تکامل ابزارها مفید است. همانطور که به سفر خود ادامه می دهید، ابزارهای مدرن دیگری مانند esbuild و Parcel را نیز در نظر بگیرید تا بهترین مناسب را برای نیازهای پروژه خود بیابید.

به یاد داشته باشید، ابزار مهم نیست، بلکه نحوه استفاده از آن برای رسیدن به اهدافتان مهم است. Webpack، Vite، esbuild و Parcel همگی ابزارهای عالی هستند که برای کمک به شما در ایجاد پروژه های وب درجه یک طراحی شده اند و بهترین مورد برای استفاده به نیازها و محدودیت های خاص شما بستگی دارد.