Læring Gutenberg: Angi en Egendefinert webpack Config

0
27

Gutenberg introduserer den moderne JavaScript stabelen i WordPress økosystem, noe som betyr at noen nye verktøy må læres. Selv om verktøy som skaper-guten-blokkere er utrolig nyttig, er det også nyttig å vite hva som skjer under panseret.

Artikkel-Serien:

  1. – Serien Introduksjon
  2. Hva er Gutenberg, Likevel?
  3. En Primer med create-guten-blokk
  4. Moderne JavaScript Syntaks
  5. Reagerer 101
  6. Sette opp en Tilpasset webpack (Dette Innlegget)
  7. En Tilpasset “Kort” Blokk (Kommer Snart!)

Filene vi vil være konfigurere her bør være kjent fra hva vi beskrevet i Del 2 Primer med create-guten-blokk. Hvis du er som meg (før du leser Andy ‘ s tutorial, som er!) og vil heller ikke dykke inn i konfigurasjonen del ennå, stillaset laget av create-guten-blokkere er i samsvar med det vi er i ferd med å skape her, så kan du sikkert bruke det også.

La oss hoppe i det!

Komme i gang

Webpack tar liten, modulære aspekter av din front-end codebase og smooshes dem ned i en effektiv fil. Det er svært utvides og konfigurerbar og fungerer som det bankende hjertet av noen av de mest populære produktene og prosjekter på nettet. Det er veldig mye en JavaScript-verktøy, selv om det kan brukes til ganske mye hva du vil. For denne opplæringen, er det eneste fokus er JavaScript skjønt.

Hva vi kommer til å få webpack å gjøre er å se for våre endringer på noen tilpasset blokk-filer og sammenstille dem med Babel for å generere JavaScript-filer som kan leses av de fleste nettlesere. Det vil også slå sammen alle avhengigheter som vi importerer.

Men først trenger vi et sted å lagre våre faktiske webpack oppsett og front-end-filer. I Del 2, da vi stakk rundt filer generert av create-guten-blokk, vi så at det ble opprettet en infrastruktur for en WordPress plugin som enqueued vår front-end-filer i en WordPress, og gjorde oss i stand til å aktivere plugin gjennom WordPress. Jeg kommer til å ta det neste avsnittet for å gå oss gjennom å sette opp infrastrukturen for en WordPress plugin for våre tilpasset blokk.

Sette opp en plugin

Forhåpentligvis har du fortsatt ha en lokal WordPress eksempel kjører fra vår primer i Del 2, men hvis ikke, vil du trenger for å ha en installert for å fortsette med det vi er i ferd med å gjøre. I som du vil installere, kan du navigere til wp-content/plugins og opprette en fersk katalog som heter kort-blokk (spoiler alert: vi kommer til å lage et kort blokk… som ikke liker kortene?).

Så, inne i kortet-blokkere, kan du opprette en fil som heter card-block.php. Dette vil være tilsvarende plugin.php fra lag-guten-blokk. Neste, fall i denne del av kommentarene for å fortelle WordPress til å anerkjenne denne katalogen som en plugin og vise den i Plugins side av Dashbordet:

<?php
/*
Plugin Navn: Kort Blokk
*/

Ikke glem å åpne PHP-koden, men du kan la den avsluttende ett av siden vi skal legge mer til denne filen snart nok.

WordPress ser ut for disse kommentarene for å registrere en plugin på samme måte som det ser ut for kommentarer på toppen av stil.css i et tema. Dette er en forkortet versjon av hva du finner på toppen av andre plugins’ main-filer. Hvis du planlegger å slippe den på WordPress plugin depotet, vil du ønsker å legge til en beskrivelse og versjonsnummer samt lisens og informasjon om forfatteren.

Gå videre og aktivere plugin gjennom WordPress Dashbord, og jeg vil ta rattet tilbake for å ta oss gjennom å sette opp vår Webpack config!

Komme i gang med webpack

Det første vi skal gjøre er å initialisere npm. Kjør følgende ved roten av plugin-mappen (wp-content/plugins/kort-blokk):

npm init

Dette vil stille deg noen spørsmål om ditt prosjekt og til slutt lage en pakke.json-fil, som viser avhengigheter og butikker core informasjon om prosjektet.

Neste, la oss installere webpack:

npm installere webpack –spare-dev

Du har kanskje lagt merke til at vi skal installere webpack lokalt til vårt prosjekt. Dette er en god praksis for å komme inn med avgjørende pakker som er utsatt for store, bryte endringer. Det betyr også at du og ditt team er alle sang av den samme sangen ark.

Så kjører du dette:

npm installere ekstrakt-tekst-webpack-plugin@neste-spare-dev

Da disse Sass og CSS avhengigheter:

npm har installert node-sass sass-loader css-loader –spare-dev

Nå, NPX til å tillate oss å bruke våre lokale avhengigheter i stedet for en global seg:

npm installere npx -g

Til slutt, kjør dette:

npm installere webpack-cli –spare-dev

Som vil installere webpack CLI for deg.

Nå som vi har dette installert, bør vi lage vår config fil. Fortsatt i roten av plugin, kan du opprette en fil som heter webpack.config.js og åpner en fil, slik at vi kan få koding.

Med dette webpack fil, og vi kommer til å jobbe med tradisjonelle ES5 koden for maksimal kompatibilitet, fordi det går med Node JS. Du kan bruke ES6 og Babel, men vi vil holde ting så enkelt som mulig for denne opplæringen.

Gå av, la oss legge til noen konstanter og import. Legg til følgende, rett på toppen av din webpack.config.js fil:

var ExtractText = kreve(‘ekstrakt-tekst-webpack-plugin’);
var debug = prosessen.konv.NODE_ENV !== ‘produksjon’;
var webpack = kreve(‘webpack’);

Debug-variablen er å erklære hvorvidt vi er i debug-modus. Dette er vår standard-modus, men kan overstyres av prepending våre webpack kommandoer med NODE_ENV=produksjon. Debug boolsk flagg vil avgjøre om webpack genererer sourcemaps og minifies koden.

Som du kan se, er vi krever noen avhengigheter. Vi vet at webpack er nødvendig, så vil vi hoppe over den. La oss i stedet fokusere vår oppmerksomhet på ExtractText. I hovedsak, ExtractText gjør det mulig for oss å trekke inn andre filer enn JavaScript inn i blandingen. Vi kommer til å trenge dette for våre Sass-filer. Som standard, webpack forutsetter at alt er JavaScript, så ExtractText type *oversetter* andre typer filer.

La oss legge til noen config nå. Legg til følgende etter webpack definisjon:

var extractEditorSCSS = new ExtractText({
filnavn: ‘./blokker.redaktør.bygge.css’
});

var extractBlockSCSS = new ExtractText({
filnavn: ‘./blokker.stil.bygge.css’
});

Hva vi har gjort, det er instantiate to forekomster av ExtractText ved å sende en konfig-objekt. Alle som vi har sett er produksjon av våre to blokker stilark. Vi kommer til disse i den neste serien, men akkurat nå er alt du trenger å vite er at dette er første skritt i å få våre Sass kompilering.

OK, etter at siste bit av koden, legge til følgende:

var plugins = [ extractEditorSCSS, extractBlockSCSS ];

Her har vi fått to rekker av plugins. Våre ExtractText tilfeller lever i kjernen plugins satt og vi har fått et par optimalisering plugins som er bare smooshed inn i kjernen plugins som er angitt, hvis vi ikke er i debug-modus. Vi kjører som logikk rett på slutten.

Neste opp, legge dette SCSS config-objektet:

var scssConfig = {
bruk: [
{
magasin: “css-loader’
},
{
loader: ‘sass-loader’,
valg: {
outputStyle: ‘komprimert’
}
}
]
};

Dette objektet kommer til å fortelle våre webpack eksempel hvordan de skal oppføre seg når den kommer over scss filer. Vi har det i en konfig-objekt for å holde ting så TØRR som mulig.

Sist opp, kjøtt og taters av config:

modul.eksport = {
kontekst: __dirname,
devtool: feilsøke ? ‘inline-sourcemap’ : null,
modus: feilsøke ? ‘utvikling’ : ‘produksjon’,
oppføring: ‘./blocks/src/blocks.js’,
utgang: {
bane: __dirname + ‘/blokker/dist/’,
filnavn: ‘blocks.build.js’
},
modul: {
regler: [
{
test: /.js$/,
ekskluder: /node_modules/,
bruk: [
{
loader: ‘babel-loader’
}
]
},
{
test: /editor.scss$/,
ekskluder: /node_modules/,
bruk: extractEditorSCSS.ekstrakt(scssConfig)
},
{
test: /stil -.scss$/,
ekskluder: /node_modules/,
bruk: extractBlockSCSS.ekstrakt(scssConfig)
}
]
},
plugins: plugins
};

Det er vår hele config, så la oss bryte det ned.

Skriptet starter med modul.eksporten som er egentlig sa, “når du importerer eller trenger meg, dette er hva du får.” Vi kan bestemme hva vi utsettes for uansett hva import vår kode, noe som betyr at vi kunne kjøre koden ovenfor modul.eksporten at gjøre noen tunge beregninger, for eksempel.

Neste, la oss se på noen av disse følgende egenskaper:

  • sammenhengen er vår base hvor stiene vil løse fra. Vi har gått __dirname, som er den gjeldende arbeidsmappen.
  • devtool er der vi definerer hva slags sourcemap vi kan eller ikke vil. Hvis vi ikke er i debug-modus, vi passerer null med et trefoldig operatør.
  • oppføring er der vi fortelle webpack til å starte sin reise pack-eri. I vårt eksempel, dette er veien til vårt blocks.js fil.
  • utskriften er hva det står på boksen. Vi passerer et objekt som definerer utgang banen og filnavnet som vi ønsker å kalle det.

Neste modul, som vi fikk inn en touch mer detalj. Modulen delen kan inneholde flere regler. I vårt eksempel, den eneste regelen vi har er ute etter JavaScript og SCSS filer. Den gjør dette ved å søke med et vanlig uttrykk som er definert av testen eiendom. Slutten-målet med regelen er å finne den riktige typen av filer og sende dem inn i et loader, noe som er babel-loader, i vårt tilfelle. Som vi lærte i forrige opplæringen i denne serien, Babel er hva konverterer vår moderne ES6-koden inn i mer støttes ES5 kode.

Til slutt er vår plugins delen. Her passerer vi vårt utvalg av plugin tilfeller. I vårt prosjekt har vi plugins som minify kode, fjerne duplikat kode og en som reduserer lengden av brukte Id. Dette er for å sørge for at vår produksjon koden er optimalisert.

For referanse, dette er hvordan ditt fulle config-filen skal se ut:

var ExtractText = kreve(‘ekstrakt-tekst-webpack-plugin’);
var debug = prosessen.konv.NODE_ENV !== ‘produksjon’;
var webpack = kreve(‘webpack’);

var extractEditorSCSS = new ExtractText({
filnavn: ‘./blokker.redaktør.bygge.css’
});

var extractBlockSCSS = new ExtractText({
filnavn: ‘./blokker.stil.bygge.css’
});

var plugins = [extractEditorSCSS, extractBlockSCSS];

var scssConfig = {
bruk: [
{
magasin: “css-loader’
},
{
loader: ‘sass-loader’,
valg: {
outputStyle: ‘komprimert’
}
}
]
};

modul.eksport = {
kontekst: __dirname,
devtool: feilsøke ? ‘inline-sourcemap’ : null,
modus: feilsøke ? ‘utvikling’ : ‘produksjon’,
oppføring: ‘./blocks/src/blocks.js’,
utgang: {
bane: __dirname + ‘/blokker/dist/’,
filnavn: ‘blocks.build.js’
},
modul: {
regler: [
{
test: /.js$/,
ekskluder: /node_modules/,
bruk: [
{
loader: ‘babel-loader’
}
]
},
{
test: /editor.scss$/,
ekskluder: /node_modules/,
bruk: extractEditorSCSS.ekstrakt(scssConfig)
},
{
test: /stil -.scss$/,
ekskluder: /node_modules/,
bruk: extractBlockSCSS.ekstrakt(scssConfig)
}
]
},
plugins: plugins
};
Det er webpack konfigurert. Jeg tar mikrofonen tilbake for å vise oss hvordan offisielt register vår blokk med WordPress. Dette bør føle deg ganske kjent for de av dere som er vant til å krangelen med handlinger og filtre i WordPress.

Registrering vår blokk

Tilbake i card-block.php vår viktigste oppgave nå er å enqueue JavaScript og CSS-filer vil vi bygge med webpack. I et tema, vil vi gjøre dette med samtale wp_enqueue_script og wp_enqueue_style inne i en handling lagt til wp_enqueue_scripts. Vi i hovedsak gjør det samme her, bortsett fra i stedet har vi enqueue skript og maler med en funksjon som er spesifikke for blokker.

Slipp denne koden nedenfor åpningen kommentar i card-block.php:

funksjonen my_register_gutenberg_card_block() {

// Register vår blokk script med WordPress
wp_register_script(
‘gutenberg-kort-blokk’,
plugins_url(‘/blocks/dist/blocks.build.js’, __ – FIL__),
array(‘wp-blokker’, ‘wp-element’)
);

// Register vår blokk er base CSS
wp_register_style(
‘gutenberg-kort-blokk-stil’,
plugins_url( ‘/blokker/dist/blokker.stil.bygge.css’, __ – FIL__ ),
array( ‘wp-blokker”)
);

// Register vår blokk redaktør-spesifikke CSS
wp_register_style(
‘gutenberg-kort-blokk-rediger-stil”,
plugins_url(‘/blokker/dist/blokker.redaktør.bygge.css’, __ – FIL__),
array( ‘wp-rediger-blokker”)
);

// Enqueue skriptet i editoren
register_block_type(‘kort-blokk/main’, array(
‘editor_script’ => ‘gutenberg-kort-blokk’,
‘editor_style’ => ‘gutenberg-kort-blokk-rediger-stil”,
‘stil’ => ‘gutenberg-kort-blokk-rediger-stil”
));
}

add_action(‘init’, ‘my_register_gutenberg_card_block’);

Som ovenfor kommentarer tilsier, er vi først registrere deg skriptet med WordPress ved hjelp av håndtaket gutenberg-kort-blokk med to avhengigheter: wp-blokker og wp-elementer. Denne funksjonen registrerer bare et skript, er det ikke enqueue det. Vi gjøre noe lignende for ut redigere og viktigste stilark.

Våre siste funksjon, register_block_type, gjør enqueuing for oss. Det gir også blokkere et navn, kort-blokk/main, som identifiserer denne blokken som største blokk i navnerommet kort-blokk, så identifiserer de skript og stiler vi bare registrert som den viktigste script editor, redaktør stilark, og primær-stylesheet for blokken.

Hvis du er kjent med tema utvikling, har du sannsynligvis brukt get_template_directory() for å håndtere filbaner i kroker som de ovenfor. For plugin utvikling, bruker vi funksjonen plugins_url() som betyr ganske mye det samme, bortsett fra at i stedet for å slå sammen en bane som dette: get_template_directory() . ‘https://cdn.css-tricks.com/script.js’, plugins_url() aksepterer en streng sti som en parameter og gjør den sammensetning for oss. Den andre parameteren, _ – FIL _, er en av PHP ‘ s magic konstanter som tilsvarer hele filbanen for filen.

Til slutt, hvis du ønsker å legge til flere blokker til denne plugin, du trenger en versjon av denne funksjonen for hver blokk. Du kan regne ut hva som er variable og generere noen form for-løkke for å holde det rent og TØRT, videre ned linjen. Nå, jeg skal lede oss gjennom å få Babel opp og kjører.

Komme i Babel kjører

Babel blir vår ES6-koden inn bedre-støttet ES5 koden, så vi trenger å installere noen avhengigheter. I roten av din plugin (wp-content/plugins/kort-blokk), kjører du følgende:

npm installere babel-core babel-loader babel-plugin-add-modul-eksport babel-plugin-transform-reagere-jsx babel-preset-konv –spare-dev

Den store ol’ npm installere legger til alle Babel avhengigheter. Nå kan vi legge våre .babelrc fil som lagrer noen innstillinger for oss. Det hindrer oss fra å måtte gjenta dem over og over i kommandolinjen.

Mens de fortsatt i temaet mappe, legg til følgende fil: .babelrc.

Nå åpne det opp og lim inn følgende:

{
“presets”: [“env”],
“plugins”: [
[“transform-reagere-jsx”, {
“pragma”: “wp.elementet.createElement”
}]
]
}

Så, hva har vi fått det to ting:

“presets”: [“env”] er i utgangspunktet magi. Det automatisk bestemmer hvilke ES funksjoner du kan bruke til å generere din ES5 kode. Vi pleide å ha til å legge til ulike forhåndsinnstillinger for alle de forskjellige ES-versjoner (f.eks. ES2015), men det er blitt forenklet.

I plugins, vil du legge merke til at det er en Reagerer JSX transformator. Det er sortering ut våre JSX og snu den til riktig JavaScript, men det vi gjør er å fortelle det til å generere WordPress elementer, snarere enn å Reagere elementer, som JSX er oftere assosiert med.

Generere stub filer

Det siste vi kommer til å gjøre er å generere noen stub-filer og test at våre webpack og WordPress installasjonen er alt bra.

Gå inn på mappa og opprette en mappe som heter blokker og, innenfor dette, må du lage to mapper, en kalt src og en som heter dist.

Inne i src-mappen, kan du opprette følgende filer. Vi har lagt banene, så du sette dem på rett plass:

  • blocks.js
  • felles.scss
  • block/block.js
  • blokk/redaktør.scss
  • blokk/stil.scss

OK, så nå har vi generert den minste mengden av ting, la oss kjøre webpack. Åpne opp terminal og flytter inn i din nåværende plugin-mappen—så vi kan kjøre følgende, som vil skyte opp webpack:

npx webpack

Ganske dang grei, ikke sant? Hvis du går videre og ser i dist-mappen, bør du se noen samlet godbiter i det!

Innpakning opp

Mye av oppsettet har blitt gjort, men alle våre ender i en rad. Vi har satt opp webpack, Babel og WordPress til alle arbeider som et team for å bygge ut eller egendefinerte Gutenberg-blokk (og fremtidige blokker). Forhåpentligvis nå du føler deg mer komfortabel å jobbe med webpack og føler at du kunne dykke i og gjøre tilpasninger for å passe til dine prosjekter.

Artikkel-Serien:

  1. – Serien Introduksjon
  2. Hva er Gutenberg, Likevel?
  3. En Primer med create-guten-blokk
  4. Moderne JavaScript Syntaks
  5. Reagerer 101
  6. Sette opp en Tilpasset webpack (Dette Innlegget)
  7. En Tilpasset “Kort” Blokk (Kommer Snart!)