Lernen Gutenberg: einrichten einer Benutzerdefinierten webpack Config

0
56

Gutenberg führt in die moderne JavaScript-stack in das WordPress-ökosystem, was bedeutet, dass einige neue Werkzeuge erlernt werden sollte. Obwohl tools wie erstellen-guten-block sind unglaublich nützlich, es ist auch praktisch zu wissen, was Los ist unter der Haube.

Artikel-Serie:

  1. Serie Einführung
  2. Was ist Gutenberg, Eh?
  3. Eine Grundierung mit erstellen-guten-block
  4. Moderne JavaScript-Syntax
  5. Reagieren 101
  6. Einrichten einer Benutzerdefinierten webpack (Dieser Beitrag)
  7. Eine Eigene “Karte” Block (Kommt Bald!)

Die Dateien konfigurieren wir die hier bekannt sein dürfte von dem, was wir bereits im Teil 2 Primer erstellen-guten-block. Wenn Sie wie ich (vor dem Lesen Andy ‘ s tutorial, das ist!) und möchte lieber nicht Tauchen Sie ein in den Teil der Konfiguration nur noch, das Gerüst erstellt durch erstellen-guten-block entspricht, was wir hier schaffen, so kann man sicherlich verwenden, als gut.

Let ‘ s jump in!

Erste Schritte

Webpack nimmt die kleine, modulare Aspekte des front-end-codebase und smooshes Sie nach unten in eine leistungsfähige Datei. Es ist hochgradig erweiterbar und konfigurierbar und funktioniert wie das schlagende Herz von einigen der beliebtesten Produkte und Projekte im Internet. Es ist sehr viel ein JavaScript-Werkzeug, obwohl es kann verwendet werden, für ziemlich viel was auch immer Sie wollen. Für dieses tutorial, es ist alleiniger Fokus ist JavaScript jedoch.

Was wir webpack tun, ist die Uhr für unsere änderungen, die auf einige benutzerdefinierte block-Dateien, und kompilieren Sie Sie mit Babel zu generieren JavaScript-Dateien, die gelesen werden können von den meisten Browsern. Es werden auch Zusammenführen irgendwelche Abhängigkeiten, die wir importieren.

Aber zuerst müssen wir einen Ort zum speichern unserer aktuellen webpack-setup und front-end-Dateien. In Teil 2, wenn wir stocherte die Dateien generiert, die durch erstellen-guten-block, sahen wir, dass es erstellt eine Infrastruktur, die für ein WordPress-plugin, das in die Warteschlange eingereiht, unsere front-end-Dateien in einem WordPress-Weise, und uns ermöglicht, aktivieren Sie das plugin über WordPress. Werde ich im nächsten Abschnitt zu gehen, der uns durch die Einrichtung der Infrastruktur für ein WordPress-plugin für unsere custom block.

Die Einrichtung einer plugin

Hoffentlich haben Sie immer noch eine lokale WordPress-Instanz ausgeführt von unserem primer in Teil 2, aber wenn nicht, müssen Sie installieren, um fortzufahren mit dem, was wir gerade tun. In diesem installieren, navigiere zu wp-content/plugins und erstellen ein frisches Verzeichnis, genannt Karte-block (spoiler alert: wir sind gehen, um eine Karte zu sperren… wer nicht gerne Karten?).

Dann, innerhalb Karte-block, erstellen Sie eine Datei namens card-block.php. Dies entspricht, plugin.php erstellen-guten-block. Weiter fallen in dieses Stück Kommentare zu sagen, WordPress, bestätigen dieses Verzeichnis als plugin und zeigt Sie in der Plugins-Seite des Armaturenbretts:

<?php
/*
Plugin-Name: Karte Sperren
*/

Vergessen Sie nicht, die öffnung PHP-tag, aber Sie können die Schließung einer ab, da werden wir das hinzufügen mehr zu dieser Datei noch früh genug.

WordPress sieht für diese Kommentare registrieren ein plugin in der gleichen Weise, die es sieht für Kommentare an der Spitze der Stil.css in ein Thema. Dies ist eine verkürzte version von dem, was finden Sie an der Spitze von anderen plugins ” Haupt-Dateien. Wenn Sie planen, es zu veröffentlichen auf der WordPress-plugin-repository, würden Sie wollen, eine Beschreibung hinzufügen und die Versionsnummer sowie die Lizenz-und autoreninformationen.

Gehen Sie vor und aktivieren Sie das plugin über das WordPress-Dashboard, und ich nehme das lenkrad zurück, um uns durch die Einrichtung unserer Webpack config!!!

Erste Schritte mit webpack

Das erste, was wir tun sollten, ist, initialisieren npm. Führen Sie die folgenden an der Wurzel von Ihrem plugin-Ordner (wp-content/plugins/Karten-block):

npm init

Dieser wird Sie bitten, ein paar Fragen zu Ihrem Projekt und letztlich generieren Sie eine package.json-Datei, welche Abhängigkeiten und speichert wichtige Informationen über Ihr Projekt.

Als Nächstes installieren wir webpack:

npm installieren webpack –save-dev

Sie haben vielleicht bemerkt, dass wir die Installation webpack lokal für unser Projekt. Dies ist eine gute übung, um in wichtige Pakete, die anfällig für große, wichtige änderungen. Es bedeutet auch, dass Sie und Ihr team alle singen aus dem selben Stück Blech.

Danach dies ausführen:

npm install-Extrakt-text-webpack-plugin@next –save-dev

Dann diese Sass und CSS-Abhängigkeiten:

npm install node-sass-sass-css loader-loader –save-dev

Nun, NPX uns zu ermöglichen, nutzen Sie unsere lokale Abhängigkeiten, anstatt in einer globalen Dateien:

npm installieren npx -g

Schließlich, dies ausführen:

npm installieren webpack-cli –save-dev

Installiert wird das webpack CLI für Sie.

Nun, wir haben dieses installiert wird, müssen wir unsere config Datei. Noch in der Wurzel des plugin, erstellen Sie eine Datei namens webpack.config.js und die Datei öffnen, so können wir Programmieren.

Mit diesem webpack-Datei, wir arbeiten mit traditionellen ES5-code für maximale Kompatibilität, denn es läuft mit Node-JS. Sie können ES6 und Babel, aber wir halten die Dinge so einfach wie möglich für dieses tutorial.

Steigen, fügen wir einige Konstanten und Importe. Fügen Sie den folgenden, Recht an der Spitze Ihrer webpack.config.js Datei:

var ExtractText = require(‘Extrakt-text-webpack-plugin’);
var debug = Prozess.env.NODE_ENV !== ‘Produktion’;
var webpack = require(‘webpack’);

Die debug var deklarieren, ob oder nicht wir sind im debug-Modus. Dies ist unsere Standard-Modus, aber es kann überschrieben werden, indem unsere webpack-Befehle mit NODE_ENV= – Produktion. Debug boolean-flag bestimmt, ob webpack generiert sourcemaps und minimiert den code.

Wie Sie sehen können, wir wollen, dass einige Abhängigkeiten. Wir wissen, dass webpack benötigt wird, so werden wir Sie überspringen. Lassen Sie uns stattdessen darauf konzentrieren, unsere Aufmerksamkeit auf ExtractText. Im wesentlichen, ExtractText ermöglicht es uns, ziehen Sie in Dateien andere als JavaScript in den mix. Wir brauchen diese für unsere Sass-Dateien. Standardmäßig webpack meint alles ist JavaScript, also ExtractText Art *übersetzt* andere Arten von Dateien.

Fügen Sie nun einige config jetzt. Fügen Sie den folgenden nach dem webpack definition:

var extractEditorSCSS = new ExtractText({
Dateiname: ‘./die Blöcke.editor.bauen.css’
});

var extractBlockSCSS = new ExtractText({
Dateiname: ‘./die Blöcke.Stil.bauen.css’
});

Was wir getan haben, es ist instanziieren zwei Instanzen von ExtractText, indem ein config Objekt. Alle, die wir uns gesetzt haben, ist das Ergebnis unseres zwei-block-stylesheets. Wir werden kommen, um diese in der nächsten Reihe, aber jetzt alles, was Sie wissen müssen ist, dass dies der erste Schritt, unsere Sass kompilieren.

OK, nach diesem letzten Stück code, fügen Sie den folgenden:

var plugins = [ extractEditorSCSS, extractBlockSCSS ];

Hier haben wir zwei arrays von plugins. Unsere ExtractText live-Instanzen in den Kern-plugins gesetzt und wir haben ein paar Optimierungs-plugins, sind nur smooshed in die core-plugins einstellen, wenn wir nicht in den debug-Modus. Wir laufen, dass die Logik am Ende.

Als Nächstes, fügen Sie diese SCSS config-Objekt:

var scssConfig = {
verwenden Sie: [
{
loader: ‘css-loader’
},
{
loader: ‘sass-loader’,
Optionen: {
outputStyle: ‘komprimiert’
}
}
]
};

Dieses Objekt gehen zu sagen, unsere webpack-Instanz, wie Sie sich Verhalten, wenn es darum geht über scss-Dateien. Wir haben es in einem config-Objekt, um die Dinge so TROCKEN wie möglich.

Dauern bis, das Fleisch und taters der config:

– Modul.Exporte = {
Kontext: __dirname,
devtool: debug ? ‘inline-sourcemap’ : null;
Modus: debug ? ‘Entwicklung’, ‘Produktion’,
Eintrag: ‘./blocks/src/blocks.js’,
Ausgabe: {
Pfad: __dirname + ‘/blocks/dist/’,
Dateiname: ‘blocks.build.js’
},
Modul: {
Regeln: [
{
test: /.js$/,
ausschließen: /node_modules/,
verwenden Sie: [
{
loader: “babel-loader’
}
]
},
{
test: /editor.scss$/,
ausschließen: /node_modules/,
Verwendung: extractEditorSCSS.Extrakt(scssConfig)
},
{
test: /style.scss$/,
ausschließen: /node_modules/,
Verwendung: extractBlockSCSS.Extrakt(scssConfig)
}
]
},
plugins: plugins
};

Das ist unsere ganze config, also lasst uns es brechen.

Das Skript beginnt mit Modul.die Exporte, die im wesentlichen sagen, “wenn Sie importieren oder von mir verlangen, das ist, was Sie bekommen.” Wir können bestimmen, was wir aussetzen, um unabhängig von Importen, die unseren code, was bedeutet, dass wir laufen könnten obigen code-Modul.die Exporte, die einige schwere Berechnungen, zum Beispiel.

Als Nächstes betrachten wir einige der folgenden Eigenschaften:

  • Kontext ist unsere Basis, wo Wege beheben. Wir haben bestanden, __dirname, ist das aktuelle Arbeitsverzeichnis.
  • devtool ist, wo wir definieren, welche Art von sourcemap wir können oder nicht wollen. Wenn wir nicht im debug-Modus, wir übergeben Sie den Wert null mit ein ternärer operator.
  • Eintrag ist, wo wir sagen, webpack, um zu beginnen Ihre Reise von pack-ery. In unserem Beispiel ist dies der Weg zu unseren blocks.js Datei.
  • output ist das, was es auf dem zinn sagt. Wir übergeben ein Objekt, das definiert den Ausgabe-Pfad und den Dateinamen ein, dass wir es auch nennen wollen.

Weiter ist das Modul, welches wir kamen in einen Hauch mehr detail. Das Modul kann mehrere Regeln enthalten. In unserem Beispiel, die einzige Regel die wir haben ist auf der Suche nach JavaScript-und SCSS-Dateien. Es tut dies durch die Suche mit einem regulären Ausdruck, der definiert ist durch die Eigenschaft testen. Das end-Ziel der Vorschrift ist es, die richtige Art von Dateien und geben Sie Sie in einen loader, der babel-Lader in unserem Fall. Wie wir gelernt haben in einem vorherigen Lernprogramm in dieser Serie, Babel ist es, was wandelt unsere moderne ES6-code in mehr unterstützt ES5-code.

Schließlich ist unsere plugins Abschnitt. Hier geben wir unsere array von plugin-Instanzen. In unserem Projekt haben wir plugins, die minifizieren code, entfernen von doppelten code und eine, reduziert sich die Länge von Häufig verwendeten IDs. Das ist alles, um sicherzustellen, dass unsere Produktions-code optimiert ist.

Für Referenz, dies ist wie die full config-Datei Aussehen sollte:

var ExtractText = require(‘Extrakt-text-webpack-plugin’);
var debug = Prozess.env.NODE_ENV !== ‘Produktion’;
var webpack = require(‘webpack’);

var extractEditorSCSS = new ExtractText({
Dateiname: ‘./die Blöcke.editor.bauen.css’
});

var extractBlockSCSS = new ExtractText({
Dateiname: ‘./die Blöcke.Stil.bauen.css’
});

var plugins = [extractEditorSCSS, extractBlockSCSS];

var scssConfig = {
verwenden Sie: [
{
loader: ‘css-loader’
},
{
loader: ‘sass-loader’,
Optionen: {
outputStyle: ‘komprimiert’
}
}
]
};

– Modul.Exporte = {
Kontext: __dirname,
devtool: debug ? ‘inline-sourcemap’ : null;
Modus: debug ? ‘Entwicklung’, ‘Produktion’,
Eintrag: ‘./blocks/src/blocks.js’,
Ausgabe: {
Pfad: __dirname + ‘/blocks/dist/’,
Dateiname: ‘blocks.build.js’
},
Modul: {
Regeln: [
{
test: /.js$/,
ausschließen: /node_modules/,
verwenden Sie: [
{
loader: “babel-loader’
}
]
},
{
test: /editor.scss$/,
ausschließen: /node_modules/,
Verwendung: extractEditorSCSS.Extrakt(scssConfig)
},
{
test: /style.scss$/,
ausschließen: /node_modules/,
Verwendung: extractBlockSCSS.Extrakt(scssConfig)
}
]
},
plugins: plugins
};
Das webpack konfiguriert. Ich nehm das mic zurück, um uns zu zeigen, wie offiziell registrieren unsere block mit WordPress. Dies sollte fühlen sich ziemlich vertraut für diejenigen, die verwendet werden, um Auseinandersetzungen mit Aktionen und Filter in WordPress.

Registrierung unseren block

Zurück in card-block.php unsere Hauptaufgabe ist es jetzt einreihen JavaScript und CSS-Dateien erstellen wir mit webpack. In ein Thema, wir tun dies mit dem Aufruf wp_enqueue_script und wp_enqueue_style innerhalb einer Aktion Hinzugefügt wp_enqueue_scripts. Wir im wesentlichen tun, das gleiche hier, nur dass statt wir enqueue-Skripte und Stile, mit eine spezifische Funktion blockiert.

Diese Drop code unter die öffnung im Kommentar card-block.php:

Funktion my_register_gutenberg_card_block() {

// Registrieren unser block Skript mit WordPress
wp_register_script(
‘gutenberg-card-block’,
plugins_url(‘/blocks/dist/blocks.build.js’, __FILE__),
array(‘wp-Blöcke’, ‘wp-element’)
);

// Sich, unser block auf die Basis-CSS
wp_register_style(
‘gutenberg-card-block-style’,
plugins_url( ‘/blocks/dist/Blöcke.Stil.bauen.css -‘, __FILE__ ),
array( ‘wp-Blöcke’ )
);

// Registrieren unsere block-editor-spezifische CSS
wp_register_style(
‘gutenberg-card-block-edit-style’,
plugins_url(‘/blocks/dist/Blöcke.editor.bauen.css -‘, __FILE__),
array( ‘wp-edit-Blöcke’ )
);

// Enqueue das Skript in den editor
register_block_type (“Karte-sperren/main’, array(
‘editor_script’ => ‘gutenberg-card-block’,
‘editor_style’ => ‘gutenberg-card-block-edit-style’,
‘style’ => ‘gutenberg-card-block-edit-Stil’
));
}

add_action(‘init’, ‘my_register_gutenberg_card_block’);

Wie die obigen Ausführungen zeigen, haben wir zunächst registrieren, unser Skript mit WordPress unter Verwendung des Griffs gutenberg-card-block mit zwei Abhängigkeiten: wp-Blöcke und die wp-Elemente. Diese Funktion registriert nur ein Skript, es muss nicht einreihen. Wir tun etwas ähnliches für sich Bearbeiten und Haupt-stylesheets.

Unsere Letzte Funktion, register_block_type, macht das einreihen für uns. Außerdem gibt Sie dem block einen Namen, eine Karte-block/main, identifiziert, die diesen block als den wichtigsten block innerhalb des namespace-Karte-block, dann erkennt das Skript und Stile, die wir gerade registriert als Haupt-editor Skript-editor stylesheet-und PV-stylesheet für den block.

Wenn Sie vertraut sind mit dem Thema Entwicklung sind, haben Sie wahrscheinlich verwendet get_template_directory() zur Verarbeitung von Datei-Pfade in den Haken, wie die oben. Für die plugin-Entwicklung verwenden wir die Funktion plugins_url (), die nicht so ziemlich das gleiche, nur dass statt der Verkettung von einem Pfad wie diesem: get_template_directory() . ‘https://cdn.css-tricks.com/script.js’, plugins_url() akzeptiert einen string Pfad als parameter und hat die Verkettung für uns. Der zweite parameter, _ DATEI,_, ist einer von PHP ‘ s Magische Konstanten, das entspricht dem vollständigen Pfad der aktuellen Datei.

Schließlich, wenn Sie wollen, fügen Sie weitere Blöcke an diesem plugin, Sie müssten eine version dieser Funktion für jeden block. Sie konnte herausfinden, was die variable und erzeugen eine Art Schleife, um es schön und TROCKEN, weiter unten auf der Linie. Nun, ich werde gehen, uns durch das erste Babel laufen.

Erste Babel running

Babel stellt unser ES6-code in besser unterstützt ES5-code, so müssen wir einige Abhängigkeiten installieren. In der Wurzel von Ihrem plugin (wp-content/plugins/Karten-block), führen Sie die folgenden:

npm installieren babel-core-babel-loader babel-plugin-add-Modul-Exporte babel-plugin-transform-reagieren-jsx babel-preset-env –save-dev

Die große ol’ npm install werden alle Babel Abhängigkeiten. Jetzt können wir hinzufügen, unsere .babelrc-Datei, die speichert einige Einstellungen für uns. Es hindert uns daran, dass, um Sie zu wiederholen immer und immer wieder in der Befehlszeile.

Während noch im theme-Ordner, fügen Sie die folgende Datei: .babelrc.

Nun öffnen Sie es und fügen Sie die folgenden:

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

Was wir also haben sind zwei Dinge:

“presets”: [“env”] im Grunde ist Magie. Es ermittelt automatisch, welche ES-Funktionen zu verwenden, um zu generieren Ihre ES5-code. Wir haben fügen Sie verschiedene presets für die verschiedenen ES-Varianten (z.B. ES2015), aber es ist vereinfacht worden.

In den plugins, Sie werden bemerken, dass es ein Reagieren JSX Transformator. Das aussortieren unserer JSX und drehen es in die richtige JavaScript, aber was wir tun ist, sagen Sie zu generieren-WordPress-Elemente, anstatt zu Reagieren-Elemente, die JSX ist mehr allgemein im Zusammenhang mit.

Generieren von stub-Dateien

Das Letzte, was wir tun, ist erzeugen von stub-Dateien und testen Sie, dass unsere webpack-und WordPress-setup ist alles gut.

Gehen Sie in Ihr plugin-Verzeichnis und erstellen Sie einen Ordner namens blocks, und innerhalb dieser, erstellen Sie zwei Ordner: einen namens ” src ” und eine namens dist.

Innerhalb der src-Ordner, erstellen Sie die folgenden Dateien. Wir haben Hinzugefügt, die Pfade, so dass Sie Sie an der richtigen Stelle:

  • blocks.js
  • common.scss
  • block/block.js
  • block/editor.scss
  • block/Stil.scss

OK, so jetzt haben wir erzeugt, die minimale Menge Dinge, lassen Sie uns führen webpack. Öffnen Sie Ihr terminal und wechseln in Ihrer aktuellen plugin-Ordner—dann können wir folgenden, die Feuer-webpack:

npx webpack

Ziemlich dang einfach, nicht wahr? Wenn Sie gehen Sie vor und schauen Sie in Ihren dist-Ordner, sehen Sie ein paar leckereien zusammengestellt!

Zusammenfassung

Eine Menge Einstellungen gemacht worden sind, aber alle unsere Enten in einer Reihe sind. Wir haben webpack, Babel und WordPress, um alle arbeiten als ein team zu erstellen oder benutzerdefinierte Gutenberg-block (und künftigen Blöcken). Hoffentlich fühlen Sie sich wohler arbeiten mit webpack und das Gefühl, wie Sie konnte Tauchen und Anpassungen vornehmen, um fit Ihre Projekte.

Artikel-Serie:

  1. Serie Einführung
  2. Was ist Gutenberg, Eh?
  3. Eine Grundierung mit erstellen-guten-block
  4. Moderne JavaScript-Syntax
  5. Reagieren 101
  6. Einrichten einer Benutzerdefinierten webpack (Dieser Beitrag)
  7. Eine Eigene “Karte” Block (Kommt Bald!)