Vite പ്ലഗിൻ ആർക്കിടെക്ചർ ലളിതമാക്കുന്നു: കസ്റ്റം പ്ലഗിൻ നിർമ്മാണത്തിനുള്ള ഒരു ആഗോള ഗൈഡ്

മിന്നൽ വേഗത്തിലുള്ള ബിൽഡ് ടൂളായ Vite, ഫ്രണ്ട്എൻഡ് ഡെവലപ്‌മെൻ്റിൽ ഒരു വിപ്ലവം സൃഷ്ടിച്ചു. അതിൻ്റെ വേഗതയും ലാളിത്യവും പ്രധാനമായും അതിൻ്റെ ശക്തമായ പ്ലഗിൻ ആർക്കിടെക്ചർ കാരണമാണ്. ഈ ആർക്കിടെക്ചർ ഡെവലപ്പർമാരെ Vite-ൻ്റെ പ്രവർത്തനം വിപുലീകരിക്കാനും അവരുടെ പ്രത്യേക പ്രോജക്റ്റ് ആവശ്യങ്ങൾക്കനുസരിച്ച് ക്രമീകരിക്കാനും അനുവദിക്കുന്നു. ഈ ഗൈഡ് Vite-ൻ്റെ പ്ലഗിൻ സിസ്റ്റത്തെക്കുറിച്ച് സമഗ്രമായ ഒരു പര്യവേക്ഷണം നൽകുന്നു, ഇത് നിങ്ങളെ സ്വന്തമായി കസ്റ്റം പ്ലഗിനുകൾ നിർമ്മിക്കാനും നിങ്ങളുടെ ഡെവലപ്മെൻ്റ് വർക്ക്ഫ്ലോ ഒപ്റ്റിമൈസ് ചെയ്യാനും പ്രാപ്തരാക്കുന്നു.

Vite-ൻ്റെ പ്രധാന തത്വങ്ങൾ മനസ്സിലാക്കൽ

പ്ലഗിൻ നിർമ്മാണത്തിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, Vite-ൻ്റെ അടിസ്ഥാന തത്വങ്ങൾ ഗ്രഹിക്കേണ്ടത് അത്യാവശ്യമാണ്:

• ആവശ്യാനുസരണം കംപൈലേഷൻ: ബ്രൗസർ ആവശ്യപ്പെടുമ്പോൾ മാത്രം Vite കോഡ് കംപൈൽ ചെയ്യുന്നു, ഇത് സ്റ്റാർട്ടപ്പ് സമയം ഗണ്യമായി കുറയ്ക്കുന്നു.
• നേറ്റീവ് ESM: ഡെവലപ്മെൻ്റിനായി Vite നേറ്റീവ് ECMAScript മൊഡ്യൂളുകൾ (ESM) ഉപയോഗിക്കുന്നു, ഇത് ഡെവലപ്മെൻ്റ് സമയത്ത് ബണ്ട്ലിംഗിൻ്റെ ആവശ്യം ഇല്ലാതാക്കുന്നു.
• റോൾഅപ്പ് അടിസ്ഥാനമാക്കിയുള്ള പ്രൊഡക്ഷൻ ബിൽഡ്: പ്രൊഡക്ഷൻ ബിൽഡുകൾക്കായി, കാര്യക്ഷമവും പ്രൊഡക്ഷന് തയ്യാറായതുമായ കോഡ് നിർമ്മിക്കുന്നതിനായി Vite, ഉയർന്ന ഒപ്റ്റിമൈസ് ചെയ്ത ബണ്ട്ലറായ റോൾഅപ്പ് ഉപയോഗിക്കുന്നു.

Vite-ൻ്റെ ഇക്കോസിസ്റ്റത്തിലെ പ്ലഗിനുകളുടെ പങ്ക്

Vite-ൻ്റെ പ്ലഗിൻ ആർക്കിടെക്ചർ ഉയർന്ന തോതിൽ വികസിപ്പിക്കാവുന്ന തരത്തിലാണ് രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്. പ്ലഗിനുകൾക്ക് ഇവ ചെയ്യാനാകും:

• കോഡ് രൂപാന്തരപ്പെടുത്തുക (ഉദാഹരണത്തിന്, ടൈപ്പ്സ്ക്രിപ്റ്റ് ട്രാൻസ്പൈൽ ചെയ്യുക, പ്രീപ്രൊസസ്സറുകൾ ചേർക്കുക).
• കസ്റ്റം ഫയലുകൾ നൽകുക (ഉദാഹരണത്തിന്, സ്റ്റാറ്റിക് അസറ്റുകൾ കൈകാര്യം ചെയ്യുക, വെർച്വൽ മൊഡ്യൂളുകൾ ഉണ്ടാക്കുക).
• ബിൽഡ് പ്രക്രിയ പരിഷ്കരിക്കുക (ഉദാഹരണത്തിന്, ചിത്രങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യുക, സർവീസ് വർക്കറുകൾ നിർമ്മിക്കുക).
• Vite-ൻ്റെ CLI വികസിപ്പിക്കുക (ഉദാഹരണത്തിന്, കസ്റ്റം കമാൻഡുകൾ ചേർക്കുക).

ലളിതമായ മാറ്റങ്ങൾ മുതൽ സങ്കീർണ്ണമായ സംയോജനങ്ങൾ വരെ, വിവിധ പ്രോജക്റ്റ് ആവശ്യകതകളുമായി Vite-നെ പൊരുത്തപ്പെടുത്തുന്നതിനുള്ള താക്കോലാണ് പ്ലഗിനുകൾ.

Vite പ്ലഗിൻ ആർക്കിടെക്ചർ: ഒരു ആഴത്തിലുള്ള പഠനം

ഒരു Vite പ്ലഗിൻ അടിസ്ഥാനപരമായി ഒരു ജാവാസ്ക്രിപ്റ്റ് ഒബ്ജക്റ്റാണ്, അതിൻ്റെ സ്വഭാവം നിർവചിക്കുന്ന പ്രത്യേക പ്രോപ്പർട്ടികൾ ഇതിനുണ്ട്. നമുക്ക് പ്രധാന ഘടകങ്ങൾ പരിശോധിക്കാം:

പ്ലഗിൻ കോൺഫിഗറേഷൻ

`vite.config.js` (അല്ലെങ്കിൽ `vite.config.ts`) ഫയലിലാണ് നിങ്ങൾ നിങ്ങളുടെ Vite പ്രോജക്റ്റ് കോൺഫിഗർ ചെയ്യുന്നത്, ഏതൊക്കെ പ്ലഗിനുകൾ ഉപയോഗിക്കണമെന്ന് വ്യക്തമാക്കുന്നതും ഇതിലുൾപ്പെടുന്നു. `plugins` ഓപ്ഷൻ പ്ലഗിൻ ഒബ്ജക്റ്റുകളുടെ ഒരു നിര അല്ലെങ്കിൽ പ്ലഗിൻ ഒബ്ജക്റ്റുകൾ നൽകുന്ന ഫംഗ്ഷനുകൾ സ്വീകരിക്കുന്നു.

// vite.config.js
import myPlugin from './my-plugin';

export default {
  plugins: [
    myPlugin(), // പ്ലഗിൻ ഇൻസ്റ്റൻസ് ഉണ്ടാക്കാൻ പ്ലഗിൻ ഫംഗ്ഷൻ വിളിക്കുക
  ],
};

പ്ലഗിൻ ഒബ്ജക്റ്റ് പ്രോപ്പർട്ടികൾ

ഒരു Vite പ്ലഗിൻ ഒബ്ജക്റ്റിന് ബിൽഡ് പ്രക്രിയയുടെ വിവിധ ഘട്ടങ്ങളിൽ അതിൻ്റെ സ്വഭാവം നിർവചിക്കുന്ന നിരവധി പ്രോപ്പർട്ടികൾ ഉണ്ടാകാം. ഏറ്റവും സാധാരണമായ പ്രോപ്പർട്ടികളുടെ ഒരു വിവരണം ഇതാ:

• name: പ്ലഗിനിനായുള്ള ഒരു പ്രത്യേക നാമം. ഇത് ആവശ്യമാണ്, ഡീബഗ്ഗിംഗിനും കോൺഫ്ലിക്റ്റ് പരിഹരിക്കുന്നതിനും സഹായിക്കുന്നു. ഉദാഹരണം: `'my-custom-plugin'`
• enforce: പ്ലഗിൻ്റെ എക്സിക്യൂഷൻ ക്രമം നിർണ്ണയിക്കുന്നു. സാധ്യമായ മൂല്യങ്ങൾ `'pre'` (കോർ പ്ലഗിനുകൾക്ക് മുമ്പ് പ്രവർത്തിക്കുന്നു), `'normal'` (സ്ഥിരസ്ഥിതി), കൂടാതെ `'post'` (കോർ പ്ലഗിനുകൾക്ക് ശേഷം പ്രവർത്തിക്കുന്നു) എന്നിവയാണ്. ഉദാഹരണം: `'pre'`
• config: Vite-ൻ്റെ കോൺഫിഗറേഷൻ ഒബ്ജക്റ്റ് പരിഷ്കരിക്കാൻ അനുവദിക്കുന്നു. ഇതിന് ഉപയോക്തൃ കോൺഫിഗും എൻവയോൺമെൻ്റും (മോഡും കമാൻഡും) ലഭിക്കുന്നു. ഉദാഹരണം: `config: (config, { mode, command }) => { ... }`
• configResolved: Vite കോൺഫിഗ് പൂർണ്ണമായി റിസോൾവ് ചെയ്ത ശേഷം വിളിക്കപ്പെടുന്നു. അന്തിമ കോൺഫിഗ് ഒബ്ജക്റ്റ് ആക്സസ് ചെയ്യാൻ ഉപയോഗപ്രദമാണ്. ഉദാഹരണം: `configResolved(config) { ... }`
• configureServer: ഡെവലപ്മെൻ്റ് സെർവർ ഇൻസ്റ്റൻസിലേക്ക് (Connect/Express-like) പ്രവേശനം നൽകുന്നു. കസ്റ്റം മിഡിൽവെയർ ചേർക്കുന്നതിനോ സെർവർ സ്വഭാവം പരിഷ്കരിക്കുന്നതിനോ ഉപയോഗപ്രദമാണ്. ഉദാഹരണം: `configureServer(server) { ... }`
• transformIndexHtml: `index.html` ഫയൽ രൂപാന്തരപ്പെടുത്താൻ അനുവദിക്കുന്നു. സ്ക്രിപ്റ്റുകൾ, സ്റ്റൈലുകൾ, അല്ലെങ്കിൽ മെറ്റാ ടാഗുകൾ ചേർക്കാൻ ഉപയോഗപ്രദമാണ്. ഉദാഹരണം: `transformIndexHtml(html) { ... }`
• resolveId: മൊഡ്യൂൾ റെസല്യൂഷൻ തടസ്സപ്പെടുത്താനും പരിഷ്കരിക്കാനും അനുവദിക്കുന്നു. കസ്റ്റം മൊഡ്യൂൾ റെസല്യൂഷൻ ലോജിക്കിന് ഉപയോഗപ്രദമാണ്. ഉദാഹരണം: `resolveId(source, importer) { ... }`
• load: കസ്റ്റം മൊഡ്യൂളുകൾ ലോഡുചെയ്യാനോ നിലവിലുള്ള മൊഡ്യൂൾ ഉള്ളടക്കം പരിഷ്കരിക്കാനോ അനുവദിക്കുന്നു. വെർച്വൽ മൊഡ്യൂളുകൾക്കോ ​​കസ്റ്റം ലോഡറുകൾക്കോ ​​ഉപയോഗപ്രദമാണ്. ഉദാഹരണം: `load(id) { ... }`
• transform: മൊഡ്യൂളുകളുടെ സോഴ്സ് കോഡ് രൂപാന്തരപ്പെടുത്തുന്നു. ഒരു Babel പ്ലഗിൻ അല്ലെങ്കിൽ PostCSS പ്ലഗിനിന് സമാനം. ഉദാഹരണം: `transform(code, id) { ... }`
• buildStart: ബിൽഡ് പ്രക്രിയയുടെ തുടക്കത്തിൽ വിളിക്കപ്പെടുന്നു. ഉദാഹരണം: `buildStart() { ... }`
• buildEnd: ബിൽഡ് പ്രക്രിയ പൂർത്തിയായ ശേഷം വിളിക്കപ്പെടുന്നു. ഉദാഹരണം: `buildEnd() { ... }`
• closeBundle: ബണ്ടിൽ ഡിസ്കിലേക്ക് എഴുതിയ ശേഷം വിളിക്കപ്പെടുന്നു. ഉദാഹരണം: `closeBundle() { ... }`
• writeBundle: ബണ്ടിൽ ഡിസ്കിലേക്ക് എഴുതുന്നതിന് മുമ്പ് വിളിക്കുന്നു, ഇത് പരിഷ്കരിക്കാൻ അനുവദിക്കുന്നു. ഉദാഹരണം: `writeBundle(options, bundle) { ... }`
• renderError: ഡെവലപ്‌മെൻ്റ് സമയത്ത് കസ്റ്റം എറർ പേജുകൾ റെൻഡർ ചെയ്യാൻ അനുവദിക്കുന്നു. ഉദാഹരണം: `renderError(error, req, res) { ... }`
• handleHotUpdate: HMR-ൽ സൂക്ഷ്മമായ നിയന്ത്രണം അനുവദിക്കുന്നു. ഉദാഹരണം: `handleHotUpdate({ file, server }) { ... }`

പ്ലഗിൻ ഹുക്കുകളും എക്സിക്യൂഷൻ ഓർഡറും

Vite പ്ലഗിനുകൾ ബിൽഡ് പ്രക്രിയയുടെ വിവിധ ഘട്ടങ്ങളിൽ ട്രിഗർ ചെയ്യപ്പെടുന്ന ഹുക്കുകളിലൂടെയാണ് പ്രവർത്തിക്കുന്നത്. ഈ ഹുക്കുകൾ ഏത് ക്രമത്തിലാണ് പ്രവർത്തിക്കുന്നത് എന്ന് മനസ്സിലാക്കുന്നത് ഫലപ്രദമായ പ്ലഗിനുകൾ എഴുതുന്നതിന് നിർണ്ണായകമാണ്.

1. config: Vite കോൺഫിഗ് പരിഷ്കരിക്കുക.
2. configResolved: റിസോൾവ് ചെയ്ത കോൺഫിഗ് ആക്സസ് ചെയ്യുക.
3. configureServer: ഡെവ് സെർവർ പരിഷ്കരിക്കുക (ഡെവലപ്മെൻ്റിൽ മാത്രം).
4. transformIndexHtml: `index.html` ഫയൽ രൂപാന്തരപ്പെടുത്തുക.
5. buildStart: ബിൽഡ് പ്രക്രിയയുടെ ആരംഭം.
6. resolveId: മൊഡ്യൂൾ ഐഡികൾ റിസോൾവ് ചെയ്യുക.
7. load: മൊഡ്യൂൾ ഉള്ളടക്കം ലോഡ് ചെയ്യുക.
8. transform: മൊഡ്യൂൾ കോഡ് രൂപാന്തരപ്പെടുത്തുക.
9. handleHotUpdate: ഹോട്ട് മൊഡ്യൂൾ റീപ്ലേസ്മെൻ്റ് (HMR) കൈകാര്യം ചെയ്യുക.
10. writeBundle: ഡിസ്കിലേക്ക് എഴുതുന്നതിന് മുമ്പ് ഔട്ട്പുട്ട് ബണ്ടിൽ പരിഷ്കരിക്കുക.
11. closeBundle: ഔട്ട്പുട്ട് ബണ്ടിൽ ഡിസ്കിൽ എഴുതിയതിന് ശേഷം വിളിക്കപ്പെടുന്നു.
12. buildEnd: ബിൽഡ് പ്രക്രിയയുടെ അവസാനം.

നിങ്ങളുടെ ആദ്യത്തെ കസ്റ്റം Vite പ്ലഗിൻ നിർമ്മിക്കുന്നു

പ്രൊഡക്ഷൻ ബിൽഡിലെ ഓരോ ജാവാസ്ക്രിപ്റ്റ് ഫയലിൻ്റെയും മുകളിൽ ഒരു ബാനർ ചേർക്കുന്ന ഒരു ലളിതമായ Vite പ്ലഗിൻ നമുക്ക് നിർമ്മിക്കാം. ഈ ബാനറിൽ പ്രോജക്റ്റിൻ്റെ പേരും പതിപ്പും ഉൾപ്പെടും.

പ്ലഗിൻ നിർവ്വഹണം

// banner-plugin.js
import { readFileSync } from 'node:fs';
import { resolve } from 'node:path';

export default function bannerPlugin() {
  return {
    name: 'banner-plugin',
    apply: 'build',
    transform(code, id) {
      if (!id.endsWith('.js')) {
        return code;
      }

      const packageJsonPath = resolve(process.cwd(), 'package.json');
      const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
      const banner = `/**\n * Project: ${packageJson.name}\n * Version: ${packageJson.version}\n */\n`;

      return banner + code;
    },
  };
}

വിശദീകരണം:

• name: പ്ലഗിൻ്റെ പേര്, 'banner-plugin' എന്ന് നിർവചിക്കുന്നു.
• apply: ഈ പ്ലഗിൻ ബിൽഡ് പ്രക്രിയയിൽ മാത്രമേ പ്രവർത്തിക്കാവൂ എന്ന് വ്യക്തമാക്കുന്നു. ഇത് 'build' എന്ന് സജ്ജീകരിക്കുന്നത് പ്രൊഡക്ഷനിൽ മാത്രമുള്ളതാക്കുന്നു, ഡെവലപ്മെൻ്റ് സമയത്ത് അനാവശ്യ ഓവർഹെഡ് ഒഴിവാക്കുന്നു.
• transform(code, id):
  • ഇതാണ് പ്ലഗിൻ്റെ കാതൽ. ഇത് ഓരോ മൊഡ്യൂളിൻ്റെയും കോഡും (`code`) ഐഡിയും (`id`) തടസ്സപ്പെടുത്തുന്നു.
  • സോപാധികമായ പരിശോധന: `if (!id.endsWith('.js'))` എന്നത് രൂപാന്തരം ജാവാസ്ക്രിപ്റ്റ് ഫയലുകളിൽ മാത്രം പ്രയോഗിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു. ഇത് മറ്റ് ഫയൽ തരങ്ങൾ (CSS അല്ലെങ്കിൽ HTML പോലുള്ളവ) പ്രോസസ്സ് ചെയ്യുന്നത് തടയുന്നു, ഇത് പിശകുകൾക്കോ അപ്രതീക്ഷിത സ്വഭാവത്തിനോ കാരണമായേക്കാം.
  • Package.json ആക്സസ്:
    • `resolve(process.cwd(), 'package.json')` എന്നത് `package.json` ഫയലിലേക്കുള്ള പൂർണ്ണ പാത നിർമ്മിക്കുന്നു. `process.cwd()` നിലവിലെ വർക്കിംഗ് ഡയറക്ടറി നൽകുന്നു, കമാൻഡ് എവിടെ നിന്ന് എക്സിക്യൂട്ട് ചെയ്താലും ശരിയായ പാത ഉപയോഗിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.
    • `JSON.parse(readFileSync(packageJsonPath, 'utf-8'))` `package.json` ഫയൽ വായിക്കുകയും പാഴ്സ് ചെയ്യുകയും ചെയ്യുന്നു. `readFileSync` ഫയൽ സിൻക്രണസായി വായിക്കുന്നു, കൂടാതെ `'utf-8'` യൂണിക്കോഡ് അക്ഷരങ്ങൾ ശരിയായി കൈകാര്യം ചെയ്യുന്നതിനുള്ള എൻകോഡിംഗ് വ്യക്തമാക്കുന്നു. ഇവിടെ സിൻക്രണസ് റീഡിംഗ് സ്വീകാര്യമാണ്, കാരണം ഇത് ട്രാൻസ്ഫോർമിൻ്റെ തുടക്കത്തിൽ ഒരിക്കൽ മാത്രം സംഭവിക്കുന്നു.
  • ബാനർ ജനറേഷൻ:
    • ``const banner = `/**\n * Project: ${packageJson.name}\n * Version: ${packageJson.version}\n */\n`;`` എന്നത് ബാനർ സ്ട്രിംഗ് ഉണ്ടാക്കുന്നു. `package.json` ഫയലിൽ നിന്ന് പ്രോജക്റ്റ് പേരും പതിപ്പും എളുപ്പത്തിൽ ഉൾപ്പെടുത്തുന്നതിന് ഇത് ടെംപ്ലേറ്റ് ലിറ്ററലുകൾ (ബാക്ക്ടിക്ക്സ്) ഉപയോഗിക്കുന്നു. `\n` സീക്വൻസുകൾ ബാനർ ശരിയായി ഫോർമാറ്റ് ചെയ്യുന്നതിന് പുതിയ വരികൾ ചേർക്കുന്നു. `*` എന്നത് `\*` ഉപയോഗിച്ച് എസ്കേപ്പ് ചെയ്തിരിക്കുന്നു.
  • കോഡ് രൂപാന്തരം: `return banner + code;` എന്നത് യഥാർത്ഥ ജാവാസ്ക്രിപ്റ്റ് കോഡിന് മുമ്പായി ബാനർ ചേർക്കുന്നു. ഇതാണ് ട്രാൻസ്ഫോം ഫംഗ്ഷൻ നൽകുന്ന അന്തിമ ഫലം.

പ്ലഗിൻ സംയോജിപ്പിക്കുന്നു

നിങ്ങളുടെ `vite.config.js` ഫയലിലേക്ക് പ്ലഗിൻ ഇമ്പോർട്ട് ചെയ്യുകയും അത് `plugins` അറേയിലേക്ക് ചേർക്കുകയും ചെയ്യുക:

// vite.config.js
import bannerPlugin from './banner-plugin';

export default {
  plugins: [
    bannerPlugin(),
  ],
};

ബിൽഡ് പ്രവർത്തിപ്പിക്കുന്നു

ഇപ്പോൾ, `npm run build` (അല്ലെങ്കിൽ നിങ്ങളുടെ പ്രോജക്റ്റിൻ്റെ ബിൽഡ് കമാൻഡ്) പ്രവർത്തിപ്പിക്കുക. ബിൽഡ് പൂർത്തിയായ ശേഷം, `dist` ഡയറക്ടറിയിലെ ജനറേറ്റുചെയ്ത ജാവാസ്ക്രിപ്റ്റ് ഫയലുകൾ പരിശോധിക്കുക. ഓരോ ഫയലിൻ്റെയും മുകളിൽ ബാനർ കാണാം.

വിപുലമായ പ്ലഗിൻ ടെക്നിക്കുകൾ

ലളിതമായ കോഡ് രൂപാന്തരീകരണങ്ങൾക്കപ്പുറം, Vite പ്ലഗിനുകൾക്ക് അവയുടെ കഴിവുകൾ വർദ്ധിപ്പിക്കുന്നതിന് കൂടുതൽ വിപുലമായ ടെക്നിക്കുകൾ പ്രയോജനപ്പെടുത്താൻ കഴിയും.

വെർച്വൽ മൊഡ്യൂളുകൾ

യഥാർത്ഥ ഫയലുകളായി ഡിസ്കിൽ ഇല്ലാത്ത മൊഡ്യൂളുകൾ സൃഷ്ടിക്കാൻ വെർച്വൽ മൊഡ്യൂളുകൾ പ്ലഗിനുകളെ അനുവദിക്കുന്നു. ഡൈനാമിക് ഉള്ളടക്കം നിർമ്മിക്കുന്നതിനോ ആപ്ലിക്കേഷനിലേക്ക് കോൺഫിഗറേഷൻ ഡാറ്റ നൽകുന്നതിനോ ഇത് ഉപയോഗപ്രദമാണ്.

// virtual-module-plugin.js
export default function virtualModulePlugin(options) {
  const virtualModuleId = 'virtual:my-module';
  const resolvedVirtualModuleId = '\0' + virtualModuleId; // Rollup പ്രോസസ്സ് ചെയ്യുന്നത് തടയാൻ \0 ഉപയോഗിച്ച് പ്രിഫിക്സ് ചെയ്യുക

  return {
    name: 'virtual-module-plugin',
    resolveId(id) {
      if (id === virtualModuleId) {
        return resolvedVirtualModuleId;
      }
    },
    load(id) {
      if (id === resolvedVirtualModuleId) {
        return `export default ${JSON.stringify(options)};`;
      }
    },
  };
}

ഈ ഉദാഹരണത്തിൽ:

• `virtualModuleId` എന്നത് വെർച്വൽ മൊഡ്യൂളിൻ്റെ ഐഡൻ്റിഫയറിനെ പ്രതിനിധീകരിക്കുന്ന ഒരു സ്ട്രിംഗാണ്.
• `resolvedVirtualModuleId` എന്നത് ഒരു യഥാർത്ഥ ഫയലായി റോൾഅപ്പ് പ്രോസസ്സ് ചെയ്യുന്നത് തടയാൻ `\0` ഉപയോഗിച്ച് പ്രിഫിക്സ് ചെയ്തിരിക്കുന്നു. ഇത് റോൾഅപ്പ് പ്ലഗിനുകളിൽ ഉപയോഗിക്കുന്ന ഒരു സമ്പ്രദായമാണ്.
• `resolveId` മൊഡ്യൂൾ റെസല്യൂഷൻ തടസ്സപ്പെടുത്തുകയും അഭ്യർത്ഥിച്ച ഐഡി `virtualModuleId` മായി പൊരുത്തപ്പെടുന്നുവെങ്കിൽ റിസോൾവ് ചെയ്ത വെർച്വൽ മൊഡ്യൂൾ ഐഡി നൽകുകയും ചെയ്യുന്നു.
• `load` മൊഡ്യൂൾ ലോഡിംഗ് തടസ്സപ്പെടുത്തുകയും അഭ്യർത്ഥിച്ച ഐഡി `resolvedVirtualModuleId` മായി പൊരുത്തപ്പെടുന്നുവെങ്കിൽ മൊഡ്യൂളിൻ്റെ കോഡ് നൽകുകയും ചെയ്യുന്നു. ഈ സാഹചര്യത്തിൽ, ഇത് `options`-നെ ഒരു ഡിഫോൾട്ട് എക്സ്പോർട്ടായി എക്സ്പോർട്ട് ചെയ്യുന്ന ഒരു ജാവാസ്ക്രിപ്റ്റ് മൊഡ്യൂൾ ഉണ്ടാക്കുന്നു.

വെർച്വൽ മൊഡ്യൂൾ ഉപയോഗിക്കുന്നു

// vite.config.js
import virtualModulePlugin from './virtual-module-plugin';

export default {
  plugins: [
    virtualModulePlugin({ message: 'Hello from virtual module!' }),
  ],
};

// main.js
import message from 'virtual:my-module';

console.log(message.message); // ഔട്ട്പുട്ട്: Hello from virtual module!

ഇൻഡെക്സ് HTML രൂപാന്തരീകരിക്കുന്നു

`transformIndexHtml` ഹുക്ക് നിങ്ങളെ `index.html` ഫയൽ പരിഷ്കരിക്കാൻ അനുവദിക്കുന്നു, ഉദാഹരണത്തിന് സ്ക്രിപ്റ്റുകൾ, സ്റ്റൈലുകൾ, അല്ലെങ്കിൽ മെറ്റാ ടാഗുകൾ ചേർക്കുന്നത് പോലെ. അനലിറ്റിക്സ് ട്രാക്കിംഗ് ചേർക്കുന്നതിനോ, സോഷ്യൽ മീഡിയ മെറ്റാഡാറ്റ കോൺഫിഗർ ചെയ്യുന്നതിനോ, അല്ലെങ്കിൽ HTML ഘടന ഇഷ്ടാനുസൃതമാക്കുന്നതിനോ ഇത് ഉപയോഗപ്രദമാണ്.

// inject-script-plugin.js
export default function injectScriptPlugin() {
  return {
    name: 'inject-script-plugin',
    transformIndexHtml(html) {
      return html.replace(
        '',
        ``
      );
    },
  };
}

ഈ പ്ലഗിൻ `index.html` ഫയലിലേക്ക് ക്ലോസിംഗ് `` ടാഗിന് തൊട്ടുമുമ്പായി ഒരു `console.log` സ്റ്റേറ്റ്മെൻ്റ് ചേർക്കുന്നു.

ഡെവലപ്മെൻ്റ് സെർവറുമായി പ്രവർത്തിക്കുന്നു

`configureServer` ഹുക്ക് ഡെവലപ്മെൻ്റ് സെർവർ ഇൻസ്റ്റൻസിലേക്ക് പ്രവേശനം നൽകുന്നു, ഇത് നിങ്ങളെ കസ്റ്റം മിഡിൽവെയർ ചേർക്കാനും, സെർവർ സ്വഭാവം പരിഷ്കരിക്കാനും, അല്ലെങ്കിൽ API അഭ്യർത്ഥനകൾ കൈകാര്യം ചെയ്യാനും അനുവദിക്കുന്നു.

// mock-api-plugin.js
export default function mockApiPlugin() {
  return {
    name: 'mock-api-plugin',
    configureServer(server) {
      server.middlewares.use('/api/data', (req, res) => {
        res.writeHead(200, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify({ message: 'Hello from mock API!' }));
      });
    },
  };
}

ഈ പ്ലഗിൻ `/api/data` എന്നതിലേക്കുള്ള അഭ്യർത്ഥനകളെ തടസ്സപ്പെടുത്തുകയും ഒരു മോക്ക് സന്ദേശമുള്ള JSON പ്രതികരണം നൽകുകയും ചെയ്യുന്ന ഒരു മിഡിൽവെയർ ചേർക്കുന്നു. ബാക്കെൻഡ് പൂർണ്ണമായി നടപ്പിലാക്കുന്നതിന് മുമ്പ്, ഡെവലപ്മെൻ്റ് സമയത്ത് API എൻഡ്പോയിൻ്റുകൾ അനുകരിക്കുന്നതിന് ഇത് ഉപയോഗപ്രദമാണ്. ഈ പ്ലഗിൻ ഡെവലപ്മെൻ്റ് സമയത്ത് മാത്രമേ പ്രവർത്തിക്കൂ എന്ന് ഓർക്കുക.

യഥാർത്ഥ ലോക പ്ലഗിൻ ഉദാഹരണങ്ങളും ഉപയോഗങ്ങളും

പൊതുവായ ഡെവലപ്മെൻ്റ് വെല്ലുവിളികൾ പരിഹരിക്കുന്നതിന് Vite പ്ലഗിനുകൾ എങ്ങനെ ഉപയോഗിക്കാം എന്നതിൻ്റെ ചില പ്രായോഗിക ഉദാഹരണങ്ങൾ ഇതാ:

• ഇൻ്റർനാഷണലൈസേഷൻ (i18n): ഒരു പ്ലഗിനിന് കമ്പോണൻ്റുകളിൽ നിന്ന് ടെക്സ്റ്റ് സ്വയമേവ എക്‌സ്‌ട്രാക്റ്റുചെയ്യാനും വിവിധ ഭാഷകൾക്കായി വിവർത്തന ഫയലുകൾ നിർമ്മിക്കാനും കഴിയും. ഇത് ആഗോള വിന്യാസങ്ങൾ സാധ്യമാക്കുന്നതിന് ലോകലൈസ് (Lokalise) അല്ലെങ്കിൽ ട്രാൻസിഫെക്സ് (Transifex) പോലുള്ള സേവനങ്ങളുമായി സംയോജിപ്പിക്കും.
• CSS മൊഡ്യൂളുകൾ ഓട്ടോകംപ്ലീഷൻ: ഒരു പ്ലഗിനിന് നിങ്ങളുടെ IDE-യിൽ CSS മൊഡ്യൂളുകൾക്ക് ഓട്ടോകംപ്ലീഷനും ടൈപ്പ് സുരക്ഷയും നൽകാൻ കഴിയും, ഇത് ഡെവലപ്പർ അനുഭവം മെച്ചപ്പെടുത്തുകയും പിശകുകൾ കുറയ്ക്കുകയും ചെയ്യുന്നു.
• ഓട്ടോമാറ്റിക് ഇമേജ് ഒപ്റ്റിമൈസേഷൻ: ഒരു പ്ലഗിനിന് ബിൽഡ് പ്രക്രിയയിൽ ചിത്രങ്ങൾ സ്വയമേവ ഒപ്റ്റിമൈസ് ചെയ്യാൻ കഴിയും, ഇത് ഫയൽ വലുപ്പം കുറയ്ക്കുകയും വെബ്സൈറ്റ് പ്രകടനം മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു. ഇത് ImageOptim അല്ലെങ്കിൽ TinyPNG പോലുള്ള ടൂളുകളുമായി സംയോജിപ്പിക്കാൻ കഴിയും.
• ഗ്രാഫ്ക്യുഎൽ കോഡ് ജനറേഷൻ: ഒരു പ്ലഗിനിന് നിങ്ങളുടെ ഗ്രാഫ്ക്യുഎൽ സ്കീമയിൽ നിന്ന് ടൈപ്പ്സ്ക്രിപ്റ്റ് ടൈപ്പുകളും റിസോൾവറുകളും സ്വയമേവ നിർമ്മിക്കാൻ കഴിയും, ഇത് ടൈപ്പ് സുരക്ഷ ഉറപ്പാക്കുകയും ബോയിലർപ്ലേറ്റ് കോഡ് കുറയ്ക്കുകയും ചെയ്യുന്നു.
• കമ്പോണൻ്റ് ലൈബ്രറി ഡോക്യുമെൻ്റേഷൻ: ഒരു പ്ലഗിനിന് നിങ്ങളുടെ കമ്പോണൻ്റ് ലൈബ്രറിക്കായി സ്വയമേവ ഡോക്യുമെൻ്റേഷൻ നിർമ്മിക്കാൻ കഴിയും, ഇത് ഡെവലപ്പർമാർക്ക് നിങ്ങളുടെ കമ്പോണൻ്റുകൾ ഉപയോഗിക്കാനും പരിപാലിക്കാനും എളുപ്പമാക്കുന്നു.
• സുരക്ഷാ ഹെഡറുകൾ ചേർക്കൽ: ഒരു പ്ലഗിനിന് നിങ്ങളുടെ പ്രതികരണങ്ങളിൽ സുരക്ഷാ ഹെഡറുകൾ സ്വയമേവ ചേർക്കാൻ കഴിയും, ഇത് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ സുരക്ഷാ നില മെച്ചപ്പെടുത്തുന്നു.
• സർവീസ് വർക്കർ ജനറേഷൻ: നിങ്ങളുടെ പ്രോഗ്രസ്സീവ് വെബ് ആപ്പിന് (PWA) ഓഫ്‌ലൈൻ കഴിവുകൾ പ്രാപ്തമാക്കുന്നതിന് ഒരു പ്ലഗിനിന് സ്വയമേവ ഒരു സർവീസ് വർക്കർ നിർമ്മിക്കാൻ കഴിയും.

Vite പ്ലഗിനുകൾ എഴുതുന്നതിനുള്ള മികച്ച രീതികൾ

ശക്തവും പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായ Vite പ്ലഗിനുകൾ നിർമ്മിക്കുന്നതിന് ഈ മികച്ച രീതികൾ പിന്തുടരുക:

• ശ്രദ്ധ കേന്ദ്രീകരിക്കുക: ഓരോ പ്ലഗിനും ഒരു പ്രത്യേക ഉദ്ദേശ്യം ഉണ്ടായിരിക്കണം, അനാവശ്യ സങ്കീർണ്ണത ഒഴിവാക്കുക.
• ഒരു പ്രത്യേക പേര് ഉപയോഗിക്കുക: മറ്റ് പ്ലഗിനുകളുമായുള്ള വൈരുദ്ധ്യങ്ങൾ ഒഴിവാക്കാൻ നിങ്ങളുടെ പ്ലഗിൻ്റെ പേര് അദ്വിതീയമാണെന്ന് ഉറപ്പാക്കുക. നിങ്ങളുടെ കമ്പനിയുടെയോ ഓർഗനൈസേഷൻ്റെയോ പേര് പ്രിഫിക്സ് ചെയ്യുന്നത് ഒരു നല്ല തന്ത്രമാണ്.
• പിശകുകൾ ഭംഗിയായി കൈകാര്യം ചെയ്യുക: എക്സെപ്ഷനുകൾ പിടികൂടുകയും ഉപയോക്താവിന് വിവരദായകമായ പിശക് സന്ദേശങ്ങൾ നൽകുകയും ചെയ്യുക.
• നിങ്ങളുടെ പ്ലഗിൻ ഡോക്യുമെൻ്റ് ചെയ്യുക: ഇൻസ്റ്റാളേഷൻ നിർദ്ദേശങ്ങൾ, ഉപയോഗ ഉദാഹരണങ്ങൾ, കോൺഫിഗറേഷൻ ഓപ്ഷനുകൾ എന്നിവയുൾപ്പെടെ വ്യക്തവും സംക്ഷിപ്തവുമായ ഡോക്യുമെൻ്റേഷൻ നൽകുക.
• നിങ്ങളുടെ പ്ലഗിൻ പരീക്ഷിക്കുക: നിങ്ങളുടെ പ്ലഗിൻ ശരിയായി പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ യൂണിറ്റ് ടെസ്റ്റുകളും ഇൻ്റഗ്രേഷൻ ടെസ്റ്റുകളും എഴുതുക.
• പ്രകടനത്തെക്കുറിച്ച് പരിഗണിക്കുക: `transform` ഹുക്കിൽ കമ്പ്യൂട്ടേഷണലി ചെലവേറിയ പ്രവർത്തനങ്ങൾ ഒഴിവാക്കുക, കാരണം ഇത് ബിൽഡ് പ്രകടനത്തെ ബാധിക്കും. ഉചിതമായ ഇടങ്ങളിൽ കാഷിംഗും മറ്റ് ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകളും ഉപയോഗിക്കുക.
• അനുയോജ്യതയെക്കുറിച്ച് ശ്രദ്ധാലുവായിരിക്കുക: അനുയോജ്യത ഉറപ്പാക്കാൻ നിങ്ങളുടെ പ്ലഗിൻ Vite-ൻ്റെയും മറ്റ് അനുബന്ധ ഡിപൻഡൻസികളുടെയും വിവിധ പതിപ്പുകൾ ഉപയോഗിച്ച് പരീക്ഷിക്കുക.
• ESM സിൻ്റാക്സ് ഉപയോഗിക്കുക: ആധുനിക ECMAScript മൊഡ്യൂളുകൾ (ESM) സിൻ്റാക്സ് ഉപയോഗിച്ച് നിങ്ങളുടെ പ്ലഗിൻ എഴുതുക.
• നിങ്ങളുടെ പ്ലഗിൻ പ്രസിദ്ധീകരിക്കുക: നിങ്ങളുടെ പ്ലഗിൻ npm-ൽ കമ്മ്യൂണിറ്റിയുമായി പങ്കിടുക, അതുവഴി മറ്റുള്ളവർക്ക് നിങ്ങളുടെ പ്രവൃത്തിയിൽ നിന്ന് പ്രയോജനം നേടാനാകും.

Vite പ്ലഗിനുകൾ ഡീബഗ്ഗിംഗ്

Vite പ്ലഗിനുകൾ ഡീബഗ്ഗ് ചെയ്യുന്നത് വെല്ലുവിളി നിറഞ്ഞതാകാം, പക്ഷേ സഹായിക്കാൻ കഴിയുന്ന നിരവധി ടെക്നിക്കുകൾ ഉണ്ട്:

• കൺസോൾ ലോഗിംഗ്: പ്ലഗിൻ്റെ എക്സിക്യൂഷൻ ഫ്ലോയെയും ഡാറ്റയെയും കുറിച്ചുള്ള വിവരങ്ങൾ ഔട്ട്പുട്ട് ചെയ്യുന്നതിന് `console.log` സ്റ്റേറ്റ്മെൻ്റുകൾ ഉപയോഗിക്കുക.
• ഡീബഗ്ഗർ സ്റ്റേറ്റ്മെൻ്റുകൾ: എക്സിക്യൂഷൻ താൽക്കാലികമായി നിർത്തി ബ്രൗസറിൻ്റെ ഡെവലപ്പർ ടൂളുകളിൽ വേരിയബിളുകൾ പരിശോധിക്കുന്നതിന് നിങ്ങളുടെ പ്ലഗിൻ്റെ കോഡിൽ `debugger` സ്റ്റേറ്റ്മെൻ്റുകൾ ചേർക്കുക.
• Vite-ൻ്റെ `debug` ഓപ്ഷൻ: കൂടുതൽ വിശദമായ ലോഗിംഗ് വിവരങ്ങൾ കാണുന്നതിന് Vite-ൻ്റെ `debug` ഓപ്ഷൻ പ്രവർത്തനക്ഷമമാക്കുക. നിങ്ങളുടെ `vite.config.js`-ലേക്ക് `debug: true` ചേർക്കുക.
• `rollup.options.onwarn` ഉപയോഗിച്ച് (ബിൽഡ് പ്രശ്നങ്ങൾക്ക്): നിങ്ങളുടെ പ്ലഗിനിൻ്റെ `config` ഹുക്കിനുള്ളിൽ, ബിൽഡ് മുന്നറിയിപ്പുകൾ പരിശോധിക്കാൻ നിങ്ങൾക്ക് റോൾഅപ്പിൻ്റെ മുന്നറിയിപ്പ് മെക്കാനിസത്തിലേക്ക് ടാപ്പുചെയ്യാനാകും. മൊഡ്യൂൾ റെസല്യൂഷൻ പ്രശ്നങ്ങളോ, ബണ്ട്ലിംഗ് ഘട്ടത്തിലെ പ്രശ്നങ്ങളോ മനസ്സിലാക്കാൻ ഇത് ഉപയോഗപ്രദമാണ്. ഉദാഹരണം: `config(config) { config.rollupOptions = { onwarn: (warning, warn) => { console.warn(warning); warn(warning); } }}`
• വിഷ്വൽ സ്റ്റുഡിയോ കോഡ് ഡീബഗ്ഗർ ഉപയോഗിച്ച്: നിങ്ങളുടെ Vite പ്ലഗിൻ നേരിട്ട് ഡീബഗ്ഗ് ചെയ്യാൻ വിഎസ് കോഡ് കോൺഫിഗർ ചെയ്യുക. ഇത് ബ്രേക്ക്‌പോയിൻ്റുകൾ സജ്ജീകരിക്കാനും, കോഡിലൂടെ ഘട്ടം ഘട്ടമായി പോകാനും, കൂടുതൽ ഇൻ്ററാക്ടീവ് രീതിയിൽ വേരിയബിളുകൾ പരിശോധിക്കാനും നിങ്ങളെ അനുവദിക്കുന്നു.

ഉപസംഹാരം: Vite പ്ലഗിനുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ ഡെവലപ്മെൻ്റ് ശാക്തീകരിക്കുന്നു

നിങ്ങളുടെ പ്രത്യേക ആവശ്യങ്ങൾ നിറവേറ്റുന്നതിനായി ബിൽഡ് പ്രക്രിയ ഇഷ്ടാനുസൃതമാക്കാനും വിപുലീകരിക്കാനും നിങ്ങളെ അനുവദിക്കുന്ന ഒരു ശക്തമായ ഉപകരണമാണ് Vite-ൻ്റെ പ്ലഗിൻ ആർക്കിടെക്ചർ. പ്രധാന ആശയങ്ങൾ മനസ്സിലാക്കുകയും മികച്ച രീതികൾ പിന്തുടരുകയും ചെയ്യുന്നതിലൂടെ, നിങ്ങളുടെ ഡെവലപ്മെൻ്റ് വർക്ക്ഫ്ലോ മെച്ചപ്പെടുത്തുകയും, നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ സവിശേഷതകൾ വർദ്ധിപ്പിക്കുകയും, അതിൻ്റെ പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുകയും ചെയ്യുന്ന കസ്റ്റം പ്ലഗിനുകൾ നിങ്ങൾക്ക് സൃഷ്ടിക്കാൻ കഴിയും.

അടിസ്ഥാന ആശയങ്ങൾ മുതൽ വിപുലമായ ടെക്നിക്കുകൾ വരെ, Vite-ൻ്റെ പ്ലഗിൻ സിസ്റ്റത്തിൻ്റെ സമഗ്രമായ ഒരു അവലോകനം ഈ ഗൈഡ് നൽകിയിട്ടുണ്ട്. നിങ്ങളുടെ സ്വന്തം പ്ലഗിനുകൾ നിർമ്മിച്ച് പരീക്ഷിക്കാനും Vite-ൻ്റെ ഇക്കോസിസ്റ്റത്തിൻ്റെ വിശാലമായ സാധ്യതകൾ പര്യവേക്ഷണം ചെയ്യാനും ഞങ്ങൾ നിങ്ങളെ പ്രോത്സാഹിപ്പിക്കുന്നു. പ്ലഗിനുകളുടെ ശക്തി പ്രയോജനപ്പെടുത്തുന്നതിലൂടെ, നിങ്ങൾക്ക് Vite-ൻ്റെ മുഴുവൻ സാധ്യതകളും അൺലോക്ക് ചെയ്യാനും അതിശയകരമായ വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാനും കഴിയും.