Frontend būvēšanas sistēmu spraudņu kompozīcija: būvēšanas rīku paplašinājumu arhitektūra

Nepārtraukti mainīgajā frontend izstrādes ainavā būvēšanas sistēmām ir būtiska loma izstrādes procesa optimizēšanā un racionalizēšanā. Šīs sistēmas, piemēram, Webpack, Rollup un Parcel, automatizē tādus uzdevumus kā saiņošana, transpilācija, minifikācija un optimizācija. Galvenā šo būvēšanas rīku iezīme ir to paplašināmība, izmantojot spraudņus, kas ļauj izstrādātājiem pielāgot būvēšanas procesu konkrētām projekta prasībām. Šajā rakstā aplūkota frontend būvēšanas rīku spraudņu arhitektūra, izpētot dažādas kompozīcijas tehnikas un labākās prakses šo sistēmu paplašināšanai.

Būvēšanas sistēmu lomas izpratne frontend izstrādē

Frontend būvēšanas sistēmas ir būtiskas mūsdienu tīmekļa izstrādes darbplūsmām. Tās risina vairākas problēmas, tostarp:

• Moduļu saiņošana: Vairāku JavaScript, CSS un citu resursu failu apvienošana mazākā saiņu skaitā efektīvai ielādei pārlūkprogrammā.
• Transpilācija: Mūsdienu JavaScript (ES6+) vai TypeScript koda pārveidošana pārlūkprogrammām saderīgā JavaScript (ES5).
• Minifikācija un optimizācija: Koda un resursu izmēra samazināšana, noņemot tukšumvietas, saīsinot mainīgo nosaukumus un pielietojot citas optimizācijas tehnikas.
• Resursu pārvaldība: Attēlu, fontu un citu statisku resursu apstrāde, ieskaitot tādus uzdevumus kā attēlu optimizācija un failu jaukšana (hashing) kešatmiņas apiešanai (cache busting).
• Koda sadalīšana: Lietojumprogrammas koda sadalīšana mazākos gabalos, kurus var ielādēt pēc pieprasījuma, uzlabojot sākotnējo ielādes laiku.
• Karstā moduļu nomaiņa (HMR): Tiešsaistes atjauninājumu iespējošana pārlūkprogrammā izstrādes laikā, neprasot pilnu lapas pārlādi.

Populārākās būvēšanas sistēmas ietver:

• Webpack: ļoti konfigurējams un daudzpusīgs saiņotājs, kas pazīstams ar savu plašo spraudņu ekosistēmu.
• Rollup: moduļu saiņotājs, kas galvenokārt vērsts uz bibliotēku un mazāku saiņu izveidi ar "tree-shaking" (koka kratīšanas) iespējām.
• Parcel: nulles konfigurācijas saiņotājs, kura mērķis ir nodrošināt vienkāršu un intuitīvu izstrādes pieredzi.
• esbuild: ārkārtīgi ātrs JavaScript saiņotājs un minifikators, kas rakstīts Go valodā.

Frontend būvēšanas sistēmu spraudņu arhitektūra

Frontend būvēšanas sistēmas ir izstrādātas ar spraudņu arhitektūru, kas ļauj izstrādātājiem paplašināt to funkcionalitāti. Spraudņi ir autonomi moduļi, kas pieslēdzas būvēšanas procesam un modificē to atbilstoši savam konkrētajam mērķim. Šī modularitāte ļauj izstrādātājiem pielāgot būvēšanas sistēmu, nemainot tās pamata kodu.

Spraudņa vispārējā struktūra ietver:

1. Spraudņa reģistrācija: Spraudnis tiek reģistrēts būvēšanas sistēmā, parasti izmantojot būvēšanas sistēmas konfigurācijas failu.
2. Pieslēgšanās būvēšanas notikumiem: Spraudnis abonē konkrētus notikumus vai "āķus" būvēšanas procesa laikā.
3. Būvēšanas procesa modificēšana: Kad tiek aktivizēts abonētais notikums, spraudnis izpilda savu kodu, pēc vajadzības modificējot būvēšanas procesu. Tas var ietvert failu pārveidošanu, jaunu resursu pievienošanu vai būvēšanas konfigurācijas mainīšanu.

Webpack spraudņu arhitektūra

Webpack spraudņu arhitektūra ir balstīta uz Compiler un Compilation objektiem. Compiler pārstāv kopējo būvēšanas procesu, savukārt Compilation pārstāv vienu lietojumprogrammas būvējumu. Spraudņi mijiedarbojas ar šiem objektiem, pieslēdzoties dažādiem to piedāvātajiem "āķiem".

Galvenie Webpack "āķi" ietver:

• environment: Tiek izsaukts, kad tiek iestatīta Webpack vide.
• afterEnvironment: Tiek izsaukts pēc Webpack vides iestatīšanas.
• entryOption: Tiek izsaukts, kad tiek apstrādāta ieejas opcija.
• beforeRun: Tiek izsaukts pirms būvēšanas procesa sākuma.
• run: Tiek izsaukts, kad sākas būvēšanas process.
• compilation: Tiek izsaukts, kad tiek izveidota jauna kompilācija.
• make: Tiek izsaukts kompilācijas procesa laikā, lai izveidotu moduļus.
• optimize: Tiek izsaukts optimizācijas fāzes laikā.
• emit: Tiek izsaukts pirms Webpack emitē gala resursus.
• afterEmit: Tiek izsaukts pēc tam, kad Webpack ir emitējis gala resursus.
• done: Tiek izsaukts, kad būvēšanas process ir pabeigts.
• failed: Tiek izsaukts, ja būvēšanas process neizdodas.

Vienkāršs Webpack spraudnis varētu izskatīties šādi:

class MyWebpackPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync('MyWebpackPlugin', (compilation, callback) => {
      // Šeit modificējiet kompilācijas objektu
      console.log('Resursi drīz tiks emitēti!');
      callback();
    });
  }
}

module.exports = MyWebpackPlugin;

Rollup spraudņu arhitektūra

Rollup spraudņu arhitektūra ir balstīta uz dzīves cikla "āķu" kopumu, ko spraudņi var ieviest. Šie "āķi" ļauj spraudņiem pārtvert un modificēt būvēšanas procesu dažādos posmos.

Galvenie Rollup "āķi" ietver:

• options: Tiek izsaukts pirms Rollup sāk būvēšanas procesu, ļaujot spraudņiem modificēt Rollup opcijas.
• buildStart: Tiek izsaukts, kad Rollup sāk būvēšanas procesu.
• resolveId: Tiek izsaukts katram importēšanas paziņojumam, lai atrisinātu moduļa ID.
• load: Tiek izsaukts, lai ielādētu moduļa saturu.
• transform: Tiek izsaukts, lai pārveidotu moduļa saturu.
• buildEnd: Tiek izsaukts, kad būvēšanas process beidzas.
• generateBundle: Tiek izsaukts pirms Rollup ģenerē gala saini.
• writeBundle: Tiek izsaukts pēc tam, kad Rollup ir ierakstījis gala saini.

Vienkāršs Rollup spraudnis varētu izskatīties šādi:

function myRollupPlugin() {
  return {
    name: 'my-rollup-plugin',
    transform(code, id) {
      // Šeit modificējiet kodu
      console.log(`Pārveido ${id}`);
      return code;
    }
  };
}

export default myRollupPlugin;

Parcel spraudņu arhitektūra

Parcel spraudņu arhitektūra ir balstīta uz transformatoriem, atrisinātājiem un saiņotājiem. Transformatori pārveido atsevišķus failus, atrisinātāji atrisina moduļu atkarības, un saiņotāji apvieno pārveidotos failus saiņos.

Parcel spraudņi parasti tiek rakstīti kā Node.js moduļi, kas eksportē reģistrācijas funkciju. Šo funkciju Parcel izsauc, lai reģistrētu spraudņa transformatorus, atrisinātājus un saiņotājus.

Vienkāršs Parcel spraudnis varētu izskatīties šādi:

module.exports = function (bundler) {
  bundler.addTransformer('...', async function (asset) {
    // Šeit pārveidojiet resursu
    console.log(`Pārveido ${asset.filePath}`);
    asset.setCode(asset.getCode());
  });
};

Spraudņu kompozīcijas tehnikas

Spraudņu kompozīcija ietver vairāku spraudņu apvienošanu, lai sasniegtu sarežģītāku būvēšanas procesu. Ir vairākas spraudņu kompozīcijas tehnikas, tostarp:

• Sekvenciāla kompozīcija: Spraudņu piemērošana noteiktā secībā, kur viena spraudņa izvade kļūst par nākamā ievadi.
• Paralēla kompozīcija: Spraudņu piemērošana vienlaicīgi, kur katrs spraudnis darbojas neatkarīgi ar to pašu ievadi.
• Nosacījumu kompozīcija: Spraudņu piemērošana, pamatojoties uz noteiktiem nosacījumiem, piemēram, vidi vai faila tipu.
• Spraudņu fabrikas: Funkciju izveide, kas atgriež spraudņus, ļaujot veikt dinamisku konfigurāciju un pielāgošanu.

Sekvenciāla kompozīcija

Sekvenciāla kompozīcija ir vienkāršākā spraudņu kompozīcijas forma. Spraudņi tiek piemēroti noteiktā secībā, un katra spraudņa izvade tiek nodota kā ievade nākamajam spraudnim. Šī tehnika ir noderīga transformāciju konveijera izveidei.

Piemēram, apsveriet scenāriju, kurā vēlaties transpilēt TypeScript kodu, to minificēt un pēc tam pievienot reklāmkaroga komentāru. Jūs varētu izmantot trīs atsevišķus spraudņus:

• typescript-plugin: Transpilē TypeScript kodu uz JavaScript.
• terser-plugin: Minificē JavaScript kodu.
• banner-plugin: Pievieno reklāmkaroga komentāru faila augšpusē.

Piemērojot šos spraudņus secīgi, jūs varat sasniegt vēlamo rezultātu.

// webpack.config.js
module.exports = {
  //...
  plugins: [
    new TypeScriptPlugin(),
    new TerserPlugin(),
    new BannerPlugin('// Autortiesības 2023')
  ]
};

Paralēla kompozīcija

Paralēla kompozīcija ietver spraudņu piemērošanu vienlaicīgi. Šī tehnika ir noderīga, ja spraudņi darbojas neatkarīgi ar to pašu ievadi un nav atkarīgi viens no otra izvades.

Piemēram, apsveriet scenāriju, kurā vēlaties optimizēt attēlus, izmantojot vairākus attēlu optimizācijas spraudņus. Jūs varētu izmantot divus atsevišķus spraudņus:

• imagemin-pngquant: Optimizē PNG attēlus, izmantojot pngquant.
• imagemin-jpegtran: Optimizē JPEG attēlus, izmantojot jpegtran.

Piemērojot šos spraudņus paralēli, jūs varat vienlaicīgi optimizēt gan PNG, gan JPEG attēlus.

Lai gan pats Webpack tieši neatbalsta paralēlu spraudņu izpildi, līdzīgus rezultātus var sasniegt, izmantojot tādas tehnikas kā darbinieku pavedieni (worker threads) vai bērnprocesi (child processes), lai spraudņus palaistu vienlaicīgi. Daži spraudņi ir izstrādāti tā, lai netieši veiktu operācijas paralēli iekšēji.

Nosacījumu kompozīcija

Nosacījumu kompozīcija ietver spraudņu piemērošanu, pamatojoties uz noteiktiem nosacījumiem. Šī tehnika ir noderīga, lai piemērotu dažādus spraudņus dažādās vidēs vai lai piemērotu spraudņus tikai konkrētiem failiem.

Piemēram, apsveriet scenāriju, kurā vēlaties piemērot koda pārklājuma spraudni tikai testēšanas vidē.

// webpack.config.js
module.exports = {
  //...
  plugins: [
    ...(process.env.NODE_ENV === 'test' ? [new CodeCoveragePlugin()] : [])
  ]
};

Šajā piemērā CodeCoveragePlugin tiek piemērots tikai tad, ja NODE_ENV vides mainīgais ir iestatīts uz test.

Spraudņu fabrikas

Spraudņu fabrikas ir funkcijas, kas atgriež spraudņus. Šī tehnika ļauj veikt dinamisku spraudņu konfigurāciju un pielāgošanu. Spraudņu fabrikas var izmantot, lai izveidotu spraudņus ar dažādām opcijām, pamatojoties uz projekta konfigurāciju.

function createMyPlugin(options) {
  return {
    apply: (compiler) => {
      compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
        // Izmantojiet opcijas šeit
        console.log(`Izmanto opciju: ${options.message}`);
        callback();
      });
    }
  };
}

// webpack.config.js
module.exports = {
  //...
  plugins: [
    createMyPlugin({ message: 'Hello World' })
  ]
};

Šajā piemērā funkcija createMyPlugin atgriež spraudni, kas reģistrē ziņojumu konsolē. Ziņojums ir konfigurējams, izmantojot options parametru.

Labākās prakses frontend būvēšanas sistēmu paplašināšanai ar spraudņiem

Paplašinot frontend būvēšanas sistēmas ar spraudņiem, ir svarīgi ievērot labākās prakses, lai nodrošinātu, ka spraudņi ir labi izstrādāti, uzturami un veiktspējīgi.

• Saglabājiet spraudņus fokusētus: Katram spraudnim jābūt vienam, skaidri definētam pienākumam. Izvairieties no spraudņu izveides, kas mēģina darīt pārāk daudz.
• Izmantojiet skaidrus un aprakstošus nosaukumus: Spraudņu nosaukumiem skaidri jānorāda to mērķis. Tas citiem izstrādātājiem atvieglo sapratni par to, ko spraudnis dara.
• Nodrošiniet konfigurācijas opcijas: Spraudņiem jānodrošina konfigurācijas opcijas, lai lietotāji varētu pielāgot to darbību.
• Apstrādājiet kļūdas eleganti: Spraudņiem jāapstrādā kļūdas eleganti un jānodrošina informatīvi kļūdu ziņojumi.
• Rakstiet vienībtestus: Spraudņiem jābūt visaptverošiem vienībtestiem, lai nodrošinātu to pareizu darbību un novērstu regresijas.
• Dokumentējiet savus spraudņus: Spraudņiem jābūt labi dokumentētiem, ieskaitot skaidras instrukcijas par to, kā tos instalēt, konfigurēt un lietot.
• Apsveriet veiktspēju: Spraudņi var ietekmēt būvēšanas veiktspēju. Optimizējiet savus spraudņus, lai samazinātu to ietekmi uz būvēšanas laiku. Izvairieties no nevajadzīgiem aprēķiniem vai failu sistēmas operācijām.
• Ievērojiet būvēšanas sistēmas API: Ievērojiet būvēšanas sistēmas API un konvencijas. Tas nodrošina, ka jūsu spraudņi būs saderīgi ar nākamajām būvēšanas sistēmas versijām.
• Apsveriet internacionalizāciju (i18n) un lokalizāciju (l10n): Ja jūsu spraudnis rāda ziņojumus vai tekstu, nodrošiniet, ka tas ir izstrādāts, domājot par i18n/l10n, lai atbalstītu vairākas valodas. Tas ir īpaši svarīgi spraudņiem, kas paredzēti globālai auditorijai.
• Drošības apsvērumi: Veidojot spraudņus, kas apstrādā ārējus resursus vai lietotāja ievadi, esiet uzmanīgi attiecībā uz potenciālām drošības ievainojamībām. Sanitizējiet ievades un validējiet izvades, lai novērstu tādus uzbrukumus kā starpvietņu skriptošana (XSS) vai attālināta koda izpilde.

Populāru būvēšanas sistēmu spraudņu piemēri

Ir pieejami daudzi spraudņi tādām populārām būvēšanas sistēmām kā Webpack, Rollup un Parcel. Šeit ir daži piemēri:

• Webpack:
  • html-webpack-plugin: Ģenerē HTML failus, kas ietver jūsu Webpack saiņus.
  • mini-css-extract-plugin: Izekstrahē CSS atsevišķos failos.
  • terser-webpack-plugin: Minificē JavaScript kodu, izmantojot Terser.
  • copy-webpack-plugin: Kopē failus un direktorijas uz būvējuma direktoriju.
  • eslint-webpack-plugin: Integrē ESLint Webpack būvēšanas procesā.
• Rollup:
  • @rollup/plugin-node-resolve: Atrisina Node.js moduļus.
  • @rollup/plugin-commonjs: Pārveido CommonJS moduļus par ES moduļiem.
  • rollup-plugin-terser: Minificē JavaScript kodu, izmantojot Terser.
  • rollup-plugin-postcss: Apstrādā CSS failus ar PostCSS.
  • rollup-plugin-babel: Transpilē JavaScript kodu ar Babel.
• Parcel:
  • @parcel/transformer-sass: Pārveido Sass failus par CSS.
  • @parcel/transformer-typescript: Pārveido TypeScript failus par JavaScript.
  • Daudzi pamata transformatori ir iebūvēti, daudzos gadījumos samazinot nepieciešamību pēc atsevišķiem spraudņiem.

Noslēgums

Frontend būvēšanas sistēmu spraudņi nodrošina spēcīgu mehānismu būvēšanas procesa paplašināšanai un pielāgošanai. Izprotot dažādu būvēšanas sistēmu spraudņu arhitektūru un izmantojot efektīvas kompozīcijas tehnikas, izstrādātāji var izveidot ļoti pielāgotas būvēšanas darbplūsmas, kas atbilst viņu konkrētajām projekta prasībām. Labāko prakšu ievērošana spraudņu izstrādē nodrošina, ka spraudņi ir labi izstrādāti, uzturami un veiktspējīgi, tādējādi veicinot efektīvāku un uzticamāku frontend izstrādes procesu. Tā kā frontend ekosistēma turpina attīstīties, spēja efektīvi paplašināt būvēšanas sistēmas ar spraudņiem joprojām būs būtiska prasme frontend izstrādātājiem visā pasaulē.