Lärande Gutenberg: att sätta upp en Anpassad webpack Config

0
41

Gutenberg introducerar den moderna JavaScript stack i WordPress ekosystem, vilket innebär en del nya verktyg bör dras. Även om verktyg som skapar-guten-block är otroligt bra, det är också praktiskt att veta vad som händer under huven.

Artikel-Serien:

  1. Serien Introduktion
  2. Vad är Gutenberg, Ändå?
  3. En Primer med skapa-guten-block
  4. Modern JavaScript-Syntax
  5. Reagera 101
  6. Att sätta upp en Egen webpack (Detta Inlägg)
  7. En Anpassad “Card” – Block (Kommer Snart!)

De filer vi kommer att konfigurera här bör vara bekant från vad vi som behandlas i Del 2 Primer med skapa-guten-block. Om du är som mig (innan du läser Andy ‘ s tutorial, det är!) och vill helst inte dyka i konfiguration del ännu, ställningen som skapats av skapa-guten-block matcher vad vi håller på att skapa här, så du kan säkert använda detta.

Låt oss hoppa i!

Komma igång

Webpack tar den liten, modulär aspekter av din front-end-kodbasen och smooshes ner dem i en effektiv fil. Det är mycket utdragbara och konfigurerbara och fungerar som hjärtat i några av de mest populära produkter och projekt på nätet. Det är väldigt mycket en JavaScript-funktionen, även om det kan användas för i stort sett vad du vill. För denna tutorial, det är enda fokus är JavaScript ändå.

Vad vi kommer att få webpack gör är att titta efter vår förändringar på vissa anpassade blockera filer och sammanställa dem med Babel för att skapa JavaScript-filer som kan läsas av de flesta webbläsare. Det kommer också att slå ihop alla beroenden som vi importerar.

Men först, vi behöver en plats att lagra våra faktiska webpack setup och front-end-filer. I Del 2, när vi petade runt de filer som genereras av skapa-guten-block, såg vi att det skapas en infrastruktur för en WordPress plugin för att i kö vår front-end-filer i en WordPress sätt, och gjort det möjligt för oss att aktivera plugin med WordPress. Jag kommer att ta detta nästa avsnitt att gå oss genom att ställa upp infrastruktur för ett WordPress plugin för våra egna kvarter.

Att sätta upp en plugin

Hoppas att du fortfarande har en lokal WordPress instans som körs från våra primer i Del 2, men om inte, måste du ha ett installerat för att fortsätta med vad vi är på väg att göra. I att installera, navigera till wp-content/plugins och skapar en ny katalog som heter kort-block (spoiler alert: vi kommer att göra ett kort block… vem gillar inte kort?).

Sedan, inuti kortet-block, skapa en fil som heter card-block.php. Detta kommer att vara som motsvarar plugin.php från skapa-guten-block. Nästa släpp i denna del kommentarer att tala om för WordPress att erkänna detta-katalogen som en plugin och visa det i Plugins sidan av Instrumentpanelen:

<?php
/*
Plugin Name: Kort Block
*/

Glöm inte att öppna PHP-taggen, men du kan lämna den att stänga av eftersom vi kommer att lägga till mer till den här filen snart nog.

WordPress ser ut för dessa kommentarer för att registrera ett plugin på samma sätt ser det ut för kommentarer på toppen av stil.css på ett tema. Detta är en förkortad version av vad du hittar på toppen av andra plugins’ viktigaste filer. Om du planerar att släppa den på WordPress plugin repository, skulle du vill lägga till en beskrivning och versionsnummer samt licens och upphovsmän.

Gå vidare och aktivera plugin via WordPress Instrumentbrädan, och jag ska ta ratten tillbaka för att ta oss genom att ställa upp våra Webpack config!

Komma igång med webpack

Det första vi ska göra är att initiera npm. Kör följande vid roten av ditt plugin-mappen (wp-content/plugins/kort-block):

npm init

Detta kommer att ställa några frågor om ditt projekt och i slutändan generera dig ett paket.json-fil som innehåller en lista på beroenden och butiker grundläggande information om ditt projekt.

Nästa, låt oss installera webpack:

npm install webpack-spara-dev

Du kanske har märkt att vi är installera webpack lokalt till vårt projekt. Detta är en bra övning för att komma in med avgörande paket som är utsatta för stora, bryta förändringar. Det innebär också att du och ditt team är alla sjunger av samma noter.

Kör sedan detta:

npm install-extrakt-text-webpack-plugin@nästa-spara-dev

Då dessa Sass och CSS beroenden:

npm install nod-sass sass-loader css-loader-spara-dev

Nu, NPX att tillåta oss att använda våra lokala beroenden i stället för alla globala problem:

npm install npx -g

Slutligen, kör denna:

npm install webpack-cli-spara-dev

Som kommer att installera webpack CLI för dig.

Nu när vi har detta installerat, bör vi skapa vår config-filen. Fortfarande i roten av ditt plugin, skapa en fil som heter webpack.config.js och öppna filen så att vi kan få kodning.

Med detta webpack fil, vi kommer att arbeta med traditionella ES5 kod för maximal kompatibilitet, eftersom det körs med Nod JS. Du kan använda ES6 och Babel, men vi kommer att hålla saker och ting så enkelt som möjligt för denna tutorial.

Stig, låt oss lägga några konstanter och import. Lägg till följande, rätt på toppen av din webpack.config.js fil:

var ExtractText = require(‘extrahera text-webpack-plugin’);
var debug = process.env.NODE_ENV !== ‘produktionen’;
var webpack = require(‘webpack’);

Debug var att förklara att om vi inte är i debug-läge. Detta är vår standard-läge, men det kan åsidosättas av den tillagd våra webpack kommandon med NODE_ENV=produktion. Debug boolean flag kommer att avgöra om webpack genererar sourcemaps och minifies koden.

Som du kan se, vi kräver vissa beroenden. Vi vet att webpack behövs, så vi får hoppa över det. Låt oss istället fokusera vår uppmärksamhet på ExtractText. I huvudsak, ExtractText gör det möjligt för oss att dra i andra filer än JavaScript i mixen. Vi kommer att behöva detta för våra Sass-filer. Som standard, webpack förutsätter att allt är JavaScript, så ExtractText typ av *översätter* andra typer av filer.

Låt oss lägga till några config nu. Lägg till följande efter webpack definition:

var extractEditorSCSS = new ExtractText({
filnamn: ‘./kvarter.redaktör.bygga.css”
});

var extractBlockSCSS = new ExtractText({
filnamn: ‘./kvarter.style.bygga.css”
});

Vad vi har gjort där är att initiera två fall av ExtractText genom att skicka en config-objekt. Allt som vi har ställt är resultatet av våra två block stilmallar. Vi kommer till dessa i nästa serie, men just nu är allt du behöver veta är att detta är första steget i att få våra Sass sammanställningen.

OK, efter att den sista biten av koden, lägg till följande:

var plugins = [ extractEditorSCSS, extractBlockSCSS ];

Här har vi fått två kedjor av plugins. Våra ExtractText fall bor i centrala plugins set och vi har ett par optimering plugins som bara smooshed i centrala plugins som om vi inte är i debug-läge. Vi kör denna logik rätt på slutet.

Nästa upp, lägga till detta SCSS config objekt:

var scssConfig = {
användning: [
{
loader: “css-loader’
},
{
loader: ‘sass-loader’,
alternativ: {
outputStyle: “komprimerad”
}
}
]
};

Detta föremål kommer att berätta för våra webpack exempel hur man beter sig när den kommer över scss-filerna. Vi har fått det i en config-objekt för att hålla det så TORRT som möjligt.

Sista upp, kött och taters i config:

modulen.exporten = {
sammanhang: __dirname,
devtool: debug ? ‘inline-sourcemap’ : null,
läge: debug ? “utveckling”: “produktion”,
inlägg: ‘./blocks/src/blocks.js’,
effekt: {
sökväg: __dirname + ‘/block/dist/’,
filnamn: ‘blocks.build.js’
},
modul: {
regler: [
{
test: /.js$/,
utesluter: /node_modules/,
användning: [
{
loader: ‘babel-loader’
}
]
},
{
test: /redaktör.scss$/,
utesluter: /node_modules/,
användning: extractEditorSCSS.extrakt(scssConfig)
},
{
test: – /style -.scss$/,
utesluter: /node_modules/,
användning: extractBlockSCSS.extrakt(scssConfig)
}
]
},
plugins: plugins
};

Det är hela vår config, så låt oss bryta ner det.

Skriptet börjar med modulen.exporten som i huvudsak säger, “när du importerar eller kräva av mig, detta är vad du får.” Vi kan bestämma vad vi avslöja att oavsett import vår kod, vilket innebär att vi kan köra koden ovan modul.export att göra några tunga beräkningar, till exempel.

Nästa, låt oss titta på några av dessa följande egenskaper:

  • ramen är vår bas där vägar kommer att lösa från. Vi har klarat __dirname, som är den aktuella arbetskatalogen.
  • devtool är där vi definierar vilken typ av sourcemap vi kan eller inte vill. Om vi inte är i debug-läge, vi passerar null-med en ternär operator.
  • posten är där vi berättar webpack att börja sin resa pack-ar. I vårt exempel, detta är vägen till vårt blocks.js fil.
  • produktionen är vad det står på burken. Vi passerar ett objekt som definierar produktionen sökväg och det filnamn som vi vill kalla det.

Nästa modul, som vi fick till en touch mer i detalj. Modulen avsnitt kan innehålla flera regler. I vårt exempel, den enda regeln vi har är att titta för JavaScript och SCSS-filerna. Den gör detta genom att söka med ett reguljärt uttryck som definieras av testet egendom. Det slutliga målet med regeln är att hitta rätt typ av filer och skicka dem i en hjullastare, vilket är babel-loader i vårt fall. Som vi såg i ett tidigare läraren i denna serie, Babel är vad som omvandlar vår moderna ES6 kod i mer stöd ES5 kod.

Slutligen är våra insticksprogram. Här passerar vi vårt utbud av plugin fall. I vårt projekt, vi har plugins som minify kod, ta bort duplicerade koden och en som minskar längden av vanliga Id-handlingar. Detta är att se till att vår produktion kod är optimerad för.

För referens, detta är hur din fulla config filen bör se ut:

var ExtractText = require(‘extrahera text-webpack-plugin’);
var debug = process.env.NODE_ENV !== ‘produktionen’;
var webpack = require(‘webpack’);

var extractEditorSCSS = new ExtractText({
filnamn: ‘./kvarter.redaktör.bygga.css”
});

var extractBlockSCSS = new ExtractText({
filnamn: ‘./kvarter.style.bygga.css”
});

var plugins = [extractEditorSCSS, extractBlockSCSS];

var scssConfig = {
användning: [
{
loader: “css-loader’
},
{
loader: ‘sass-loader’,
alternativ: {
outputStyle: “komprimerad”
}
}
]
};

modulen.exporten = {
sammanhang: __dirname,
devtool: debug ? ‘inline-sourcemap’ : null,
läge: debug ? “utveckling”: “produktion”,
inlägg: ‘./blocks/src/blocks.js’,
effekt: {
sökväg: __dirname + ‘/block/dist/’,
filnamn: ‘blocks.build.js’
},
modul: {
regler: [
{
test: /.js$/,
utesluter: /node_modules/,
användning: [
{
loader: ‘babel-loader’
}
]
},
{
test: /redaktör.scss$/,
utesluter: /node_modules/,
användning: extractEditorSCSS.extrakt(scssConfig)
},
{
test: – /style -.scss$/,
utesluter: /node_modules/,
användning: extractBlockSCSS.extrakt(scssConfig)
}
]
},
plugins: plugins
};
Det är webpack konfigurerad. Jag ska ta mic tillbaka för att visa oss hur att officiellt registrera dig för vårt block med WordPress. Detta bör kännas ganska bekant för dem av er som är vana att gräl med åtgärder och filter i WordPress.

Registrera våra kvarter

Tillbaka card-block.php vår viktigaste uppgift nu är att köa JavaScript och CSS-filer vi kommer att bygga med webpack. I ett tema, vi skulle göra detta med samtal wp_enqueue_script och wp_enqueue_style inuti en åtgärd läggs till wp_enqueue_scripts. Vi gör i stort sett samma sak här, förutom vi i stället köa manus och stilar med en funktion som är specifika för block.

Släpp den här koden under den inledande kommentaren i card-block.php:

funktion my_register_gutenberg_card_block() {

// Registrera våra blockera skript med WordPress
wp_register_script(
‘gutenberg-kort-block”,
plugins_url(‘/blocks/dist/blocks.build.js’, __FIL__),
array(‘wp-block’, ‘wp-element’)
);

// Registrera våra block bas CSS
wp_register_style(
‘gutenberg-kort-block-style’,
plugins_url( ‘/block/dist/block.style.bygga.css’, __FIL__ ),
array( ‘wp-block”)
);

// Registrera våra block editor-specifik CSS
wp_register_style(
‘gutenberg-kort-block-redigera-style’,
plugins_url(‘/block/dist/block.redaktör.bygga.css’, __FIL__),
array( ‘wp-redigera-block”)
);

// Enqueue skriptet i editorn
register_block_type(‘kort-block/main’, array(
‘editor_script’ => ‘gutenberg-kort-block”,
‘editor_style’ => ‘gutenberg-kort-block-redigera-style’,
‘style’ => ‘gutenberg-kort-block-redigera-stil”
));
}

add_action(‘init’, ‘my_register_gutenberg_card_block’);

Som kommentarerna ovan visar vi först registrera dig på vår manus med WordPress med hjälp av handtaget gutenberg-kort-block med två beroenden: wp-block och wp-element. Denna funktion registrerar bara ett skript, är det inte köa. Vi gör något liknande för att redigera och viktigaste stilmallar.

Vår slutliga funktion, register_block_type, inte enqueuing för oss. Det ger också blockera ett namn, kort-block/main, som identifierar detta område som de största block inom namnområdet kort-block, sedan identifierar manus och stilar vi bara registrerade som huvudredaktör manus, redaktör stylesheet, och primära stylesheet för blocket.

Om du är bekant med tema utveckling, du har nog använt get_template_directory() för att hantera sökvägar i krokar som de ovan. För plugin-utveckling använder vi funktionen plugins_url() som gör ungefär samma sak, utom i stället för att sammanfoga en väg som denna: get_template_directory() . ‘https://cdn.css-tricks.com/script.js’, plugins_url() tar emot en string path som en parameter och gör sammanslagning för oss. Den andra parametern, _ FIL _, är en av PHP: s magiska konstanter som motsvarar den fullständiga sökvägen för den aktuella filen.

Slutligen, om du vill lägga till fler block till denna plugin, du skulle behöva en version av den här funktionen för varje block. Du kan räkna ut vad är rörliga och kan generera någon form av loop för att hålla den fin och TORR, längre ner på linjen. Nu ska jag gå oss genom att få Babel igång.

Få Babel kör

Babel blir vår ES6 kod i ett bättre stöd för ES5 kod, så vi behöver installera vissa beroenden. I roten av ditt plugin (wp-content/plugins/kort-block), kör följande:

npm install babel-core babel-loader babel-plugin-lägga till-modul-export babel-plugin-förvandla-reagera-jsx babel-preset-env-spara-dev

Som stor ol’ npm install lägger alla Babel beroenden. Nu kan vi lägga till vår .babelrc fil som lagrar vissa inställningar för oss. Det hindrar oss från att behöva upprepa dem om och om igen i kommandoraden.

Medan de ännu är i din tema mapp, lägg till följande fil: .babelrc.

Nu öppna upp den och klistra in följande:

{
“presets”: [“miljö”],
“plugins”: [
[“transform-reagera-jsx”, {
“pragma”: “wp.elementet.createElement”
}]
]
}

Så, vad vi har är att det är två saker:

“presets”: [“miljö”] är i grunden magi. Det avgör automatiskt som ES har att använda för att skapa dina ES5 kod. Vi brukade ha för att lägga till olika presets för alla de olika ES-versioner (t ex ES2015), men det är förenklats.

I plugins, kommer du att märka att det är en Reagera JSX transformator. Att sortera ut våra JSX och förvandla det till en ordentlig JavaScript, men vad vi gör är att berätta det för att generera WordPress faktorer, snarare än att Reagera element, som JSX är mer som vanligen förknippas med.

Generera stub filer

Det sista vi ska göra är att generera en del påbörjad filer och testa att våra webpack och WordPress installation är allt bra.

Gå in i din plugin-katalogen och skapa en mapp som heter kvarter och inom att skapa två mappar: en som kallas src och en som kallas dist.

Inuti src mapp, skapa följande filer. Vi har lagt banorna också, så du sätter dem på rätt ställe:

  • blocks.js
  • gemensamma.scss
  • block/block.js
  • blockera/redaktör.scss
  • blockera/stil.scss

OK, så nu har vi genererat de minsta saker, låt oss köra webpack. Öppna upp din terminal och flytta in i din aktuella plugin-mappen—då kan vi köra följande, som kommer att skjuta upp webpack:

npx webpack

Ganska dang enkelt, va? Om du går vidare och titta i din dist mapp bör du se några sammanställt godbitarna i det!

Att linda upp

En hel del inställningar har gjorts, men alla våra ankor i rad. Vi har satt upp webpack, Babel och WordPress att alla arbetar som ett team för att bygga ut eller anpassade Gutenberg block (och framtida block). Förhoppningsvis nu du känner dig mer bekväm att arbeta med webpack och känner att du kan dyka och gör anpassningar för att passa ditt projekt.

Artikel-Serien:

  1. Serien Introduktion
  2. Vad är Gutenberg, Ändå?
  3. En Primer med skapa-guten-block
  4. Modern JavaScript-Syntax
  5. Reagera 101
  6. Att sätta upp en Egen webpack (Detta Inlägg)
  7. En Anpassad “Card” – Block (Kommer Snart!)