Sådan skrives et webpack-stillads

Også kendt som: "Det er sværere at vælge en titel end at skrive en artikel"

Det kan kræve nogen tid at indstille et nyt projekt, kan du organisere dine filer i en passende projektstruktur, vælge de rigtige værktøjer, konfigurere dem og få dem til at arbejde sammen. Dette er ofte tidskrævende og kan være svært for begyndere, af disse grunde har vi mange værktøjer som create-react-app, vue create og yeoman, der hjælper os med at starte vores projekter.

Stillads med Webpack

Hvad hvis vi bare kunne oprette en webpack-konfigurationsfil uden at skulle skrive den i hænder? Ville verden ikke være et bedre sted?

Ja, det ville det.

Hvis du er enig med mig, vil du være glad for at vide, at webpack-cli faktisk har en kommando, der hjælper dig med at opsætte en konfigurationsfil bare ved at besvare nogle spørgsmål. Se på webpack-cli init-dokumentationen.

I denne artikel vil vi grave under hætten og se, hvordan man opretter og udgiver et webpack-stillads for at oprette et vue-projekt.

Hvordan ser det ud

Jeg har offentliggjort et stillads kaldet "webpack-stillads-vue" til npm, hvis du har webpack-cli, kan du prøve det ved at køre:

webpack-cli init webpack-stillads-vue

Du bliver bedt om at besvare nogle spørgsmål:

Og din mappe vil fyldes med dejlige ting. Du kan hurtigt prøve dit helt nye projekt, der kører:

garn serverer

Opsætning

Jeg har besluttet at kalde min pakke "webpack-stillads-vue", vi begynder at oprette vores pakke:

mkdir webpack-stillads-vue
cd webpack-stillads-vue
npm init
tryk på index.js
Et stillads er bare en npm-pakke, for at gøre det synligt ved webpack-cli skal det offentliggøres, og det skal navn begynde med "webpack-stillads-"

Under hætten bruger stilladssystemet Yeoman til at definere generatorer, lad os installere det:

garn tilføj jomansk generator

Inde i index.js kan vi nu oprette skelettet til vores stillads, der udvider Generator-klassen:

at bede, skrive og installere er Yeoman-metoder, som vi vil bruge i de næste trin, hvis du vil vide mere, tjek Yeoman's dokumentation

Inde i vores konstruktør opretter vi et JSON-objekt, som vi vil omdanne til en webpack-konfigurationsfil:

Bemærk, at vi opretter et objekt kaldet “konfigurationer”, hver af dens egenskaber bliver en webpack-konfiguration oprettet ved hjælp af værdierne fra webpackOptions

”Vent, vores dev.webpackOptions er tom…”, rolig, vi udfylder det snart med de data, som vores bruger har givet.

hvilket fik

Nu hvor vores skelet er på plads, er det tid til at udskrive nogle spørgsmål for at få brugerpræferencer. Yeoman bruger Inquirer, vi vil installere en pakke kaldet webpack-stillads, der tilbyder nogle værktøjer til hurtigt at definere anmodere om forespørgsler:

garn tilføj @ webpack-cli / webpack-stillads

Inde i spørgeskemaet bruger vi this.prompt (...), en Yeoman-funktion, der udskriver en række prompter i terminalen sekventielt og returnerer brugerens svar:

Vi vil bruge svaret på det første spørgsmål som navnet på vores stilladsede projekt. Da vi ønsker, at dette navn skal overholde npm-regler for navngivning, er vi nødt til at kontrollere, om den værdi, som brugeren leverer, ikke indeholder mellemrum eller store bogstaver. Vi kan gøre dette ved hjælp af et InputValidate fra webpack-stilladspakken, der giver os mulighed for at validere brugerinput ved hjælp af en funktion:

Nu hvor vi har oprettet vores forespørgsler, kan vi se det fungere, lad os oprette den mappe, hvor vi skal teste vores stillads:

cd ..
mkdir test-stillads
cd test-stillads
webpack-cli init ../webpack-scaffold-vue

Hvis vi har gjort alt det rigtige, skal vi se i terminalen de spørgsmål, vi netop har oprettet!

Opret konfigurationer

Før vi begynder, tager vi brugerens svar, og vi erstatter hvert manglende svar med dets standardværdi. Vi gemmer derefter de opdaterede svar i en klasseattribut for at gøre dem tilgængelige for andre metoder:

Nu hvor vi har brugerpræferencer i this.answers, kan vi begynde at arbejde på vores konfigurationer

Først og fremmest vil vi generere en webpack.config.js-fil. Vi vil gøre dette ved at oprette en funktion, der genererer en gyldig webpack-konfiguration i betragtning af brugerpræferencer. Vi opbevarer den i en separat fil med navnet config / webpack-config.js, der ser ud:

Der er mange andre muligheder, tjek webpackdokumentationen

Du har måske bemærket, at vi i koden ovenfor bruger VueLoaderPlugin, HtmlWebpackPlugin og CopyWebpackPlugin. Disse er webpack-plugins og skal importeres i vores genererede webpack-konfiguration for at kunne fungere. Vi gør denne indstilling dev.topScope, som er en egenskab, der bruges til at tilføje nogle kode i begyndelsen af ​​vores konfiguration:

Skrivning til filsystemet

Nu kommer den bedste del, vi skriver alt til filsystemet og føler os meget stolte af os selv

Det er tid til at implementere vores skrivning () -metode, det er Yeoman-metoden, hvor alt skal placeres. Vi skriver på filsystemet 3 forskellige slags filer:

1. Webpack-konfigurationer

Vi bruger konfigurationsobjektet, vi forberedte i de foregående trin:

Det er det, dette vil oprette en .yo-rc.json-fil, der vil blive afhentet af webpack-cli for at generere en webpack-konfigurationsfil i rodmappen for det stilladsede projekt.

Du kan generere mere end en konfigurationsfil ved at tilføje forskellige taster i dit konfigurationsobjekt

2. JSON-filer

Vi bruger Yeoman fs.extendJSON (destPath, json) -funktion til at skrive en JSON til en fil i filsystemet, som vi gjorde før, og vi har mange moduler, der hver eksporterer en funktion, der returnerer vores JSON-konfiguration. Lad os generere package.json vha. Brugerpræferencer:

I den forrige kode har vi oprettet package.json og andre konfigurationsfiler til eslint og babel.

3. Skabeloner

For ikke-JSON filer bruger vi fs.copyTpl (srcPath, dstPath, param) til at kopiere enhver skabelonfil fra vores stilladsbibliotek til vores stilladsede projekt:

Installer afhængigheder

Vi udvider vores Generator igen ved at tilføje en Yeoman-metode kaldet install () og vi bruger denne.installDependency () til at installere de afhængigheder, vi har specificeret i vores package.json:

Dette bruger kun garn, husk at bruge den pakkeadministrator, der er angivet af brugeren.

Offentliggøre

Installer np (Sindresorhus ):

garn tilføj np

Kør np, det hjælper dig med at udgive din pakke til npm:

garn np

Skål!

Tillykke til os, vi har netop offentliggjort et webpack-stillads!

Nu den vigtigste del, lad mig vide, hvad du har oprettet! Du kan tweet til @misterdev_ og efterlade feedback i kommentarerne!