Leren Gutenberg: het opzetten van een Aangepaste Config webpack

0
28

Gutenberg introduceert de moderne JavaScript stapel in de WordPress ecosysteem, wat betekent dat een aantal nieuwe gereedschappen moeten worden geleerd. Hoewel programma ‘ s, zoals het maken van-guten-blok zijn ongelooflijk nuttig, het is ook handig om te weten wat er onder de motorkap.

Serie Artikelen:

  1. Serie Inleiding
  2. Wat is Gutenberg, Toch?
  3. Een Primer met create-guten-blok
  4. De Moderne Syntaxis Van JavaScript
  5. Reageren 101
  6. Het opzetten van een Aangepaste webpack (Deze Post)
  7. Een Aangepaste “Kaart” Blok (Coming Soon!)

De bestanden zullen we configureren hier moet bekend zijn van wat we behandeld in het Deel 2 Primer met create-guten-blok. Als je bent zoals ik (voor het lezen van Andy ‘ s tutorial, dat is!) en liever niet een duik in de configuratie van een deel gewoon nog, de steiger gemaakt door create-guten-blok overeenkomt met wat we maken hier, dus u kunt zeker gebruiken dat ook.

Laten we springen in!

Aan de slag

Webpack neemt de kleine, modulaire aspecten van de front-end code en smooshes ze in een efficiënte bestand. Het is zeer uitbreidbaar en aanpasbaar en werkt als het kloppende hart van enkele van de meest populaire producten en projecten op het web. Het is veel meer een JavaScript tool, hoewel het kan worden gebruikt voor vrij veel wat je wilt. Voor deze tutorial, het is de enige focus is JavaScript wel.

Wat we gaan krijgen webpack doen is kijken voor onze wijzigingen op een aantal aangepaste blok bestanden en compileren met Babel voor het genereren van JavaScript-bestanden die kunnen worden gelezen door de meeste browsers. Het zal ook het samenvoegen van alle afhankelijkheden die we importeren.

Maar eerst moeten we een plek om onze werkelijke webpack setup en front-end-bestanden. In Deel 2, wanneer we gepord om de bestanden die zijn gegenereerd door het maken van-guten-blok, zagen we dat het gemaakt van een infrastructuur voor een WordPress plugin die enqueued onze front-end-bestanden in een WordPress manier, en ons in staat gesteld om de plugin te activeren door middel van WordPress. Ik ga dit volgende hoofdstuk te lopen met ons door middel van het opzetten van de infrastructuur voor een WordPress plugin voor onze custom block.

Het opzetten van een plugin

Hopelijk heeft u nog een lokale WordPress bijvoorbeeld het runnen van onze primer in Deel 2, maar zo niet, u zult moeten hebben een geïnstalleerd om door te gaan met wat we doen. In het installeren, ga naar wp-content/plugins en maak een nieuwe directory genaamd card-blok (spoiler alert: we zijn van plan om een kaartje te maken blok… wie houdt er niet van kaarten?).

Dan, in kaart-blok, het maken van een bestand met de naam card-block.php. Dit zal het equivalent aan plugin.php van het maken van-guten-blok. Volgende, vallen in dit segment van de opmerkingen te vertellen WordPress te erkennen als deze map een plugin en weer te geven in de Plugins pagina van het Dashboard:

<?php
/*
De Plugin-Naam: Kaart Blokkeren
*/

Vergeet niet de opening PHP tag, maar je kunt het sluiten van uit, want we zullen meer toevoegen aan dit bestand snel genoeg.

WordPress ziet er voor deze opmerkingen bij het registreren van een plugin op dezelfde manier ziet het er voor commentaar op de bovenkant van de stijl.css in een thema. Dit is een verkorte versie van wat je zult vinden in de top van de andere plugins’ belangrijkste bestanden. Als je van plan bent om het te brengen op de WordPress plugin repository, zou je een beschrijving wilt toevoegen en versie nummer als licentie en auteur informatie.

Ga vooruit en activeer de plugin via het WordPress Dashboard, en ik neem het stuur weer terug om ons mee te nemen door het opzetten van onze Webpack config!

Aan de slag met webpack

Het eerste wat we gaan doen is het initialiseren van npm. Voer het volgende in op de root van je plugin map wp-content/plugins/kaart-blok):

npm init

Dit zal u een paar vragen stellen over uw project en uiteindelijk voor u genereren van een pakket.json-bestand, waarin een lijst met afhankelijkheden en slaat de belangrijkste informatie over uw project.

Daarna laten we installeren webpack:

npm installeren webpack –opslaan-dev

U heeft misschien gemerkt dat we zijn het installeren van webpack lokaal aan ons project. Dit is een goede praktijk om in cruciale pakketten die gevoelig zijn voor grote, het breken van wijzigingen. Het betekent ook dat u en uw team zijn allemaal aan het zingen uit dezelfde song vel.

Gebruik dan deze:

npm installeren extract-tekst-webpack-plugin@–opslaan-dev

Dan is deze Sass en CSS afhankelijkheden:

npm installeren node-sass sass-loader css-loader –opslaan-dev

Nu, NPX om ons toe te laten gebruik maken van onze lokale afhankelijkheden in de plaats van een wereldbevolking die:

npm installeren npx -g

Ten slotte, dit uitvoeren:

npm installeren webpack-cli –opslaan-dev

Dat zal de installatie van de webpack CLI voor u.

Nu hebben we deze is geïnstalleerd, moeten we maken onze config file. Nog steeds in de root van de plugin, maakt een bestand met de naam webpack.config.js en open dat bestand, zodat we kunnen krijgen codering.

Met deze webpack-bestand, we werken met traditionele ES5 code voor een maximale compatibiliteit, omdat het draait bij Knooppunt JS. U kunt gebruik maken van ES6 en Babel, maar we houden alles zo eenvoudig mogelijk voor deze training.

Stap uit, let ‘ s toevoegen sommige constanten en de invoer. Voeg de volgende, aan de top van uw webpack.config.js bestand:

var ExtractText = (‘extract-tekst-webpack-plugin’);
var debug = proces.env.NODE_ENV !== ‘productie’;
var webpack = (‘webpack’);

De debug-var is te verklaren of we in de debug modus. Dit is onze standaard modus, maar kan overruled worden door prepending onze webpack-commando ‘ s met NODE_ENV=productie. De debug boolean vlag zal bepalen of webpack genereert sourcemaps en minifies de code.

Zoals u kunt zien, zijn we vereisen van een aantal afhankelijkheden. We weten dat webpack is nodig, dus we zullen overslaan. Laten we in plaats daarvan onze aandacht richten op ExtractText. In wezen, ExtractText stelt ons in staat om andere bestanden dan JavaScript in de mix. We gaan dit nodig hebben voor onze Sass bestanden. Standaard webpack neemt alles van JavaScript, zodat ExtractText soort *vertaalt* de andere soorten bestanden.

Laten toevoegen config nu. Voeg het volgende toe na de webpack definitie:

var extractEditorSCSS = nieuwe ExtractText({
bestandsnaam: ‘./blokken.editor.bouwen.css’
});

var extractBlockSCSS = nieuwe ExtractText({
bestandsnaam: ‘./blokken.stijl.bouwen.css’
});

Wat we hebben gedaan is er het concretiseren van twee exemplaren van ExtractText door het passeren van een config object. Alle die we ons gesteld hebben is de output van onze twee blokken met stylesheets. We komen om deze in de volgende serie, maar nu is alles wat je moet weten is dat dit de eerste stap in het krijgen van onze Sass samenstellen.

OK, na de laatste bit van de code, voeg het volgende toe:

var plugins = [ extractEditorSCSS, extractBlockSCSS ];

Hier hebben we twee arrays van plugins. Onze ExtractText exemplaren leven in de kern van de plug-ins is en we hebben een paar optimalisatie plugins die alleen smooshed in de kern plugins stellen als we niet in de debug modus. We draaien die logica rechts aan het einde.

Volgende, voeg deze SCSS config object:

var scssConfig = {
gebruik: [
{
loader: ‘css-loader’
},
{
loader: ‘sass-loader’
opties: {
outputStyle: ‘gecomprimeerd’
}
}
]
};

Dit object is vertel ons webpack bijvoorbeeld hoe zich te gedragen als het gaat over scss bestanden. Wij hebben het in een config object om de dingen zoveel mogelijk DROOG.

Laatste up, het vlees en de taters van de config:

de module.export = {
context: __dirname,
devtool: debug ? ‘inline-sourcemap’ : null,
modus: debug ? ‘ontwikkeling’ : ‘productie’,
vermelding: ‘./blocks/src/blocks.js’,
output: {
pad: __dirname + ‘/blokken/dist/’,
bestandsnaam: ‘blocks.build.js’
},
module: {
regels: [
{
test: /.js$/,
exclusief: /node_modules/,
gebruik: [
{
loader: ‘babel-loader’
}
]
},
{
test: /editor.scss$/,
exclusief: /node_modules/,
gebruik: extractEditorSCSS.extract(scssConfig)
},
{
test: /stijl.scss$/,
exclusief: /node_modules/,
gebruik: extractBlockSCSS.extract(scssConfig)
}
]
},
plugins: plug-ins
};

Dat is onze hele config, dus laten we het af te breken.

Het script begint met de module.de uitvoer die in wezen zeggen: “wanneer u importeert of nodig mij is dit wat je krijgt.” We kunnen bepalen wat we bloot te stellen aan wat de invoer onze code, wat betekent dat we kunnen uitvoeren bovenstaande code module.de uitvoer die een aantal zware berekeningen, bijvoorbeeld.

Laten we vervolgens eens kijken naar enkele van deze volgende eigenschappen:

  • context is de basis waar de paden van. We hebben doorgegeven __dirname, die is in de huidige directory.
  • devtool is waar we bepalen wat voor soort sourcemap we wel of niet willen. Als we niet in debug mode, passeren we null met een ternaire operator.
  • item is waar wij vertellen webpack te starten met de reis van pack-ery. In ons geval is dit het pad naar onze blocks.js -bestand.
  • de output is wat het zegt over het tin. We passeren een object dat bepaalt de uitgang van het pad en de bestandsnaam die we willen noemen.

De volgende module is die we hebben in een beetje meer detail. De module afdeling kan meerdere regels bevatten. In ons geval, de enige regel die we hebben is op zoek naar JavaScript en SCSS bestanden. Het doet dit door te zoeken met een reguliere expressie die wordt gedefinieerd door de test eigendom. Het uiteindelijke doel van de regel is het vinden van de juiste soort van bestanden en pas ze aan op een lader, die is babel-lader in ons geval. Zoals we geleerd hebben in een eerdere tutorial in deze serie, Babel is wat zet onze moderne ES6 code in meer ondersteund ES5-code.

Ten slotte is onze sectie plugins. Hier geven we onze reeks van de plugin exemplaren. In ons project, we hebben plugins die kleineren code, het verwijderen van dubbele code en dat vermindert de lengte van de gebruikte Id ‘ s. Dit alles om ervoor te zorgen dat onze productie-code is geoptimaliseerd.

Voor de referentie, dit is hoe uw volledige config bestand eruit moeten zien:

var ExtractText = (‘extract-tekst-webpack-plugin’);
var debug = proces.env.NODE_ENV !== ‘productie’;
var webpack = (‘webpack’);

var extractEditorSCSS = nieuwe ExtractText({
bestandsnaam: ‘./blokken.editor.bouwen.css’
});

var extractBlockSCSS = nieuwe ExtractText({
bestandsnaam: ‘./blokken.stijl.bouwen.css’
});

var plugins = [extractEditorSCSS, extractBlockSCSS];

var scssConfig = {
gebruik: [
{
loader: ‘css-loader’
},
{
loader: ‘sass-loader’
opties: {
outputStyle: ‘gecomprimeerd’
}
}
]
};

de module.export = {
context: __dirname,
devtool: debug ? ‘inline-sourcemap’ : null,
modus: debug ? ‘ontwikkeling’ : ‘productie’,
vermelding: ‘./blocks/src/blocks.js’,
output: {
pad: __dirname + ‘/blokken/dist/’,
bestandsnaam: ‘blocks.build.js’
},
module: {
regels: [
{
test: /.js$/,
exclusief: /node_modules/,
gebruik: [
{
loader: ‘babel-loader’
}
]
},
{
test: /editor.scss$/,
exclusief: /node_modules/,
gebruik: extractEditorSCSS.extract(scssConfig)
},
{
test: /stijl.scss$/,
exclusief: /node_modules/,
gebruik: extractBlockSCSS.extract(scssConfig)
}
]
},
plugins: plug-ins
};
Dat is webpack geconfigureerd. Ik neem de microfoon terug om ons te laten zien hoe om zich officieel te registreren onze blok met WordPress. Dit moet voel je vrij vertrouwd aan degenen van u die gewend zijn aan het touwtrekken met acties en filters in WordPress.

Het registreren van onze blok

Terug card-block.php onze belangrijkste taak is nu aan zet in het JavaScript-en CSS-bestanden zullen we het gebouw met webpack. In een thema, wij willen dit doen met call wp_enqueue_script en wp_enqueue_style in een actie toegevoegd aan wp_enqueue_scripts. We wezen hetzelfde doen hier, behalve wij hebben in plaats daarvan zet in de scripts en stijlen met een specifieke functie te blokken.

Drop deze code onder de opening reactie in card-block.php:

functie my_register_gutenberg_card_block() {

// Inschrijven voor onze blok script met WordPress
wp_register_script(
‘gutenberg-kaart de-blokkeren’,
plugins_url(‘/blocks/dist/blocks.build.js’, __BESTAND__),
array(‘wp-blok’, ‘wp-element’)
);

// Inschrijven voor onze blokkeren van de basis van CSS
wp_register_style(
‘gutenberg-kaart-blok-stijl’,
plugins_url( ‘/blokken/dist/blokken.stijl.bouwen.css’, __BESTAND__ ),
array( ‘wp-blok’ )
);

// Inschrijven voor onze blok editor-specifieke CSS
wp_register_style(
‘gutenberg-kaart de-blokkeren-bewerken-stijl’,
plugins_url(‘/blokken/dist/blokken.editor.bouwen.css’, __BESTAND__),
array( ‘wp-bewerken-blokken’ )
);

// Zet in het script in de editor
register_block_type(‘kaart-blok/main’, array(
‘editor_script’ => ‘gutenberg-kaart de-blokkeren’,
‘editor_style’ => ‘gutenberg-kaart de-blokkeren-bewerken-stijl’,
‘style’ => ‘gutenberg-kaart de-blokkeren-bewerken-stijl’
));
}

add_action(‘init’, ‘my_register_gutenberg_card_block’);

Als de bovenstaande opmerkingen geven we eerst registreren onze script met WordPress met behulp van de handgreep gutenberg-kaart-blok met twee afhankelijkheden: wp-blokken en wp-elementen. Deze functie registreert slechts een script, is het niet enqueue. We doen iets dergelijks die uit het bewerken en belangrijkste stylesheets.

Onze laatste functie, register_block_type, doet de enqueuing voor ons. Het geeft ook het blok een naam, kaart-blok/main, waarmee u deze blokkeren als de belangrijkste regel in de naamruimte-kaart-blok, identificeert vervolgens het script en de stijlen die we alleen geregistreerd als het belangrijkste script editor, editor stylesheet, en de primaire-stylesheet voor het blok.

Als u vertrouwd bent met de ontwikkeling van thema, u hebt waarschijnlijk gebruikt get_template_directory() om het bestand paden in haken zoals die hierboven. Voor plug-in-ontwikkeling gebruiken we de functie plugins_url() die doet eigenlijk hetzelfde, behalve dat in plaats van het samenvoegen van een pad zoals deze: get_template_directory() . ‘https://cdn.css-tricks.com/script.js’, plugins_url() accepteert een string pad als een parameter en betekent de samenvoeging voor ons. De tweede parameter, _ BESTAND _), is één van de PHP ‘ s magic constants dat komt neer op het volledige bestandspad van het huidige bestand.

Tot slot, als u wilt toevoegen van meer blokken om deze plugin heeft, moet je een versie van deze functie voor elk blok. Je kan trainen wat is variabele en het genereren van een soort van lus te houden het leuk en DROOG, verder naar beneden de lijn. Nu, ik loop met ons op door middel van het krijgen van Babel up and running.

Het krijgen van Babel running

Babel keert onze ES6 code in beter ondersteund ES5 code, dus we moeten te installeren afhankelijkheden. In de root van je plugin wp-content/plugins/kaart-blok), voer je het volgende:

npm installeren van babel-core babel-loader babel-plugin-add-module-uitvoer babel-plugin-transform-reageren-jsx babel-preset-env –opslaan-dev

Die grote ol’ npm installeren voegt alle Babel afhankelijkheden. Nu kunnen we toevoegen aan ons .babelrc bestand die slaat de instellingen op voor ons. Het verhindert ons te herhalen hen over en in de commando regel.

Terwijl je nog steeds in je thema map, voeg het volgende bestand: .babelrc.

Nu opent het en plak het volgende:

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

Dus, wat hebben we er twee dingen:

“presets”: [“env”] is in feite magie. Het bepaalt automatisch welke ES functies te gebruiken voor het genereren van uw ES5-code. We hebben voor het toevoegen van verschillende presets voor de verschillende ES-versies (bv. ES2015), maar het is vereenvoudigd.

In de plugins, zult u merken dat er een te Reageren JSX transformator. Dat is het sorteren van onze JSX en draaien in de juiste JavaScript, maar wat we doen is het vertellen van het genereren van WordPress elementen, dan Reageren elementen, die JSX is meer geassocieerd met.

Het genereren van stub-bestanden

Het laatste wat we gaan doen is het genereren van stub-bestanden en test dat onze webpack en WordPress setup is allemaal goed.

Ga in je plugin directory en maak een map genaamd blokken en binnen die twee mappen: één genaamd src heet dist.

In de src map is, maakt u de volgende bestanden. We hebben de paden ook, dus je zet ze op de juiste plaats:

  • blocks.js
  • common.scss
  • block/block.js
  • blokkeren/editor.scss
  • blok/de stijl.scss

OK, nu hebben we gegenereerde het minimum bedrag van de dingen, liet de webpack. Open je terminal en te verplaatsen naar uw huidige plugin map—dan kunnen we de volgende, die vuur-up webpack:

npx webpack

Mooie dang eenvoudig, hè? Als je gaat vooruit en kijk in uw dist map, moet je zien wat samengesteld goodies!

Inpakken

Veel van de installatie heeft gedaan, maar al onze eenden zijn in een rij. We hebben webpack, Babel en WordPress op alle werken als een team uit te bouwen of aangepaste Gutenberg-block (en toekomstige blokken). Hopelijk nu voel je je meer comfortabel werken met webpack en het gevoel dat je zou kunnen duiken en maken van aanpassingen om te passen bij uw projecten.

Serie Artikelen:

  1. Serie Inleiding
  2. Wat is Gutenberg, Toch?
  3. Een Primer met create-guten-blok
  4. De Moderne Syntaxis Van JavaScript
  5. Reageren 101
  6. Het opzetten van een Aangepaste webpack (Deze Post)
  7. Een Aangepaste “Kaart” Blok (Coming Soon!)