WordPress ontwikkeling voor gevorderden: hoe je je volgende project bouwt met wp-scripts

Het ontwikkelen van WordPress als bureau kan best competitief zijn. Het vereist uiterste efficiëntie en consistentie bij meerdere klantprojecten.

Hoe doorgewinterd je ook bent als ontwikkelaar, het beheren van een hele portfolio van aangepaste thema’s en plugins vergt nog steeds een voortdurende inspanning als het gaat om het stroomlijnen van de workflow. Maak kennis met wp-scripts: een krachtig pakket aan tools dat een revolutie teweeg kan brengen in de manier waarop jouw bureau de ontwikkeling van WordPress benadert.

Deze uitgebreide gids gaat in op de mogelijkheden van wp-scripts en verkent technieken voor je bouwprocessen. Er wordt ingegaan op geoptimaliseerde compilatie en bundeling, geautomatiseerd linten, unit testen en nog veel meer – dit alles zal je aanspreken als je jongleert met meerdere WordPress projecten.

Het concept van een ‘bouwproces’

Laten we, voordat we naar de specifieke kenmerken van wp-scripts kijken, eerst het bredere concept van het bouwproces van je webontwikkeling begrijpen. Dit bestaat uit een reeks geautomatiseerde taken om van je sourcecode een productieklare app of website te maken.

Er zijn bijvoorbeeld veel taken die op deze manier profiteren van automatisering:

• Het compileren van moderne JavaScript naar browser-compatibele code.
• CSS preprocessortalen (bijvoorbeeld Sass) omzetten in standaard CSS.
• Minimaliseren en optimaliseren van assets zoals JavaScript, CSS en media.
• Linters uitvoeren om potentiële fouten op te sporen en coderingsstandaarden af te dwingen.
• Het uitvoeren van unit tests om een betere functionaliteit van de code te garanderen.

Dit zijn goede aspecten om te automatiseren voor elke ontwikkelworkflow, maar voor bureaus is het proces net zo cruciaal. Om te beginnen kun je consistentie behouden tussen meerdere projecten (en je team).

Je kunt ook sneller ontwikkelen en implementeren en al je projecten onderhouden door gebruik te maken van die consistentie, zelfs de meest complexe projecten. Voor de eindgebruiker zullen de geoptimaliseerde prestaties die je krijgt doorsijpelen naar hun algehele ervaring.

Gewoonlijk ‘knutselt’ je bureau custom bouwprocessen in elkaar met tools zoals Gulp, Grunt of zelfs handmatige processen. Deze benaderingen kunnen echter vaak leiden tot inconsistenties tussen projecten, om nog maar te zwijgen van de aanzienlijke onderhoudsoverhead.

wp-scripts: een workflow-wisselaar voor WordPress ontwikkeling binnen een bureau

In de context van WordPress kan een bouwproces ook een aanzienlijke stroomlijning bieden voor de ontwikkeling van thema’s en plugins. Hiermee kun je moderne tools en werkwijzen gebruiken en tegelijkertijd zorgen voor platformcompatibiliteit.

Het @wordpress/scripts pakket – wp-scripts in dit artikel – is een verzameling configuratiebestanden en scripts waarmee je het bouwproces voor WordPress projecten kunt vereenvoudigen.

Het Make WordPress Core team ontwikkelt en onderhoudt het pakket, dat een integraal onderdeel is van de Block en Site Editors. Het beste van alles is dat je het ook kunt gebruiken voor het ontwikkelen van aangepaste thema’s en plugins.

Voor het benaderen van WordPress ontwikkeling op schaal binnen een bureau, zal wp-scripts een centraal onderdeel zijn van de workflow. Het is meer dan een eenvoudig bouwprogramma; het is een uitgebreide oplossing voor moderne WordPress projecten die aansluit bij de behoefte aan een geavanceerde ontwikkelworkflow.

De belangrijkste functionaliteit van wp-scripts

Naarmate meer moderne JavaScript praktijken doordringen in het WordPress ecosysteem, hebben we meer gestandaardiseerde bouwtools nodig om ze toe te passen. Een uniforme build toolset in de vorm van wp-scripts komt het hele WordPress ontwikkel-ecosysteem ten goede.

Als zodanig biedt wp-scripts een reeks features die de ontwikkeling van WordPress efficiënter maken:

• ‘Zero-config’ setup. Je kunt beginnen zonder complexe webpack configuraties.
• Moderne JavaScript ondersteuning. Je ES6 code wordt getranspileerd voor browsercompatibiliteit en geeft je meer vertrouwen in de nauwkeurigheid ervan.
• Ingebouwde CSS verwerking. Als je CSS preprocessors zoals Sass gebruikt, krijg je out of the box ondersteuning.
• Tools voor codekwaliteit. Het pakket integreert zowel ESLint als Prettier voor consistente codestijl en -kwaliteit.
• Tools voor testen. Je hebt Jest beschikbaar in het pakket voor eenheidstesten en eenvoudige uitvoering.
• Hot reloading. Als je de mogelijkheid hebt om je wijzigingen live te herladen, kan dit je ontwikkeltijd versnellen.

In combinatie biedt wp-scripts veel belangrijke voordelen voor bureaus die meerdere WordPress projecten beheren. Je kunt bijvoorbeeld je ontwikkelomgeving standaardiseren voor elk project en het bouwproces ook repliceren voor nieuwe projecten. Met het pakket kun je de dependencies van je buildtool centraliseren, waardoor updates en beveiligingspatches beter beheersbaar zijn.

In het algemeen kun je je minder zorgen maken over compatibiliteitsproblemen, je installatietijd verkorten en veel van de typische fouten die je maakt tijdens het minder gestroomlijnde bouwproces elimineren.

Wp-scripts vergelijken met een typisch WordPress ontwikkelproces

Bij een typische WordPress ontwikkeling wordt vaak gebruik gemaakt van handmatige enqueuing voor scripts en stijlen. Daarnaast schrijf je waarschijnlijk vanilla JavaScript of jQuery en vertrouw je op externe bouwprogramma’s – of helemaal geen bouwproces.

Daarentegen biedt wp-scripts een moderne, geïntegreerde aanpak op bijna elk gebied:

Element	Typische ontwikkeling	wp-scripts
JavaScript	Vaak vanilla JavaScript of jQuery	ES6 en React ondersteuning
CSS	Directe CSS of basis preprocessors	Ondersteuning voor Sass en PostCSS verwerking
Bouwproces	Een handmatige of custom setup met Gulp of Grunt	Nul-configuratie met webpack, geïntegreerd in het pakket.
Code kwaliteit	Handmatig linten of aparte tools geïntegreerd in je code editor	ESLint en Prettier zijn ingebouwd in wp-scripts
Unit testen	Als het geen over het hoofd geziene stap is, is er meestal een aparte setup	Het pakket integreert Jest testen

Over het algemeen biedt wp-scripts meer flexibiliteit dankzij de integratie met tools die je misschien nog niet gebruikt. De moeite die het kost om PostCSS, webpack of Jest in te stellen kan bijvoorbeeld iets zijn dat je overslaat vanwege tijdgebrek.

Hoe je je ontwikkelomgeving instelt om wp-scripts te integreren

Het gebruik van wp-scripts heeft zijn eigen vereisten, maar je gebruikt deze tools waarschijnlijk al. Als het nodig is, installeer dan Node.js en npm samen met een lokale WordPress ontwikkelomgeving. DevKinsta is een prima oplossing, omdat het op Docker draait en de testomgevingen van Kinsta ondersteunt.

Als je het create-block pakket al gebruikt om WordPress Block plugins te ontwikkelen, dan installeer je wp-scripts naast de andere onderdelen. Vanaf hier kun je beginnen met het opzetten van een pakketontwikkelingsproject.

Een nieuw WordPress project opzetten met wp-scripts

Het werk dat je uitvoert vindt plaats in de wp-content directory van je WordPress installatie. De specifieke submap hangt samen met het type project dat je maakt: wp-content/themes voor thema’s en wp-content/plugins voor plugins!

Hoe dan ook, je projectmap moet een aantal bestanden en mappen bevatten:

• Een package.json bestand.
• Een build map.
• Een src map die ook een index.js bestand bevat.

Om een package.json bestand te maken, navigeer je naar je projectdirectory met behulp van je Terminal of commandoregel-applicatie. Het uitvoeren van het commando npm init leidt je door een interactief installatieproces en je ‘startpunt’ zou build/index.js moeten zijn:

Installeer vervolgens wp-scripts als een ontwikkeling dependency:

npm install @wordpress/scripts --save-dev

Je zou ook een paar automatisch gegenereerde mappen en bestanden moeten zien: node_modules en package-lock.json. Hoe dan ook, je moet nu verwijzen naar de voorgedefinieerde scripts in het bestand package.json:

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

Je zult waarschijnlijk vaak naar dit bestand terugkeren om meer scripts toe te voegen wanneer dat nodig is. Bijvoorbeeld:

…

"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"
…

Het kan ook zijn dat je de assets van je thema of plugin hier moet enqueuen en vervolgens je wijzigingen moet opslaan.

Webpack begrijpen en gebruiken met wp-scripts

Voor het bundelen van assets gebruikt wp-scripts webpack. Je hoeft dit niet te configureren, maar als je de rol van webpack begrijpt, kun je wp-scripts effectiever gebruiken. Webpack heeft veel verantwoordelijkheden bij het instellen:

• Het helpt bij het oplossen van dependencies tussen je JavaScript modules.
• Je kunt moderne JavaScript omzetten naar browser-compatibele code.
• Het helpt bij het verwerken en optimaliseren van je stijlen.
• Je kunt source maps genereren om gemakkelijker te debuggen.
• Het kan je helpen om productieklare, geminificeerde bundels te maken.

Je hebt al een standaard webpack configuratie binnen wp-scripts. Dit werkt goed voor de meeste WordPress projecten. In sommige gevallen moet je echter custom configuraties maken.

Geavanceerde webpack configuratie voor bureaus

Hoewel de standaard webpack configuratie ideaal is voor de meeste ontwikkelprojecten, zijn er momenten waarop je een configuratie moet maken voor je specifieke behoeften. Je kunt bijvoorbeeld te maken hebben met complexe themastructuren of unieke plugin-architecturen. Dit is waar een webpack.config.js bestand in je project root van pas komt:

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
};

Deze configuratie maakt meerdere ingangspunten mogelijk, wat vooral handig is voor thema’s of plugins die aparte scripts vereisen voor verschillende delen van de WordPress admin of frontend. Zo kun je je standaardconfiguratie uitbreiden en de voordelen van wp-scripts behouden.

De basis van het gebruik van wp-scripts

Met een geschikte ontwikkelomgeving en de juiste bestands- en mappenstructuur kun je beginnen met het gebruik van wp-scripts. Er zijn een paar basis- en kerncommando’s die het grootste deel van je tijd in beslag zullen nemen.

Het commando start controleert je bestanden op wijzigingen, compileert assets tijdens het ontwikkelen en biedt hot reloading voor een soepelere ontwikkelervaring:

npm run start

Je gebruikt dit aan het begin van een project om een ontwikkelserver te starten, hoewel het de gecompileerde code in je build/index.js bestand niet optimaliseert.

Wanneer je je project moet deployen, zal het build commando je assets compileren voor productie:

npm run build

Als je dit uitvoert, voert het een paar taken uit. Het transpileert bijvoorbeeld je JavaScript, compileert je Sass en SCSS naar CSS, minificeert al je assets en genereert source maps. Aan het eind wordt alles uitgevoerd naar het build/index.js bestand. Het bouwproces maakt ook een build/index.asset.php bestand voor cache busting.

Het wp-scripts pakket biedt ook verschillende linting commando’s om je te helpen de kwaliteit van je code hoog te houden:

• npm run lint:js. Deze gebruik je om je JavaScript bestanden te linten.
• npm run lint:css. Hiermee kun je je CSS- of Sass-bestanden linten.
• npm run lint:pkg-json. Hiermee valideer je package.json bestand.

Voor unit testen call je eenvoudig npm run test, die Jest gebruikt om je testsuite uit te voeren.

De kerntools van wp-scripts

Basic bouwtaken kunnen je veel tijd kosten en de typische commando’s vereisen veel automatisering. wp-scripts biedt echter een reeks geavanceerde hulpprogramma’s die voldoen aan de complexe behoeften van je WordPress ontwikkeling:

• Geavanceerde compilatie. Met geoptimaliseerde configuraties kun je moderne JavaScript transpileren – inclusief ECMAScript Modules (ESM) en Javascript XML (JSX) – en Sass compileren.
• Intelligent bundelen. Je kunt gebruik maken van webpack’s codesplitsing en ’tree shaking’ om de levering van bestanden te optimaliseren.
• Uitgebreide linting. Je kunt coderingsstandaarden afdwingen voor JavaScript, CSS en package.json bestanden.
• Geïntegreerd testen. Met Jest kun je eenheidstests en dekkingsrapporten uitvoeren.
• Ontwikkelingsserver. Je kunt hot reloading gebruiken voor snelle ontwikkeling in meerdere projecten.

Je kunt de standaardfunctionaliteit van elke server uitbreiden voor een meer aangepast WordPress ontwikkelproces, ongeacht of je aan thema’s of plugins werkt.

Omgaan met JSX en moderne JavaScript

Veel WordPress projecten werken met moderne JavaScript elementen zoals React componenten, pijlfuncties, destructurering, async/await en meer. Zelfs aspecten van de kerncodebase, zoals de Block Editor, maken gebruik van moderne JavaScript om de functionaliteit te bouwen.

Maar browsers begrijpen deze geavanceerde syntaxis niet van nature, dus is er meer werk nodig om ze te transporteren en te compileren.

Met JSX kun je HTML-achtige code schrijven binnen je JavaScript, waardoor het eenvoudiger is om te beschrijven hoe je interfaces en andere elementen eruit moeten zien. Dit kan om te beginnen de leesbaarheid en onderhoudbaarheid verbeteren. Je hebt ook toegang tot krachtige React-componenten voor het maken van dynamische gebruikersinterfaces (UI’s).

wp-scripts gebruikt de Babel JavaScript compiler om je moderne JavaScript en JSX om te zetten in code die browsers kunnen begrijpen. Het zorgt voor alle complexe en noodzakelijke configuratie, zodat jij je kunt richten op het schrijven van code.

Je maakt hier gebruik van via je src/index.js bestand. Bekijk dit kleine voorbeeld van hoe je JSX en modern JavaScript zou kunnen implementeren met wp-scripts:

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);
}

Je moet het script ook enqueue-en in het functions.php-bestand van je thema of in je hoofdplugin bestand:

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');

Zodra je het commando npx wp-scripts build uitvoert, zal wp-scripts je moderne JavaScript en JSX vertalen om een browser-compatibel build/index.js bestand te maken.

Code kwaliteitscontroles en geavanceerde linting

Het wp-scripts pakket bevat verschillende tools om je te helpen kwaliteitscode te behouden en een consistente stijl in je projecten af te dwingen: Naast ESLint en Prettier heb je ook toegang tot stylelint voor CSS en SCSS linting.

De eerste stap is het toevoegen van de linting scripts aan je package.json bestand:

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

Maak vervolgens custom configuratiebestanden in de hoofdmap van je project. ESLint vereist bijvoorbeeld dat je werkt binnen het bestand .eslintrc.js. Dit voorbeeld dwingt (gedeeltelijk) het gebruik van template-literals af voor strings in je 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',
  },
};
…

Voor stylelint bewerk je het bestand .stylelintrc.js:

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

Als je een grote codebase onderhoudt over meerdere projecten, is een consistente codestijl cruciaal. Op deze manier kun je de standaard ESLint en stylelint configuraties uitbreiden om de coderingsstandaarden van jouw bureau af te dwingen.

Van hieruit kun je npm run lint uitvoeren om dit proces in gang te zetten, uitgebreid met het specifieke lintertype. Als je bijvoorbeeld code hebt die een typische concatenation bevat…

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

…zal npm run lint:js een fout aangeven en voorstellen om in plaats daarvan een literal template te gebruiken:

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

Dit is een fantastische manier om je WordPress thema of plugin code te linten en geeft je de ruimte om de rulesets aan te passen aan je specifieke behoeften en standaarden.

Unit testen

Unit testen is cruciaal om betrouwbaarheid en onderhoudbaarheid binnen je codebase te garanderen. De tools die wp-scripts gebruikt als testraamwerk is Jest.

Wanneer je het commando test uitvoert, zoekt Jest naar bestanden met de extensies .test.js of .spec.js, of naar bestanden in een __tests__ map. Het voert dan de tests uit die in deze bestanden zijn gedefinieerd en rapporteert de resultaten.

Je moet eerst verwijzen naar het testscript in je package.json bestand:

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

Als dat nodig is, maak dan een bestand zoals src/utils.js:

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

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

Maak van hieruit een testbestand, zoals 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);
  });
});

Zodra je het commando npm run test uitvoert, zal wp-scripts automatisch alle bestanden met de extensie .test.js vinden en uitvoeren. Je kunt de standaard Jest configuratie ook uitbreiden om geavanceerde testbehoeften te ondersteunen, zoals testdekking:

// 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,
    },
  },
};

Deze configuratie voegt een custom setup-bestand toe, specificeert bestanden om op te nemen in dekkingsrapporten en stelt dekkingsdrempels in om een uitgebreide testdekking te garanderen voor al je projecten. Wanneer je deze tests uitvoert, zal Jest output leveren die alle goed- en afkeurtests laat zien.

Het uitbreiden van de mogelijkheden van je unit testen op deze manier kan de kwaliteit en betrouwbaarheid van je WordPress thema’s en plugins aanzienlijk verbeteren en je hele ontwikkelproces stroomlijnen.

Hoe je wp-scripts kunt integreren in je workflows

Het toepassingsgebied van het gebruik van wp-scripts is zo breed als je zelf wilt. Om dit te illustreren laten we een paar snelle benaderingen de revue passeren die je kunt gebruiken om wp-scripts te gebruiken om typische taken te automatiseren.

Herbruikbare project-templates maken

Je zult waarschijnlijk vaak nieuwe projecten moeten starten – misschien zelfs elke dag. Het maken van een custom project-template door wp-scripts vooraf te configureren kan je veel insteltijd besparen.

Je kunt beginnen met een basisproject: een nieuw WordPress thema of plugin dat je wp-scripts setup bevat:

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

Vervolgens stel je de projectstructuur in en maak je de benodigde mappen en bestanden aan:

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

Op dit punt configureer je wp-scripts en werk je het bestand package.json bij met relevante commando’s:

{
  "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"
  }
}

Je kunt dit uitbreiden om configuraties te maken voor webpack, ESLint en stylelint.

Om dit een herbruikbaar template te maken dat eenvoudig toegankelijk is, is een GitHub repo ideaal. Overweeg bijvoorbeeld een remote origin van https://github.com/your-agency/theme-template.git.

Als je een nieuw project begint, kun je een eenvoudig commando uitvoeren:

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

Hiermee kloon je je template-repo en stel je een nieuw thema in met je vooraf gedefinieerde wp-scripts configuratie.

Je kunt de template verder aanpassen door bureau-specifieke boilerplate code toe te voegen, zoals veelgebruikte functies of componenten. Het is belangrijk om deze template-repository actueel te houden, de nieuwste versie wp-scripts te gebruiken en eventuele workflowverbeteringen te implementeren.

Versiebeheer en samenwerking

Je kunt meer doen als het gaat om wp-scripts en het werken met versiebeheer. Vaak moet je echter een aantal typische werkwijzen implementeren om ervoor te zorgen dat de kwaliteit van de code hoog blijft:

• Neem package.json en package-lock.json op in versiebeheer. Dit zorgt ervoor dat alle teamleden dezelfde dependencies gebruiken.
• Zorg ervoor dat je build artefacten zoals /build en /node_modules opneemt in je .gitignore bestand.
• Zorg ervoor dat je verwijst naar alle scripts die je nodig hebt in je package.json bestand voordat je het commit.
• Overweeg het gebruik van een .nvmrc bestand om de juiste Node.js versie voor je project te specificeren.

Je zou ervoor kunnen kiezen om pre-commit hooks te implementeren met tools zoals Husky. Dit is een geweldige manier om een linter uit te voeren voor elke commit, om maar een voorbeeld te noemen:

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

Op deze manier kun je ervoor zorgen dat je automatisch lint en tests uitvoert voor commits en pushes. Het is nog een manier om de kwaliteit van code in je team te handhaven.

Continue integratie en continue deployment (CI/CD)

Het integreren van wp-scripts in je CI/CD pijplijn kan je deployment proces stroomlijnen voor zowel thema’s als plugins. GitHub Actions is slechts één manier om dit te integreren in je wp-scripts configuratie.

De eerste stap is het maken van een speciaal workflow bestand in een workflows map van je repo:

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/

De uitrolstap zal variëren afhankelijk van je host. Je zou rsync kunnen gebruiken, integreren met diensten zoals DeployHQ of Buddy, of gaan voor een eenvoudige cURL integratie. Als je deployment wachtwoorden of sleutels vereist, dan moet je die als secrets toevoegen aan de instellingen van je GitHub repository.

Deze workflow voert linters uit, test en bouwt je project op elk push en pull verzoek. Het beste van alles is dat het alleen uitrolt als je wijzigingen naar de hoofdbranch pusht.

Een custom command line interface (CLI) maken

Als je custom tools nodig hebt, kan wp-scripts helpen. Je zou bijvoorbeeld een aangepaste CLI tool kunnen implementeren die past bij de behoeften van je bureau.

In sommige gevallen zal je tool dependencies nodig hebben:

npm install @wordpress/scripts commander chalk

Hier parst Commander commandoregelargumenten en verbetert chalk de visuele weergave van de uitvoertekst.

Vanaf hier kun je beginnen met het coderen van de tool door gebruik te maken van wp-scripts. Hier is een voorbeeld van hoe dat bestand eruit zou zien:

#!/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);

Door het bin veld toe te voegen aan je package.json bestand kun je van de CLI tool een executable maken:

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

Om de CLI te koppelen voor een lokale installatie, kun je simpelweg npm link uitvoeren. Nu kun je de CLI testen in je Terminal app:

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

Je moet de tool publiceren naar een privé npm register zodat andere teamleden het op hun gemak kunnen installeren:

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

Als je het nodig hebt, hoef je alleen maar npm install --save-dev agency-wp-cli uit te voeren om je tool te installeren. Vanaf hier kun je verwijzen naar de CLI binnen package.json:

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

Het maken en gebruiken van een tool als deze zorgt ervoor dat iedereen in je bureau dezelfde commando’s en processen gebruikt. Dit kan inconsistenties verminderen en je WordPress ontwikkelingsworkflow nog verder stroomlijnen.

Prestatie-optimalisatie

Wanneer je meerdere drukbezochte WordPress sites beheert, wordt de optimalisatie van je prestaties cruciaal voor je levering. Er zijn verschillende geavanceerde technieken die wp-scripts je kan helpen implementeren.

Geavanceerd splitten van code

Met code splitting kun je bijvoorbeeld je JavaScript-bundel opdelen in kleinere brokken, die je op verzoek kunt laden. Dit kan je initiële laadtijden verbeteren, vooral voor grote applicaties.

Pas eerst je webpack.config.js bestand aan om het splitten van code in te schakelen:

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('@', '')}`;
          },
        },
      },
    },
  },
};

Overal in je JavaScript code gebruik je dynamische imports om het op te splitsen in kleinere chunks:

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

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

Je moet ook elke splitsing enqueue-en binnen je WordPress-bestanden:

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');

Dit zou je lagere laadtijden moeten geven en duurt ook niet al te lang om te implementeren.

Tree shaking

In de context van JavaScript is ’tree shaking’ hoe je ongebruikte code verwijdert. Zowel wp-scripts als webpack voeren tree shaking uit voor productie builds, maar je kunt het verder optimaliseren. De toepassing is complexer dan we hier geven, maar hoe dan ook, je wilt ervoor zorgen dat je ES6 import en export syntax gebruikt:

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

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

Specificeer vervolgens die bestanden met ‘neveneffecten’…

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

…of markeer het als vrij van neveneffecten:

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

Sommige grotere bibliotheken ondersteunen tree shaking niet, net als andere. In deze gevallen moet je een specifieke plugin gebruiken:

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

Dit betekent ook dat je je babel configuratiebestanden moet bijwerken voor de meest optimale en foutloze installatie.

Asset-optimalisatie

Het wp-scripts bouwproces minimaliseert CSS- en JavaScript-bestanden voor je, en je kunt dit nog verder doorvoeren. Je kunt bijvoorbeeld een specifieke plugin voor het optimaliseren van afbeeldingen installeren:

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

Zodra je deze toevoegt aan je webpack config bestand, kun je resource hints gebruiken door de juiste code toe te voegen aan je functions.php bestand of hoofd plugin bestand:

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 );

Een taak als deze laat de flexibiliteit zien die je hebt met wp-scripts, voor zover je het kunt aanpassen aan de behoeften van je bureau of project.

Bundelgrootte analyseren

Inzicht in de samenstelling van je bundel is cruciaal voor optimalisatie. Met wp-scripts kun je het gemakkelijk maken met de --analyze flag.

npm run build -- --analyze

De eerste stap is om het relevante script toe te voegen aan je package.json bestand:

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

Als je het commando analyze uitvoert, genereert het een rapport dat de grootte van elke module in je bundel laat zien. Deze eenvoudige implementatie helpt je om gebieden voor optimalisatie te identificeren.

Kritieke CSS implementeren

De kritieke CSS van je site is het absolute minimum dat je pagina nodig heeft om inhoud boven de vouw te laden. Door deze CSS inline te plaatsen kun je de waargenomen laadtijd verbeteren.

Om dit te bereiken heb je de Critical CSS Webpack plugin nodig:

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

De volgende taak is het bijwerken van je webpack config bestand om naar de plugin te verwijzen:

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,
        },
      ],
    }),
  ],
};

Om het te kunnen gebruiken, moet je een snippet toevoegen aan je header.php bestand:

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

Dit haalt in wezen kritieke CSS eruit en inlineert deze voor een snellere eerste render. Het genereert kritieke CSS voor specifieke viewport-formats, wat de waargenomen laadtijd van je thema’s kan verbeteren.

Samenvatting

Voor de ontwikkeling van bureau kan wp-scripts een krachtig hulpmiddel zijn dat je workflow voor zowel thema- als plugin-projecten aanzienlijk kan verbeteren. Door een gestandaardiseerd bouwproces, moderne JavaScript ondersteuning en geïntegreerde tools voor testen en linten te bieden, kun je je met wp-scripts concentreren op het maken van WordPress projecten van hoge kwaliteit, terwijl je een aantal van de belangrijkste taken automatiseert.

Het gebruik van wp-scripts helpt je niet alleen om bij te blijven met moderne ontwikkelpraktijken. Het is een manier om jezelf in de voorhoede van de WordPress ontwikkeling te positioneren, klaar om de uitdagingen en kansen aan te gaan waar jouw bureau mee te maken krijgt.

Biedt wp-scripts de functionaliteit en reikwijdte die je nodig hebt voor de ontwikkelingsprojecten van je bureau? Deel je gedachten met ons in de comments hieronder!