Fortgeschrittene WordPress-Entwicklung: Wie du dein nächstes Projekt mit wp-Skripten erstellen kannst

WordPress-Entwicklungsarbeit für Agenturen ist in den besten Zeiten hart umkämpft. Sie erfordert höchste Effizienz und Konsistenz über mehrere Kundenprojekte hinweg.

Unabhängig davon, wie erfahren du als Entwickler bist, erfordert die Verwaltung eines ganzen Portfolios von benutzerdefinierten Themes und Plugins immer wieder neue Anstrengungen, wenn es darum geht, den Workflow zu optimieren. Hier kommt wp-scripts ins Spiel: eine leistungsstarke Suite von Dienstprogrammen, die die Art und Weise, wie deine Agentur die WordPress-Entwicklung angeht, revolutionieren kann.

In diesem umfassenden Leitfaden werden die Möglichkeiten von wp-scripts vorgestellt und Techniken für deine Build-Prozesse erkundet. Dabei geht es um optimierte Kompilierung und Bündelung, automatisiertes Linting, Unit-Tests und vieles mehr – all das wird dich ansprechen, wenn du mit mehreren wichtigen WordPress-Projekten jonglierst.

Das Konzept des Build-Prozesses

Bevor wir uns die Besonderheiten von wp-scripts ansehen, sollten wir das allgemeine Konzept des Build-Prozesses in der Webentwicklung verstehen. Dieser besteht aus einer Reihe von automatisierten Aufgaben, die dir helfen, deinen Quellcode in eine produktionsreife Anwendung oder Website zu verwandeln.

Es gibt zum Beispiel viele Aufgaben, die auf diese Weise automatisiert werden können:

• Das Kompilieren von modernem JavaScript in browserfähigen Code.
• Die Umwandlung von CSS-Präprozessorsprachen (z. B. Sass) in Standard-CSS.
• Mining und Optimieren von Assets wie JavaScript, CSS und Medien.
• Ausführen von Linters, um potenzielle Fehler zu finden und Codierungsstandards durchzusetzen.
• Ausführen von Unit-Tests, um eine bessere Funktionalität des Codes sicherzustellen.

Dies sind gute Aspekte, die in jedem Entwicklungsworkflow automatisiert werden sollten, aber für Agenturen ist der Prozess genauso wichtig. Zunächst einmal kannst du die Konsistenz über mehrere Projekte (und dein Team) hinweg sicherstellen.

Du kannst auch schneller entwickeln und bereitstellen durch kürzere Zyklen und alle deine Projekte verwalten, indem du diese Konsistenz nutzt – selbst die komplexesten. Für den Endnutzer wirkt sich die optimierte Leistung, die du erzielst, auf sein Gesamterlebnis aus.

Normalerweise „schustert“ deine Agentur individuelle Build-Prozesse mit Tools wie Gulp, Grunt oder sogar manuellen Prozessen zusammen. Diese Methoden führen jedoch oft zu Inkonsistenzen zwischen den Projekten und verursachen einen erheblichen Wartungsaufwand.

wp-scripts: ein Workflow-Änderer für die WordPress-Entwicklung in einer Agentur

Im Zusammenhang mit WordPress kann ein Build-Prozess auch die Entwicklung von Themes und Plugins erheblich vereinfachen. So kannst du moderne Tools und Praktiken nutzen und gleichzeitig die Plattformkompatibilität sicherstellen.

Das Paket @wordpress/scripts – wp-scripts in diesem Beitrag – ist eine Sammlung von Konfigurationsdateien und Skripten, die dir helfen, den Build-Prozess für WordPress-Projekte zu vereinfachen.

Das Make WordPress Core Team entwickelt und pflegt das Paket, das in den Block- und Site-Editor integriert ist. Das Beste ist, dass du es auch für die Entwicklung eigener Themes und Plugins nutzen kannst.

Wenn du die WordPress-Entwicklung in einer Agentur in großem Maßstab angehen willst, ist wp-scripts ein zentraler Bestandteil des Workflows. Es ist mehr als ein einfaches Build-Tool; es ist eine umfassende Lösung für moderne WordPress-Projekte, die den Anforderungen an einen ausgefeilten Entwicklungs-Workflow gerecht wird.

Die wichtigsten Funktionen von wp-scripts

Da immer mehr moderne JavaScript-Praktiken in das WordPress-Ökosystem einfließen, brauchen wir mehr standardisierte Build-Tools, um sie zu berücksichtigen. Ein einheitliches Build-Toolset in Form von wp-scripts kommt dem gesamten WordPress-Entwicklungssystem zugute.

Als solches bietet wp-scripts eine Reihe von Funktionen, die die WordPress-Entwicklung effizienter machen:

• Null-Konfigurations-Setup. Du kannst beginnen, ohne komplexe Webpack-Konfigurationen vornehmen zu müssen.
• Moderne JavaScript-Unterstützung. Dein ES6-Code wird für die Browserkompatibilität transpiliert und gibt dir mehr Vertrauen in seine Genauigkeit.
• Integrierte CSS-Verarbeitung. Wenn du CSS-Präprozessoren wie Sass verwendest, erhältst du Out-of-the-Box-Unterstützung.
• Werkzeuge zur Codequalität. Das Paket integriert sowohl ESLint als auch Prettier für konsistenten Code-Stil und Qualität.
• Testhilfsmittel. Für Unit-Tests und eine einfache Ausführung steht dir Jest im Paket zur Verfügung.
• Hot Reloading. Wenn du die Möglichkeit hast, deine Änderungen live nachzuladen, kann das deine Entwicklungszeit beschleunigen.

Zusammengenommen bietet wp-scripts viele wichtige Vorteile für Agenturen, die mehrere WordPress-Projekte verwalten. So kannst du zum Beispiel deine Entwicklungsumgebung für alle Projekte standardisieren und den Build-Prozess auch für neue Projekte wiederholen. Mit dem Paket kannst du deine Build-Tool-Abhängigkeiten zentralisieren, was die Verwaltung von Updates und Sicherheitspatches vereinfacht.

Insgesamt kannst du dir weniger Sorgen über Kompatibilitätsprobleme machen, deine Einrichtungszeit verkürzen und viele der typischen Fehler ausmerzen, die dir in einem weniger schlanken Build-Prozess unterlaufen.

Vergleich von wp-scripts mit einem typischen WordPress-Entwicklungsprozess

Bei der typischen WordPress-Entwicklung werden Skripte und Styles oft manuell in die Warteschlange gestellt. Außerdem schreibst du wahrscheinlich Vanilla JavaScript oder jQuery und verlässt dich auf Build-Tools von Drittanbietern – oder auf gar keinen Build-Prozess.

Im Gegensatz dazu bietet wp-scripts einen modernen, integrierten Ansatz in fast allen Bereichen:

Element	Typische Entwicklung	wp-scripts
JavaScript	Oft Vanilla JavaScript oder jQuery	ES6 und React Unterstützung
CSS	Direktes CSS oder einfache Präprozessoren	Unterstützung für Sass und PostCSS-Verarbeitung
Build-Prozess	Ein manuelles oder benutzerdefiniertes Setup mit Gulp oder Grunt	Null-Konfigurations-Setup mit Webpack, das in das Paket integriert ist.
Code-Qualität	Manuelles Linting oder separate Tools, die in deinen Code-Editor integriert sind	ESLint und Prettier sind in die wp-Skripte integriert
Unit-Tests	Wenn es sich nicht um einen übersehenen Schritt handelt, gibt es normalerweise eine separate Einrichtung	Das Paket integriert Jest-Tests

Im Großen und Ganzen bietet wp-scripts dank seiner Integration mit Tools, die du vielleicht noch nicht benutzt, mehr Flexibilität. Die Einrichtung von PostCSS, webpack oder Jest kannst du dir zum Beispiel aus Zeitgründen sparen.

Wie du deine Entwicklungsumgebung für die Integration von wp-Skripten einrichtest

Die Verwendung von wp-scripts hat ihre eigenen Anforderungen, aber wahrscheinlich verwendest du diese Tools bereits. Falls nötig, installiere Node.js und npm zusammen mit einer lokalen WordPress-Entwicklungsumgebung. DevKinsta ist eine gute Lösung, denn es läuft auf Docker und unterstützt die Staging-Umgebungen von Kinsta.

Wenn du bereits das Paket create-block verwendest, um WordPress Block Plugins zu entwickeln, wird wp-scripts zusammen mit den anderen Assets installiert. Von hier aus kannst du beginnen, ein Paketentwicklungsprojekt einzurichten.

Einrichten eines neuen WordPress-Projekts mit wp-scripts

Die Arbeit, die du verrichtest, findet im Verzeichnis wp-content deiner WordPress-Installation statt. Das jeweilige Unterverzeichnis hängt von der Art des Projekts ab, das du erstellst: wp-content/themes für Themes und wp-content/plugins für Plugins!

In jedem Fall sollte dein Projektordner eine Reihe von Dateien und Verzeichnissen enthalten:

• Eine package.json Datei.
• Ein Build-Verzeichnis.
• Ein src-Verzeichnis, das auch eine index.js Datei enthält.

Um eine package.json Datei zu erstellen, navigiere mit deinem Terminal oder einer Kommandozeilenanwendung zu deinem Projektverzeichnis. Wenn du den Befehl npm init aufrufst, wirst du durch einen interaktiven Einrichtungsprozess geführt, und dein „Einstiegspunkt“ sollte build/index.js sein:

Als nächstes installierst du wp-scripts als Entwicklungsabhängigkeit:

npm install @wordpress/scripts --save-dev

Du solltest ein paar automatisch generierte Verzeichnisse und Dateien sehen: node_modules und package-lock.json. Unabhängig davon musst du jetzt die vordefinierten Skripte in der Datei package.json referenzieren:

"scripts": {
  "build": "wp-scripts build",
  "start": "wp-scripts start",
}

Du wirst wahrscheinlich oft zu dieser Datei zurückkehren, um bei Bedarf weitere Skripte hinzuzufügen. Zum Beispiel:

…

"lint:js": "wp-scripts lint-js",
"lint:css": "wp-scripts lint-style",
"lint:pkg-json": "wp-scripts lint-pkg-json",
"test": "wp-scripts test-unit-js"
…

Möglicherweise musst du hier auch die Assets deines Themes oder Plugins in die Warteschlange stellen und dann deine Änderungen speichern.

Webpack mit wp-scripts verstehen und nutzen

Um Assets unter der Haube zu bündeln, verwendet wp-scripts webpack. Du brauchst es nicht zu konfigurieren, aber wenn du seine Rolle verstehst, kannst du wp-scripts effektiver nutzen. Webpack übernimmt eine Menge Aufgaben bezüglich deinem Setup:

• Es hilft dabei, die Abhängigkeiten zwischen deinen JavaScript-Modulen aufzulösen.
• Du kannst modernes JavaScript in browserkompatiblen Code transpilieren.
• Es hilft bei der Verarbeitung und Optimierung deiner Styles.
• Du bist in der Lage, Source Maps zu erstellen, um leichter debuggen zu können.
• Es kann dir helfen, produktionsreife, minifizierte Bundles zu erstellen.

Du hast bereits eine Standard-Webpack-Konfiguration in wp-scripts. Das funktioniert für die meisten WordPress-Projekte gut. In manchen Fällen musst du jedoch eigene Konfigurationen erstellen.

Erweiterte webpack-Konfiguration für Agenturen

Während die Standard-Webpack-Konfiguration für die meisten Entwicklungsprojekte ideal ist, gibt es Fälle, in denen du eine Konfiguration für deine speziellen Bedürfnisse erstellen musst. Zum Beispiel, wenn du mit komplexen Theme-Strukturen oder einzigartigen Plugin-Architekturen zu tun hast. In diesem Fall ist eine webpack.config.js Datei im Stammverzeichnis deines Projekts sehr nützlich:

const defaultConfig = require("@wordpress/scripts/config/webpack.config");

const path = require('path');


module.exports = {
  ...defaultConfig,
  entry: {
    main: path.resolve(__dirname, 'src/js/main.js'),
    admin: path.resolve(__dirname, 'src/js/admin.js'),
    // Add more entry points as needed
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  // Add custom loaders or plugins here
};

Diese Konfiguration ermöglicht mehrere Einstiegspunkte, was besonders nützlich für Themes oder Plugins ist, die separate Skripte für verschiedene Teile des WordPress-Admin- oder Frontends benötigen. Auf diese Weise kannst du deine Standardkonfiguration erweitern und die Vorteile von wp-scripts nutzen.

Die Grundlagen der Verwendung von wp-scripts

Mit einer geeigneten Entwicklungsumgebung und der richtigen Datei- und Ordnerstruktur kannst du beginnen, wp-scripts zu nutzen. Es gibt ein paar grundlegende und zentrale Befehle, die den größten Teil deiner Zeit in Anspruch nehmen werden.

Der Befehl start überwacht deine Dateien auf Änderungen, kompiliert die Assets während des Betriebs neu und ermöglicht ein schnelles Nachladen für eine reibungslose Entwicklung:

npm run start

Du verwendest ihn zu Beginn eines Projekts, um einen Entwicklungsserver zu starten, obwohl er den kompilierten Code in deiner build/index.js-Datei nicht optimiert.

Wenn du dein Projekt bereitstellen musst, kompiliert der Befehl build deine Assets für die Produktion:

npm run build

Sobald du ihn ausführst, führt er einige Aufgaben aus. Zum Beispiel transpiliert er dein JavaScript, kompiliert dein Sass und SCSS zu CSS, minimiert alle deine Assets und erstellt Source Maps. Am Ende gibt er alles in der Datei build/index.js aus. Der Build-Prozess erstellt auch eine build/index.asset.php Datei für das Cache-Busting.

Das Paket wp-scripts bietet außerdem mehrere Linting-Befehle, die dir helfen, eine hohe Codequalität zu erhalten:

• npm run lint:js. Mit diesem Befehl kannst du deine JavaScript-Dateien linsen.
• npm run lint:css. Damit lintest du deine CSS- oder Sass-Dateien.
• npm run lint:pkg-json. Damit validierst du deine package.json Datei.

Für Unit-Tests rufst du einfach npm run test auf, das Jest verwendet, um deine Testsuite auszuführen.

Erkundung der Kerndienstprogramme in wp-scripts

Grundlegende Build-Aufgaben können sehr viel Zeit in Anspruch nehmen, und die typischen Befehle erfordern eine Menge Automatisierung. wp-scripts bietet jedoch eine Reihe von ausgefeilten Dienstprogrammen, die den komplexen Anforderungen deiner WordPress-Entwicklung gerecht werden:

• Erweiterte Kompilierung. Mit optimierten Konfigurationen kannst du modernes JavaScript – einschließlich ECMAScript Modules (ESM) und Javascript XML (JSX) – transpilieren und Sass kompilieren.
• Intelligente Bündelung. Du kannst das Code-Splitting und das „Tree-Shaking“ von Webpack nutzen, um die Auslieferung deiner Assets zu optimieren.
• Umfassendes Linting. Du kannst Codierungsstandards für JavaScript-, CSS- und package.json -Dateien durchsetzen.
• Integrierte Tests. Mit Jest kannst du Unit-Tests und Abdeckungsberichte ausführen.
• Entwicklungsserver. Du kannst Hot-Reloading für eine schnelle Entwicklung über mehrere Projekte hinweg nutzen.

Du kannst die Standardfunktionalität jedes Servers erweitern, um einen individuelleren WordPress-Entwicklungsprozess zu nutzen, unabhängig davon, ob du an Themes oder Plugins arbeitest.

Umgang mit JSX und modernem JavaScript

Viele WordPress-Projekte arbeiten mit modernen JavaScript-Elementen wie React-Komponenten, Pfeilfunktionen, Destrukturierung, async/await und mehr. Sogar Aspekte der Kern-Codebasis, wie der Block-Editor, verwenden modernes JavaScript, um ihre Funktionalität aufzubauen.

Allerdings verstehen die Browser diese fortschrittlichen Syntaxen nicht von Haus aus, so dass mehr Arbeit nötig ist, um sie zu übersetzen und zu kompilieren.

Mit JSX kannst du HTML-ähnlichen Code in deinem JavaScript schreiben, was es einfacher macht, zu beschreiben, wie deine Schnittstellen und andere Elemente aussehen sollen. Das verbessert zum Beispiel die Lesbarkeit und Wartbarkeit. Außerdem kannst du auf leistungsstarke React-Komponenten zugreifen, um dynamische Benutzeroberflächen (UIs) zu erstellen.

wp-scripts nutzt den Babel JavaScript Compiler, um dein modernes JavaScript und JSX in Code zu übersetzen, den die Browser verstehen können. Er kümmert sich um alle komplexen und notwendigen Konfigurationen, so dass du dich auf das Schreiben von Code konzentrieren kannst.

Du nutzt diese Funktion über deine src/index.js Datei. Schau dir in diesem kleinen Beispiel an wie du JSX und modernes JavaScript mit wp-scripts implementieren kannst:

import { render } from '@wordpress/element';

// Modern JavaScript feature: Arrow function
const HelloWorld = () => {
    // Modern JavaScript feature: Template literal
    const greeting = `Hello, ${wp.data.select('core/editor').getCurrentPost().title}!`;    

    // JSX
    return (
        <div className="hello-world">
            <h1>{greeting}</h1>
            <p>This is a React component in WordPress!</p>
        </div>
    );
};

// Modern JavaScript feature: Optional chaining
const rootElement = document.getElementById('hello-world-root');
if (rootElement?.innerHTML) {
    render(<HelloWorld />, rootElement);
}

Du musst das Skript auch in der Datei functions.php deines Themes oder in der Hauptdatei deines Plugins einbinden:

function enqueue_hello_world_script() {
    wp_enqueue_script(
        'hello-world-script',
        get_template_directory_uri() . '/build/index.js',
        ['wp-element'],
        filemtime(get_template_directory() . '/build/index.js'),
        true
    );
}

add_action('wp_enqueue_scripts', 'enqueue_hello_world_script');

Sobald du den Befehl npx wp-scripts build ausführst, transpiliert wp-scripts dein modernes JavaScript und JSX, um eine browserkompatible Datei build/index.js zu erstellen.

Code-Qualitätsprüfungen und ausgefeiltes Linting

Das Paket wp-scripts enthält mehrere Werkzeuge, die dir helfen, die Qualität deines Codes zu erhalten und einen einheitlichen Stil in deinen Projekten durchzusetzen: Neben ESLint und Prettier kannst du auch auf stylelint für CSS und SCSS Linting zugreifen.

Der erste Schritt besteht darin, die Linting-Skripte zu deiner package.json Datei hinzuzufügen:

"scripts": {
  "lint:js": "wp-scripts lint-js",
  "lint:css": "wp-scripts lint-style",
  "lint": "npm run lint:js && npm run lint:css"
}

Als Nächstes erstellst du benutzerdefinierte Konfigurationsdateien in deinem Projektstammverzeichnis. Für ESLint musst du zum Beispiel in der Datei .eslintrc.js arbeiten. Dieses Beispiel erzwingt (teilweise) die Verwendung von Template-Literalen für Strings in deinem JavaScript-Code:

…
module.exports = {
  extends: [
    'plugin:@wordpress/eslint-plugin/recommended',
  ],
  rules: {
    // Custom rules here
    'no-console': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'prefer-template': 'error',
  },
};
…

Für stylelint bearbeitest du die Datei .stylelintrc.js:

…
module.exports = {
  extends: [
    '@wordpress/stylelint-config/scss',
  ],
  rules: {
    // Custom rules here
    'selector-class-pattern': '^[a-z]+(-[a-z]+)*$',
    'max-nesting-depth': 3,
  },
};
…

Wenn du eine große Codebasis über mehrere Projekte hinweg pflegst, ist ein einheitlicher Codestil wichtig. Auf diese Weise kannst du die Standardkonfigurationen von ESLint und stylelint erweitern, um die Codierungsstandards deiner Agentur durchzusetzen.

Von hier aus kannst du npm run lint ausführen, um diesen Prozess in Gang zu setzen, erweitert um den jeweiligen Linter-Typ. Wenn du zum Beispiel einen Code hast, der eine typische Verkettung beschreibt, …

const name = "World";
console.log("Hello " + name + "!");

…wird npm run lint:js einen Fehler melden und vorschlagen, dass du stattdessen ein Vorlagenliteral verwendest:

const name = "World";
console.log(`Hello ${name}!`);

Dies ist eine unschätzbare Möglichkeit, den Code deines WordPress-Themes oder -Plugins zu linsen, und gibt dir die Möglichkeit, die Regelsätze an deine spezifischen Bedürfnisse und Standards anzupassen.

Unit-Tests

Unit-Tests sind wichtig, um die Zuverlässigkeit und Wartbarkeit deiner Codebasis zu gewährleisten. Das Tool, das wp-scripts als Test-Framework verwendet, ist Jest.

Wenn du den Befehl test ausführst, sucht Jest nach Dateien mit den Erweiterungen .test.js oder .spec.js oder nach Dateien in einem __tests__ Verzeichnis. Es führt dann die in diesen Dateien definierten Tests aus und meldet die Ergebnisse.

Zuerst musst du das Testskript in deiner package.json Datei referenzieren:

…
"scripts": {
  "test": "wp-scripts test-unit-js"
}
…

Erstelle bei Bedarf eine Datei wie src/utils.js:

…
export function capitalizeString(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

export function sum(a, b) {
  return a + b;
}
…

Erstelle von hier aus eine Testdatei, z. B. src/__tests__/utils.test.js:

import { capitalizeString, sum } from '../utils';

describe('capitalizeString', () => {
  it('capitalizes the first letter of a string', () => {
    expect(capitalizeString('hello')).toBe('Hello');
  });
  it('returns an empty string if given an empty string', () => {
    expect(capitalizeString('')).toBe('');
  });
});

describe('sum', () => {
  it('adds two numbers correctly', () => {
    expect(sum(2, 3)).toBe(5);
  });
  it('handles negative numbers', () => {
    expect(sum(-1, 1)).toBe(0);
  });
});

Sobald du den Befehl npm run test ausführst, findet wp-scripts automatisch alle Dateien mit der Endung .test.js und führt sie aus. Du kannst die Standardkonfiguration von Jest auch erweitern, um erweiterte Testanforderungen zu erfüllen, z. B. die Testabdeckung:

// jest.config.js
const defaultConfig = require('@wordpress/scripts/config/jest-unit.config');
module.exports = {
  ...defaultConfig,
  setupFilesAfterEnv: ['<rootDir>/tests/setupTests.js'],
  collectCoverageFrom: [
    'src/**/*.js',
    '!src/tests/**/*.js',
    '!src/vendor/**/*.js',
  ],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80,
    },
  },
};

Diese Konfiguration fügt eine benutzerdefinierte Setup-Datei hinzu, legt Dateien fest, die in die Abdeckungsberichte aufgenommen werden sollen, und legt Abdeckungsschwellenwerte fest, um eine umfassende Testabdeckung für deine Projekte zu gewährleisten. Wenn du diese Tests ausführst, gibt Jest eine Ausgabe aus, die alle bestandenen und fehlgeschlagenen Tests anzeigt.

Wenn du die Möglichkeiten deiner Unit-Tests auf diese Weise erweiterst, kannst du die Qualität und Zuverlässigkeit deiner WordPress-Themes und -Plugins erheblich verbessern und deinen gesamten Entwicklungsprozess rationalisieren.

Wie du wp-scripts in deine Arbeitsabläufe integrierst

Die Einsatzmöglichkeiten von wp-Skripten sind so vielfältig, wie du sie benötigst. Um das zu verdeutlichen, wollen wir uns ein paar schnelle Ansätze ansehen, wie du wp-scripts nutzen kannst, um typische Aufgaben zu automatisieren.

Wiederverwendbare Projektvorlagen erstellen

Du wirst wahrscheinlich häufig neue Projekte starten müssen – vielleicht sogar jeden Tag. Die Erstellung einer benutzerdefinierten Projektvorlage durch die Vorkonfiguration von wp-scripts kann dir viel Zeit bei der Einrichtung sparen.

Du kannst mit einem Basisprojekt beginnen: ein neues WordPress-Theme oder Plugin, das dein wp-scripts Setup enthält:

mkdir my-agency-base-theme
cd my-agency-base-theme
npm init -y
npm install --save-dev @wordpress/scripts

Als Nächstes richtest du die Projektstruktur ein und erstellst die notwendigen Verzeichnisse und Dateien:

mkdir src build
touch src/index.js src/style.scss
touch functions.php style.css

An diesem Punkt konfigurierst du wp-scripts und aktualisierst die Datei package.json mit den entsprechenden Befehlen:

{
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start",
    "lint:js": "wp-scripts lint-js",
    "lint:css": "wp-scripts lint-style",
    "test": "wp-scripts test-unit-js"
  }
}

Du kannst dies erweitern, um Konfigurationen für webpack, ESLint und stylelint zu erstellen.

Damit diese Vorlage wiederverwendet werden kann und einfach zugänglich ist, ist ein GitHub-Repository ideal. Betrachte zum Beispiel einen Remote-Ursprung von https://github.com/your-agency/theme-template.git.

Wenn du ein neues Projekt beginnst, kannst du einen einfachen Befehl ausführen:

npx create-wordpress-theme@latest my-new-theme --template your-agency/theme-template

Damit klonst du dein Template-Repository und richtest ein neues Theme mit deiner vordefinierten wp-scripts Konfiguration ein.

Du kannst die Vorlage weiter anpassen, indem du agentur-spezifischen Boilerplate-Code hinzufügst, z. B. häufig verwendete Funktionen oder Komponenten. Es ist wichtig, dass du dieses Vorlagen-Repository auf dem neuesten Stand hältst, indem du die neueste Version von wp-scripts verwendest und alle Workflow-Verbesserungen implementierst, die du beschlossen hast.

Versionskontrolle und Zusammenarbeit

Du kannst mehr tun, wenn es um wp-scripts und die Arbeit mit Versionskontrolle geht. Häufig solltest du jedoch einige typische Praktiken anwenden, um die Qualität deines Codes zu gewährleisten:

• Nimm package.json und package-lock.json in die Versionskontrolle auf. Dadurch wird sichergestellt, dass alle Teammitglieder die gleichen Abhängigkeiten verwenden.
• Stelle sicher, dass du Build-Artefakte wie /build und /node_modules in deine .gitignore Datei aufnimmst.
• Stelle sicher, dass du alle benötigten Skripte in deiner package.json Datei referenzierst, bevor du sie festlegst.
• Erwäge, eine .nvmrc Datei zu verwenden, um die richtige Node.js-Version für dein Projekt anzugeben.

Du kannst auch Pre-Commit-Hooks mit Tools wie Husky implementieren. Damit kannst du zum Beispiel vor jeder Übergabe einen Linter ausführen:

…
"husky": {
    "hooks": {
        "pre-commit": "npm run lint:js && npm run lint:css"
    }
}
…

Auf diese Weise kannst du sicherstellen, dass du vor Commits und Pushs automatisch lintest und Tests ausführst. Das ist eine weitere Möglichkeit, die Codequalität in deinem Team zu sichern.

Kontinuierliche Integration und kontinuierliche Bereitstellung (CI/CD)

Wenn du wp-scripts in deine CI/CD-Pipeline integrierst, kannst du den Bereitstellungsprozess sowohl für Themes als auch für Plugins optimieren. GitHub Actions ist nur eine Möglichkeit, dies in deine wp-scripts Konfiguration zu integrieren.

Der erste Schritt besteht darin, eine eigene Workflow-Datei in einem Workflows-Verzeichnis deines Repo zu erstellen:

name: CI/CD

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
jobs:
  build-and-test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14'
    - name: Cache dependencies
      uses: actions/cache@v2
      with:
        path: ~/.npm
        key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
    - name: Install dependencies
      run: npm ci
    - name: Run linters
      run: |
        npm run lint:js
        npm run lint:css
    - name: Run tests
      run: npm run test
    - name: Build
      run: npm run build
    - name: Deploy
      if: github.ref == 'refs/heads/main'
      run: |
        # Add your deployment script here
        # For example, using rsync to a remote server:
        # rsync -avzc --delete ./build/ [email protected]:/path/to/wp-content/themes/your-theme/

Der Schritt der Bereitstellung hängt von deinem Host ab. Du kannst rsync verwenden, Dienste wie DeployHQ oder Buddy einbinden oder dich für eine einfache cURL-Integration entscheiden. Wenn für die Bereitstellung Passwörter oder Schlüssel erforderlich sind, solltest du sie als Geheimnisse zu den Einstellungen deines GitHub-Repositorys hinzufügen.

Dieser Workflow führt bei jedem Push- und Pull-Request Linters, Tests und Builds deines Projekts durch. Das Beste daran ist, dass die Bereitstellung nur stattfindet, wenn du Änderungen in den Hauptzweig einträgst.

Erstellen eines benutzerdefinierten Befehlszeilen-Tools (CLI)

Wenn du benutzerdefinierte Tools brauchst, kann dir wp-scripts helfen. Du könntest zum Beispiel ein CLI-Tool erstellen, das den Bedürfnissen deiner Agentur entspricht.

In manchen Fällen benötigt dein Tool einige Abhängigkeiten:

npm install @wordpress/scripts commander chalk

Hier parst Commander die Kommandozeilenargumente und chalk verbessert die visuelle Darstellung des Ausgabetextes.

Von hier aus kannst du beginnen, das Werkzeug mit Hilfe von wp-scripts zu programmieren. Hier ist ein Beispiel dafür, wie die Datei aussehen würde:

#!/usr/bin/env node
const { program } = require('commander');
const { spawn } = require('child_process');
const path = require('path');
const chalk = require('chalk');

const wpScripts = path.resolve(__dirname, './node_modules/.bin/wp-scripts');

const runWpScripts = (script, args) => {
  console.log(chalk.blue(`Running wp-scripts ${script}...`));
  const result = spawn(wpScripts, [script, ...args], { stdio: 'inherit' });
  result.on('exit', (code) => {
    if (code !== 0) {
      console.log(chalk.red(`wp-scripts ${script} failed with code ${code}`));
    }
  });
};

program
  .version('1.0.0')
  .description('Custom WordPress development CLI for Agency XYZ');

program
  .command('build')
  .description('Build the project')
  .action(() => runWpScripts('build'));

program
  .command('start')
  .description('Start the development server')
  .action(() => runWpScripts('start'));

program
  .command('lint')
  .description('Lint JavaScript and CSS files')
  .action(() => {
    runWpScripts('lint-js');
    runWpScripts('lint-style');
  });

program
  .command('test')
  .description('Run unit tests')
  .action(() => runWpScripts('test-unit-js'));

program
  .command('deploy')
  .description('Deploy the project')
  .action(() => {
    console.log(chalk.green('Deploying project...'));
    // Add your deployment logic here
    // For example:
    // spawn('rsync', ['-avz', 'build/', 'user@server:/path/to/wordpress/wp-content/themes/your-theme/']);
  });

program.parse(process.argv);

Wenn du das Feld bin zu deiner package.json-Datei hinzufügst, kannst du das CLI-Tool zu einer ausführbaren Datei machen:

…
{
  "name": "agency-wp-cli",
  "version": "1.0.0",
  "bin": {
    "agency-wp": "./cli.js"
  },
  // ... other fields
}
…

Um das CLI für eine lokale Installation zu verlinken, kannst du einfach npm link ausführen. Jetzt kannst du das CLI in deiner Terminal-Anwendung ausprobieren:

agency-wp build
agency-wp lint
agency-wp deploy

Du solltest das Tool in einer privaten npm-Registry veröffentlichen, damit andere Teammitglieder es in aller Ruhe installieren können:

npm publish --registry=https://your-private-registry.com

Wenn du es brauchst, brauchst du nur npm install --save-dev agency-wp-cli auszuführen, um dein Tool zu installieren. Von hier aus kannst du das CLI in package.json referenzieren:

{
  "scripts": {
    "build": "agency-wp build",
    "start": "agency-wp start",
    "lint": "agency-wp lint",
    "test": "agency-wp test",
    "deploy": "agency-wp deploy"
  }
}

Die Erstellung und Verwendung eines solchen Tools stellt sicher, dass jeder in deiner Agentur dieselben Befehle und Prozesse verwendet. So kannst du Unstimmigkeiten vermeiden und deinen WordPress-Entwicklungsworkflow noch weiter optimieren.

Leistungsoptimierung

Wenn du mehrere WordPress-Websites mit hohem Besucheraufkommen verwaltest, ist die Leistungsoptimierung entscheidend für deine Arbeit. Es gibt mehrere fortschrittliche Techniken, die du mit wp-scripts umsetzen kannst.

Erweitertes Code-Splitting

Mit dem Code-Splitting kannst du zum Beispiel dein JavaScript-Paket in kleinere Teile aufteilen, die du bei Bedarf laden kannst. Das kann die anfänglichen Ladezeiten verbessern, besonders bei großen Anwendungen.

Ändere als Erstes deine webpack.config.js Datei, um das Code-Splitting zu aktivieren:

const defaultConfig = require('@wordpress/scripts/config/webpack.config');

module.exports = {
  ...defaultConfig,
  entry: {
    main: './src/index.js',
    admin: './src/admin.js',
  },
  output: {
    filename: '[name].js',
    chunkFilename: '[name].[contenthash].js',
  },
  optimization: {
    ...defaultConfig.optimization,
    splitChunks: {
      chunks: 'all',
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules[\/]/,
          name(module) {
            const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1];
            return `vendor.${packageName.replace('@', '')}`;
          },
        },
      },
    },
  },
};

In deinem gesamten JavaScript-Code verwendest du dynamische Importe, um ihn in kleinere Teile aufzuteilen:

// Instead of: import { heavyFunction } from './heavyModule';

button.addEventListener('click', () => {
  import('./heavyModule').then(module => {
    module.heavyFunction();
  });
});

Außerdem musst du jede Aufteilung in deinen WordPress-Dateien in die Warteschlange stellen:

function enqueue_split_scripts() {
  $asset_file = include(get_template_directory() . '/build/index.asset.php');  

  wp_enqueue_script('main', get_template_directory_uri() . '/build/main.js', $asset_file['dependencies'], $asset_file['version'], true);
  wp_enqueue_script('admin', get_template_directory_uri() . '/build/admin.js', $asset_file['dependencies'], $asset_file['version'], true);
}
add_action('wp_enqueue_scripts', 'enqueue_split_scripts');

Das sollte die Ladezeiten verkürzen und ist auch nicht allzu schwer zu implementieren.

Baumschütteln

Im Zusammenhang mit JavaScript bedeutet „Tree Shaking“, wie du ungenutzten Code loswirst. Sowohl wp-scripts als auch webpack führen Tree Shaking für Produktions-Builds durch, aber du kannst es noch weiter optimieren. Die Anwendung ist komplexer, als wir hier darstellen, aber du solltest auf jeden Fall sicherstellen, dass du die ES6-Import- und Export-Syntax verwendest:

// Good for tree shaking
export function usedFunction() { /* ... */ }

// Bad for tree shaking
module.exports = {
  usedFunction: function() { /* ... */ },
};

Als Nächstes gibst du die Dateien mit „Seiteneffekten“ an…

{
  "name": "your-package",
  "sideEffects": ["*.css", "*.scss"]
}

…oder markiere sie als frei von Nebenwirkungen:

{
  "name": "your-package",
  "sideEffects": false
}

Einige größere Bibliotheken unterstützen das Schütteln von Bäumen nicht so gut wie andere. In diesen Fällen solltest du ein spezielles Plugin für diese Aufgabe verwenden:

npm install --save-dev babel-plugin-transform-imports

Das bedeutet auch, dass du deine babel-Konfigurationsdateien aktualisieren solltest, um eine möglichst optimale und fehlerfreie Installation zu gewährleisten.

Asset-Optimierung

Der wp-scripts Build-Prozess minimiert CSS- und JavaScript-Dateien für dich. Zum Beispiel kannst du ein spezielles Plugin zur Bildoptimierung installieren:

npm install --save-dev imagemin-webpack-plugin

Sobald du dieses zu deiner Webpack-Konfigurationsdatei hinzufügst, kannst du Ressourcenhinweise nutzen, indem du den richtigen Code in deine functions.php Datei oder die Hauptplugin-Datei einfügst:

function add_resource_hints( $urls, $relation_type ) {
  if ( 'preconnect' === $relation_type ) {
    $urls[] = 'https://fonts.googleapis.com';
    $urls[] = 'https://fonts.gstatic.com';
  }
  return $urls;
}

add_filter( 'wp_resource_hints', 'add_resource_hints', 10, 2 );

Eine Aufgabe wie diese zeigt die Flexibilität, die du mit wp-scripts hast, da du sie an die Bedürfnisse deiner Agentur oder deines Projekts anpassen kannst.

Analysiere die Bundle-Größe

Die Zusammensetzung deines Pakets zu verstehen, ist entscheidend für die Optimierung. Mit wp-scripts kannst du es dir mit dem --analyze Flag leicht machen.

npm run build -- --analyze

Der erste Schritt besteht darin, das entsprechende Skript zu deiner package.json Datei hinzuzufügen:

{
  "scripts": {
    "analyze": "wp-scripts build --analyze"
  }
}

Sobald du den Befehl analyze ausführst, erstellt er einen Bericht, der die Größe jedes Moduls in deinem Bundle anzeigt. Diese einfache Implementierung hilft dir, Bereiche mit Optimierungsbedarf zu identifizieren.

Kritisches CSS implementieren

Das kritische CSS deiner Website ist das Minimum, das deine Seite benötigt, um den Inhalt zu laden, der über der Einblendung liegt. Wenn du dieses CSS inline einbaust, kannst du die wahrgenommene Ladezeit verbessern.

Um dies zu erreichen, brauchst du das Critical CSS Webpack Plugin:

npm install --save-dev critical-css-webpack-plugin

Als Nächstes musst du deine Webpack-Konfigurationsdatei aktualisieren, um das Plugin zu referenzieren:

const CriticalCssPlugin = require('critical-css-webpack-plugin');
const defaultConfig = require('@wordpress/scripts/config/webpack.config');

module.exports = {
  ...defaultConfig,
  plugins: [
    ...defaultConfig.plugins,
    new CriticalCssPlugin({
      base: 'dist/',
      src: 'index.html',
      target: 'styles/critical.css',
      extract: true,
      inline: true,
      minify: true,
      dimensions: [
        {
          height: 500,
          width: 300,
        },
        {
          height: 900,
          width: 1300,
        },
      ],
    }),
  ],
};

Um es zu verwenden, musst du ein Snippet zu deiner header.php Datei hinzufügen:

<style>
  <?php echo file_get_contents(get_template_directory() . '/build/styles/critical.css'); ?>
</style>

Es extrahiert und untergliedert kritisches CSS für eine schnellere erste Darstellung. Es generiert kritisches CSS für bestimmte Viewport-Größen, was die Ladezeit deines Themes verbessern kann.

Zusammenfassung

Für die Entwicklung in einer Agentur ist wp-scripts ein leistungsstarkes Werkzeug, das deinen Arbeitsablauf bei Theme- und Plugin-Projekten erheblich verbessern kann. Mit einem standardisierten Build-Prozess, moderner JavaScript-Unterstützung und integrierten Test- und Linting-Tools können Sie sich mit wp-scripts auf die Erstellung hochwertiger WordPress-Projekte konzentrieren und gleichzeitig einige der wichtigsten Aufgaben automatisieren.

Die Nutzung von wp-scripts hilft dir nicht nur, mit modernen Entwicklungspraktiken Schritt zu halten. Du positionierst dich damit an der Spitze der WordPress-Entwicklung und bist bereit für die Herausforderungen und Chancen, denen sich deine Agentur stellen muss.

Bietet wp-scripts die Funktionalität und den Umfang, den du für deine Entwicklungsprojekte in der Agentur brauchst? Teile uns deine Meinung in den Kommentaren unten mit!