Im Dezember 2020 hat Flo eine neue Version dieses Artikel hier im KrautPress-Blog geschrieben.
Um einen Gutenberg-Block zu entwickeln, braucht es theoretisch nichts außer einem Text-Editor. Wer sich das Leben aber etwas leichter machen möchte (oder mindestens zunächst schwerer, wenn die Tools noch nicht bekannt sind), kann
- Babel einsetzen, um mit modernem JavaScript zu entwickeln, das nach Kompilierung trotzdem auch von älteren Browsern verstanden wird
- SASS einsetzen, um sich Schreibarbeit bei den Styles zu sparen und
- ein Tool wie Webpack nutzen, um Babel und die SASS-Kompilierung (und eventuelle weitere Dinge, wie automatische Generierung eines SVG-Sprites aus vielen einzelnen SVG-Icons, et cetera) nicht immer manuell anstoßen zu müssen.
Hier zeige ich am Beispiel von Webpack ein minimales Setup, das modernes JavaScript mit Babel kompiliert und SASS zu CSS macht.
Update vom 1. Juni 2019: Der Beitrag zeigt jetzt die Nutzung des NPM-Pakets @wordpress/scripts
, was die Einrichtung von Webpack und Babel deutlich erleichtert.
Voraussetzungen
Ich gehe davon aus, dass ihr
- eine lokale WordPress-Installation laufen und
- Node sowie NPM (kommt in der Regel mit der Node-Installation mit) installiert habt.
Außerdem könnt ihr innerhalb des wp-content/plugins
-Ordners schon mal ein leeres Verzeichnis für das Plugin anlegen (oder zum Verzeichnis eines existierenden Plugins wechseln), für das ihr später Webpack nutzen wollt.
package.json
erstellen und Abhängigkeiten installieren
Begebt euch über die Kommandozeile in das gerade erstellte Plugin-Verzeichnis und führt den Befehl npm init
aus. Jetzt solltet ihr einige Dinge zum Ausfüllen bekommen und am Ende bestätigen können, dass eine package.json
mit dem angezeigten Inhalt erstellt werden soll.
Nachdem ihr eine package.json
vorliegen habt, müssen wir uns ans Installieren der Abhängigkeiten machen. Überlegen wir kurz, was wir brauchen:
- Webpack
- Babel
- SASS-Kompilierer
Webpack und Babel installieren
Bis vor Kurzem mussten wir uns noch um die Installation der ganzen Abhängigkeiten selbst kümmern. Inzwischen bringt das NPM-Paket @wordpress/scripts
alle Tools für einen grundlegenden Babel-Workflow via Webpack mit. Im Beitrag »Building JavaScript« auf make.wordpress.org gibt es nähere Details dazu.
Alles, was wir für die Installation von Webpack und Babel machen müssen, ist also:
npm install --save-dev @wordpress/scripts
Code-Sprache: Bash (bash)
SASS installieren
Kommen wir zum SASS-Teil. Wir brauchen zunächst verschiedene Loader, um das SASS über Webpack zu verarbeiten und als eigene Datei auszugeben. Mit PostCSS wollen wir automatisch den Autoprefixer über das Ergebnis laufen lassen.
npm install --save-dev css-loader extract-loader file-loader postcss-loader sass-loader
Code-Sprache: Bash (bash)
Jetzt kommen noch die Abhängigkeiten node-sass
, autoprefixer
und postcss-cli
:
npm install --save-dev autoprefixer postcss-cli node-sass
Code-Sprache: Bash (bash)
Konfigurationsdateien erstellen
Nachdem wir jetzt alle Abhängigkeiten installiert haben, machen wir uns an das Erstellen zweier Konfigurationsdateien. Eine für PostCSS und eine für Webpack, die die Standard-Konfiguration erweitert, die mit @wordpress/scripts
geliefert wird. Die beiden Dateien kommen auf dieselbe Ebene wie die package.json
.
PostCSS konfigurieren
Die postcss.config.js
sieht so aus:
module.exports = {
plugins: {
autoprefixer: { grid: true }
}
}
Code-Sprache: JavaScript (javascript)
Wir möchten den Autoprefixer nutzen und auch alte CSS-Grid-Syntax nachrüsten. Die Liste der unterstützten Browser geben wir über die package.json
an:
"browserslist": [
"extends @wordpress/browserslist-config"
],
Code-Sprache: JSON / JSON mit Kommentaren (json)
Damit werden dieselben Browser berücksichtigt, die offiziell von WordPress unterstützt werden. Über npx autoprefixer --info
könnt ihr euch anzeigen lassen, welche Browser das sind und welche Eigenschaften und Werte betroffen sind.
Damit das funktioniert, müssen wir dieses NPM-Paket noch installieren:
npm install --save-dev @wordpress/browserslist-config
Code-Sprache: Bash (bash)
Webpack konfigurieren
Wenn man mit Webpack nur JavaScript kompilieren möchte und nur eine Datei hätte, bräuchte man keine eigene Konfiguration zu erstellen. @wordpress/scripts
bringt bereits eine mit, die eine src/index.js
zu einer build/index.js
kompiliert.
Das reicht uns allerdings nicht, deshalb erstellen wir für Webpack eine webpack.config.js
-Datei und füllen sie mit dem folgenden Inhalt, um die Standard-Konfiguration zu erweitern (diese Basis-Webpack-Konfiguration findet ihr im GitHub-Repo des @wordpress/scripts
-Pakets):
const defaultConfig = require("./node_modules/@wordpress/scripts/config/webpack.config");
const path = require('path');
module.exports = {
...defaultConfig,
entry: ['./blocks/index.js', './blocks/editor.scss', './blocks/frontend.scss'],
output: {
path: path.resolve(__dirname, 'assets'),
filename: 'js/editor.blocks.js',
},
module: {
rules: [
/**
* Running Babel on JS files.
*/
...defaultConfig.module.rules,
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: 'css/[name].blocks.css',
}
},
{
loader: 'extract-loader'
},
{
loader: 'css-loader?-url'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
}
]
}
};
Code-Sprache: JavaScript (javascript)
Gehen wir die Datei der Reihe nach durch:
- In
defaultConfig
speichern wir die Konfigurationsdatei des@wordpress/scripts
-Pakets, auf die wir aufbauen wollen. - In
path
speichern wir uns das Node-Modulpath
, um später den Pfad zum Ausgabeverzeichnis der Dateien anzugeben. - Innerhalb von
module.exports
leben die konkreten Angaben zur Konfiguration von Webpack. - Über
...defaultConfig
kippen wir erst mal die Werte der Standard-Konfiguration rein. Es folgen die Punkte, die wir im Vergleich zum Standard anpassen wollen. - Mit
entry
geben wir als Array die Quelldateien an (die könnt ihr in dem Zuge direkt einmal erstellen). Wir haben imblocks
-Verzeichnis eine JavaScript-Datei sowie zwei SASS-Dateien. - Über
output
legen wir fest, dass der Ausgabepfadassets
sein soll und die JavaScript-Datei innerhalb vonassets
in ein Unterverzeichnisjs
mit dem Nameneditor.blocks.js
abgespeichert wird. - In
module
legen wir die Regeln fest, die für dieentry
-Dateien angewandt werden sollen.- Wir beginnen mit den Regeln der Standard-Konfiguration, die wir über
...defaultConfig.module.rules
einfügen. Damit ist die Kompilierung der JavaScript-Datei bereits erledigt. - Für alle
.scss
-Dateien sollen mehrere Loader ausgeführt werden, die letztlich das SASS in CSS kompilieren und das Ergebnis nach dem Schema[name].blocks.css
innerhalb descss
-Verzeichnisses ablegen. Wir haben also dann zwei CSS-Dateienassets/css/editor.blocks.css
undassets/css/frontend.blocks.css
als Ergebnis. Ich bin nicht ganz sicher, warum zum Beispiel derextract-loader
notwendig ist, aber ohne funktioniert es nicht 🙂
- Wir beginnen mit den Regeln der Standard-Konfiguration, die wir über
Einfach und intuitiv ist die Webpack-Konfiguration nicht wirklich, aber wenn man sich erst mal ein funktionierendes Grund-Setup zusammengesucht hat, kann man es ja in neuen Projekten wiederverwenden und bei Bedarf erweitern/anpassen.
NPM-Skripte für den Einsatz von Webpack erstellen
Für den Aufruf von Webpack erstellen wir jetzt noch zwei NPM-Skripte und schreiben dafür folgendes in die package.json
, wie es im Beitrag zu dem @wordpress/scripts
-Package beschrieben ist:
"scripts": {
"start": "wp-scripts start",
"build": "wp-scripts build"
}
Code-Sprache: JSON / JSON mit Kommentaren (json)
Über npm run start
können wir Webpack für die Entwicklung ausführen lassen, wobei dann auch gleich auf Änderungen an den Dateien gewartet wird. Mit npm run build
kompilieren wir die Dateien für den Live-Betrieb. Eventuell werdet ihr beim ersten mal aufgefordert, ein Webpack-CLI zu wählen, das dann global installiert wird.
Jetzt können wir mit den Dateien blocks/index.js
, blocks/editor.scss
und blocks/frontend.scss
arbeiten und bekommen durch den Aufruf von Webpack Ausgabedateien in assets
, die das Plugin einbinden kann.
Im nächsten Artikel werden wir um die Konfiguration ein kleines funktionierendes Plugin erstellen.
Schreibe einen Kommentar