Sviluppo avanzato di WordPress: come costruire un progetto con wp-scripts

Il lavoro di sviluppo di WordPress per le agenzie può essere competitivo nel migliore dei casi. Richiede un’efficienza e una coerenza straordinarie per i progetti di più clienti.

Indipendentemente dalla vostra esperienza di sviluppatori, la gestione di un intero portafoglio di temi e plugin personalizzati richiede un impegno costante per quanto riguarda la semplificazione del flusso di lavoro. Ecco wp-scripts: una potente suite di utility che può rivoluzionare l’approccio della vostra agenzia allo sviluppo di WordPress.

Questa guida completa analizza le funzionalità di wp-scripts ed esplora le tecniche per i vostri processi di build. In particolare, verranno trattati i temi della compilazione ottimizzata e del bundling, del linting automatizzato, dei test unitari e molto altro ancora: tutto questo vi interesserà se vi destreggiate tra più progetti WordPress di alto livello.

Il concetto di processo di build

Prima di esaminare le specifiche di wp-scripts, cerchiamo di capire il concetto più ampio di processo di build di uno sviluppo web. Si tratta di una serie di attività automatizzate che aiutano a trasformare il codice sorgente in un’applicazione o in un sito web pronto per la produzione.

Ad esempio, ci sono molti lavori che beneficiano dell’automazione in questo modo:

• Compilazione di JavaScript moderno in codice compatibile con il browser.
• Trasposizione dei linguaggi di preprocessore CSS (Sass, ad esempio) in CSS standard.
• Minimizzazione e ottimizzazione di risorse come JavaScript, CSS e media.
• Esecuzione di linters per individuare potenziali errori e applicare gli standard di codifica.
• Esecuzione di test unitari per garantire una migliore funzionalità del codice.

Questi sono aspetti positivi da automatizzare per qualsiasi flusso di lavoro di sviluppo, ma per le agenzie il processo è altrettanto cruciale. Per cominciare, potete mantenere la coerenza tra più progetti (e il vostro team).

Potete anche sviluppare e distribuire con cicli più rapidi e mantenere tutti i vostri progetti sfruttando questa coerenza, anche quelli più complessi. Per l’utente finale, le prestazioni ottimizzate che otterrete si ripercuoteranno sulla sua esperienza complessiva.

In genere, la vostra agenzia può “mettere insieme” processi di build personalizzati utilizzando strumenti come Gulp, Grunt o persino processi manuali. Tuttavia, questi approcci possono spesso portare a incoerenze tra i vari progetti, per non parlare dei costi di manutenzione.

wp-scripts: un cambio di flusso di lavoro per lo sviluppo di WordPress in agenzia

Nel contesto di WordPress, un processo di build può offrire una notevole semplificazione per lo sviluppo di temi e plugin. Permette di utilizzare strumenti e pratiche moderne e di garantire allo stesso tempo la compatibilità con la piattaforma.

Il pacchetto @wordpress/scripts (abbreviato in wp-scripts in questo post) è una raccolta di file di configurazione e script che aiutano a semplificare il processo di build dei progetti WordPress.

Il team di Make WordPress Core sviluppa e mantiene il pacchetto, che è parte integrante degli editor a blocchi e del sito. Ma soprattutto, è possibile usarlo anche per lo sviluppo di temi e plugin personalizzati.

Per approcciare lo sviluppo di WordPress in scala all’interno di un’agenzia, wp-scripts sarà una parte centrale del flusso di lavoro. È più di un semplice strumento di build; è una soluzione completa per progetti WordPress moderni che si allinea alla necessità di un sofisticato flusso di lavoro di sviluppo.

Le funzionalità chiave di wp-scripts

Man mano che le pratiche JavaScript più moderne si diffondono nell’ecosistema WordPress, abbiamo bisogno di strumenti di compilazione più standardizzati per adattarle. Un set di strumenti di build unificato sotto forma di wp-scripts va a vantaggio dell’intero ecosistema di sviluppo di WordPress.

Come tale, wp-scripts offre una serie di funzionalità che rendono lo sviluppo di WordPress più efficiente:

• Configurazione “zero-config”. Potete iniziare senza bisogno di complesse configurazioni webpack.
• Supporto di JavaScript moderno. Il vostro codice ES6 verrà transpilato per garantire la compatibilità con il browser e per darvi maggiore fiducia nella sua accuratezza.
• Elaborazione CSS integrata. Se utilizzate preprocessori CSS come Sass, avrete un supporto immediato.
• Strumenti per la qualità del codice. Il pacchetto integra ESLint e Prettier per garantire uno stile e una qualità del codice coerenti.
• Utilità di test. Il pacchetto mette a disposizione Jest per i test unitari e una facile esecuzione.
• Hot reloading. Se avete la possibilità di ricaricare le modifiche in tempo reale, potete accelerare i tempi di sviluppo.

Insieme, wp-scripts offre molti vantaggi fondamentali per le agenzie che gestiscono più progetti WordPress. Ad esempio, potete standardizzare l’ambiente di sviluppo per ogni progetto e replicare il processo di build anche per i nuovi progetti. Il pacchetto vi permetterà di centralizzare le dipendenze degli strumenti di compilazione, rendendo più gestibili gli aggiornamenti e le patch di sicurezza.

In generale, potrete preoccuparvi meno dei problemi di compatibilità, ridurre i tempi di configurazione ed eliminare molti degli errori tipici che si commettono durante un processo di build meno snello.

Confronto tra wp-script e un tipico processo di sviluppo di WordPress

Il tipico processo di sviluppo di WordPress spesso prevede l’utilizzo dell’enqueuing manuale per gli script e gli stili. Inoltre, è probabile che scriviate JavaScript vanilla o jQuery e che vi affidiate a strumenti di compilazione di terze parti, oppure che non sia previsto alcun processo di compilazione.

Al contrario, wp-scripts offre un approccio moderno e integrato in quasi tutte le aree:

Elemento	Sviluppo tipico	wp-scripts
JavaScript	Spesso JavaScript vanilla o jQuery	Supporto ES6 e React
CSS	CSS diretto o preprocessori di base	Supporto per l’elaborazione di Sass e PostCSS
Processo di build	Configurazione manuale o personalizzata con Gulp o Grunt	Configurazione zero utilizzando webpack, integrato nel pacchetto.
Qualità del codice	Linting manuale o strumenti separati integrati con l’editor di codice	ESLint e Prettier sono integrati nei wp-scripts
Unit testing	Se non è un passo trascurato, di solito c’è una configurazione separata.	Il pacchetto integra i test Jest

Nel complesso, wp-scripts offre una maggiore flessibilità grazie alla sua integrazione con strumenti che potreste non usare già. Ad esempio, lo sforzo di configurare PostCSS, webpack o Jest potrebbe essere un’operazione che salti per mancanza di tempo.

Come configurare l’ambiente di sviluppo per incorporare gli script wp

L’utilizzo di wp-scripts ha i suoi requisiti, ma è probabile che utilizziate già questi strumenti. Se è necessario, installate Node.js e npm insieme a un ambiente di sviluppo WordPress locale. DevKinsta sarà una buona soluzione, grazie all’esecuzione su Docker e al supporto degli ambienti di staging di Kinsta.

Se utilizzate già il pacchetto create-block per sviluppare i plugin di WordPress Block, installate wp-scripts insieme alle altre risorse. Da qui potete iniziare a impostare un progetto di sviluppo del pacchetto.

Impostazione di un nuovo progetto WordPress con wp-scripts

Il lavoro che intraprenderete si svolgerà all’interno della directory wp-content della vostra installazione di WordPress. La sottodirectory specifica si riferisce al tipo di progetto creato: wp-content/themes per i temi e wp-content/plugins per i plugin!

In ogni caso, la cartella del progetto dovrebbe includere una serie di file e directory:

• Un file package.json.
• Una cartella build.
• Una cartella src che include anche un file index.js.

Per creare un file package.json, navigate nella directory del vostro progetto utilizzando il Terminale o un’applicazione a riga di comando. L’esecuzione del comando npm init vi condurrà attraverso un processo di configurazione interattivo e il vostro “punto di ingresso” dovrebbe essere build/index.js:

Successivamente, installate wp-scripts come dipendenza di sviluppo:

npm install @wordpress/scripts --save-dev

Dovreste vedere anche un paio di directory e file generati automaticamente: node_modules e package-lock.json. In ogni caso, ora dovete fare riferimento agli script predefiniti all’interno del file package.json:

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

Probabilmente tornerete spesso su questo file per aggiungere altri script se necessario. Ad esempio:

…

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

Potreste anche aver bisogno di mettere in coda le risorse del vostro tema o del vostro plugin e poi salvare le modifiche.

Comprendere e utilizzare webpack con wp-scripts

Per il raggruppamento delle risorse “dietro le quinte”, wp-scripts utilizza webpack. Non è necessario configurarlo, anche se la comprensione del suo ruolo può aiutare a sfruttare wp-scripts in modo più efficace. Webpack ha molte responsabilità quando si tratta della configurazione:

• Aiuta a risolvere le dipendenze tra i moduli JavaScript.
• Può trasporre il codice JavaScript moderno in codice compatibile con il browser.
• Aiuta a elaborare e ottimizzare gli stili.
• Permette di generare source map per facilitare il debug.
• Può aiutare a creare bundle minificati pronti per la produzione.

Avete già una configurazione predefinita di webpack all’interno di wp-scripts. Questo funziona bene per la maggior parte dei progetti WordPress. In alcuni casi, però, potreste aver bisogno di creare delle configurazioni personalizzate.

Configurazione webpack avanzata per le agenzie

Sebbene la configurazione webpack predefinita sia ideale per la maggior parte dei progetti di sviluppo, ci sono casi in cui è necessario creare una configurazione per le vostre esigenze specifiche. Ad esempio, potreste avere a che fare con strutture complesse di temi o architetture uniche di plugin. In questo caso, un file webpack.config.js nella root del vostro progetto vi sarà utile:

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

Questa configurazione consente di avere più punti di ingresso, il che è particolarmente utile per i temi o i plugin che richiedono script separati per diverse parti dell’amministrazione o del frontend di WordPress. In questo modo potete estendere la vostra configurazione predefinita e mantenere i vantaggi di wp-scripts.

Le basi dell’utilizzo di wp-scripts

Con un ambiente di sviluppo adeguato e la giusta struttura di file e cartelle, potete iniziare a usare wp-scripts. Ci sono alcuni comandi di base che vi occuperanno la maggior parte del tempo.

Il comando start controlla che i vostri file non vengano modificati, ricompila le risorse al volo e fornisce un hot reloading per un’esperienza di sviluppo più fluida:

npm run start

Si usa all’inizio di un progetto per avviare un server di sviluppo, anche se non ottimizza il codice compilato nel file build/index.js.

Quando dovrete distribuire il progetto, il comando build compilerà le risorse per la produzione:

npm run build

Una volta eseguito, il comando esegue alcune operazioni. Ad esempio, trasporta il vostro JavaScript, compila Sass e SCSS in CSS, minifica tutte le risorse e genera le source map. Alla fine, il tutto viene inviato al file build/index.js. Il processo di compilazione crea anche un file build/index.asset.php per la creazione della cache.

Il pacchetto wp-scripts fornisce anche diversi comandi di linting per aiutarvi a mantenere alta la qualità del codice:

• npm run lint:js. Si utilizza per eseguire il linting dei file JavaScript.
• npm run lint:css. Questo comando esegue il linting i vostri file CSS o Sass.
• npm run lint:pkg-json. Convalida il vostro file package.json.

Per i test unitari, dovete semplicemente chiamare npm run test, che utilizza Jest per eseguire la vostra suite di test.

Esplorare le utility principali di wp-scripts

Le attività di compilazione di base possono richiedere molto tempo e i comandi tipici richiedono molta automazione. Tuttavia, wp-scripts offre una suite di utility sofisticate che rispondono alle esigenze complesse dello sviluppo di WordPress:

• Compilazione avanzata. Grazie a configurazioni ottimizzate, potete transpilare i moderni JavaScript, compresi i moduli ECMAScript (ESM) e Javascript XML (JSX), e compilare Sass.
• Bundling intelligente. Potete sfruttare la suddivisione del codice e il “tree shaking” di Webpack per ottimizzare la distribuzione delle risorse.
• Linting completo. Potete applicare gli standard di codifica ai file JavaScript, CSS e package.json.
• Test integrati. Con Jest potete eseguire test unitari e rapporti di copertura.
• Server di sviluppo. Potete utilizzare l’hot reloading per uno sviluppo rapido su più progetti.

Potete espandere le funzionalità predefinite di ciascuno di essi per sfruttare un processo di sviluppo di WordPress più personalizzato, indipendentemente dal fatto che lavoriate su temi o plugin.

Gestire JSX e JavaScript moderno

Molti progetti WordPress lavorano con elementi JavaScript moderni come i componenti React, le funzioni freccia, la destrutturazione, async/await e molto altro. Anche alcuni aspetti della base di codice principale, come l’editor a blocchi, utilizzano JavaScript moderno per costruire le proprie funzionalità.

Tuttavia, i browser non comprendono in modo nativo queste sintassi avanzate, per cui è necessario un maggiore lavoro di transpilazione e compilazione.

JSX permette di scrivere codice simile all’HTML all’interno del vostro JavaScript, il che rende più facile descrivere l’aspetto delle interfacce e degli altri elementi. Questo può migliorare la leggibilità e la manutenibilità, tanto per cominciare. Potete anche accedere a potenti componenti React per creare interfacce utente (UI) dinamiche.

wp-scripts utilizza Babel JavaScript compiler per convertire i vostri moderni JavaScript e JSX in codice comprensibile ai browser. Gestisce tutte le configurazioni complesse e necessarie, permettendovi di concentrarvi sulla scrittura del codice.

Potete sfruttare questo sistema attraverso il vostro file src/index.js . Date un’occhiata a questo piccolo esempio di come implementare JSX e JavaScript moderno utilizzando 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);
}

Inoltre, dovrete inserire lo script nel file functions.php del vostro tema o nel file principale del vostro plugin:

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

Una volta eseguito il comando npx wp-scripts build, wp-scripts effettuerà il transpile dei vostri moderni JavaScript e JSX per creare un file build/index.js compatibile con il browser.

Controlli di qualità del codice e linting sofisticato

Il pacchetto wp-scripts include diversi strumenti che aiutano a mantenere la qualità del codice e a imporre uno stile coerente nei vostri progetti: oltre a ESLint e Prettier, potete accedere anche a stylelint per il linting di CSS e SCSS.

Il primo passo consiste nell’aggiungere gli script di linting al vostro file package.json:

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

Successivamente, create dei file di configurazione personalizzati nella directory principale del progetto. Ad esempio, ESLint richiede di lavorare all’interno del file .eslintrc.js. Questo esempio (in parte) impone l’uso di template literal per le stringhe nel codice JavaScript:

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

Per stylelint, dovete modificare il file .stylelintrc.js:

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

Se gestite una grande base di codice su più progetti, avere uno stile di codice coerente è fondamentale. In questo modo, potete estendere le configurazioni predefinite di ESLint e stylelint per applicare gli standard di codifica della vostra agenzia.

Da qui, potete eseguire npm run lint per mettere in moto questo processo, esteso al tipo specifico di linter. Ad esempio, se avete un codice che riporta alcune concatenazioni tipiche…

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

… l’esecuzione di npm run lint:js segnalerà un errore e vi suggerirà di utilizzare invece un template literal:

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

Questo è un modo inestimabile per eseguire il linting del codice del vostro tema o del vostro plugin WordPress e vi dà la possibilità di adattare le regole alle vostre esigenze e ai vostri standard specifici.

Unit testing

Gli unit testing sono fondamentali per garantire l’affidabilità e la manutenibilità della vostra base di codice. Lo strumento che wp-scripts utilizza come framework di testing è Jest.

Quando eseguite il comando test, Jest cerca i file con estensione .test.js o .spec.js o i file in una directory __tests__. Esegue quindi i test definiti in questi file e ne riporta i risultati.

Per prima cosa dovete fare riferimento allo script di test all’interno del vostro file package.json:

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

Se necessario, create un file come src/utils.js:

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

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

Da qui, create un file di prova, ad esempio 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);
  });
});

Una volta eseguito il comando npm run test, wp-scripts troverà ed eseguirà automaticamente tutti i file con estensione .test.js. Potete anche estendere la configurazione predefinita di Jest per supportare qualsiasi esigenza di test avanzata, come la copertura dei test:

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

Questa configurazione aggiunge un file di configurazione personalizzato, specifica i file da includere nei report di copertura e imposta delle soglie di copertura per garantire una copertura completa dei test nei vostri progetti. Quando eseguirete questi test, Jest fornirà un output che mostra i test che passano e quelli che non passano.

Espandere le capacità dei test unitari in questo modo può migliorare notevolmente la qualità e l’affidabilità dei vostri temi e plugin WordPress e snellire l’intero processo di sviluppo.

Come integrare i wp-script nei propri flussi di lavoro

L’ambito di utilizzo dei wp-script è tanto ampio quanto serve a voi. Per dimostrarlo, passiamo in rassegna alcuni approcci rapidi all’utilizzo di wp-scripts per automatizzare attività tipiche.

Creare template di progetto riutilizzabili

È probabile che abbiate bisogno di avviare nuovi progetti frequentemente, magari anche ogni giorno. La creazione di un template di progetto personalizzato attraverso la preconfigurazione di wp-scripts può farvi risparmiare molto tempo di configurazione.

Potete iniziare con un progetto di base: un nuovo tema o plugin di WordPress che include la configurazione di wp-scripts:

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

Quindi, impostate la struttura del progetto e create le directory e i file necessari:

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

A questo punto, configurate wp-scripts e aggiornate il file package.json con i comandi necessari:

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

Potete approfondire questo aspetto per creare configurazioni per webpack, ESLint e stylelint.

Per rendere questo template riutilizzabile e di facile accesso, l’ideale è un repo GitHub. Ad esempio, prendete in considerazione un’origine remota di https://github.com/your-agency/theme-template.git.

Quando iniziate un nuovo progetto, potete eseguire un semplice comando:

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

Questo clonerà il vostro repo di template e imposterà un nuovo tema con la configurazione predefinita di wp-scripts.

Potete personalizzare ulteriormente il template aggiungendo codice boilerplate specifico per l’agenzia, come ad esempio le funzioni o i componenti più utilizzati. È importante mantenere aggiornato il repository dei template, utilizzando l’ultima versione di wp-scripts e implementando tutti i miglioramenti del flusso di lavoro che deciderai di apportare.

Controllo delle versioni e collaborazione

Potete fare ancora di più quando si tratta di wp-scripts e di lavorare con il controllo di versione. Spesso, però, è necessario implementare alcune pratiche tipiche per mantenere alta la qualità del codice:

• Includete package.json e package-lock.json nel controllo di versione. Questo assicura che tutti i membri del team utilizzino le stesse dipendenze.
• Assicuratevi di includere gli artefatti di compilazione come /build e /node_modules nel vostro file .gitignore.
• Assicuratevi di fare riferimento a tutti gli script di cui avete bisogno nel vostro file package.json prima di eseguire il commit.
• Prendete in considerazione l’utilizzo di un file .nvmrc per specificare la versione di Node.js corretta per il vostro progetto.

Potreste scegliere di implementare degli hook di pre-commit attraverso strumenti come Husky. Questo è un ottimo modo per eseguire un linter prima di ogni commit, solo per fare un esempio:

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

In questo modo potete assicurarvi di eseguire automaticamente il lint e i test prima dei commit e dei push. È un altro modo per mantenere la qualità del codice nel vostro team.

Integrazione continua e distribuzione continua (CI/CD)

L’integrazione di wp-scripts nella vostra pipeline CI/CD può semplificare il processo di distribuzione di temi e plugin. GitHub Actions è solo uno dei modi per integrare la configurazione di wp-scripts.

Il primo passo consiste nel creare un file di flusso di lavoro dedicato all’interno di una cartella workflow del vostro 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/

La fase di distribuzione varia a seconda del vostro host. Potreste utilizzare rsync, integrare con servizi come DeployHQ o Buddy o scegliere una semplice integrazione cURL. Se la distribuzione richiede password o chiavi, dovete aggiungerle come segreti alle impostazioni del vostro repository GitHub.

Questo flusso di lavoro esegue linters, test e build del progetto su ogni richiesta di push e pull. Soprattutto, esegue il deploy solo quando inviate le modifiche al branch principale.

Creare uno strumento personalizzato per l’interfaccia a riga di comando (CLI)

Se avete bisogno di strumenti personalizzati, wp-scripts può aiutarvi. Ad esempio, potreste voler distribuire uno strumento CLI personalizzato che si adatti alle esigenze della vostra agenzia.

In alcuni casi, il vostro strumento avrà bisogno di alcune dipendenze:

npm install @wordpress/scripts commander chalk

In questo caso, Commander analizza gli argomenti della riga di comando e chalk migliora la visualizzazione del testo in uscita.

Da qui potete iniziare a codificare lo strumento sfruttando wp-scripts. Ecco un esempio di come dovrebbe apparire il file:

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

Aggiungendo il campo bin al file package.json potete rendere lo strumento CLI un eseguibile:

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

Per collegare la CLI per un’installazione locale, potete semplicemente eseguire npm link. Ora potete testare la CLI nella vostra applicazione Terminale:

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

Dovreste pubblicare lo strumento in un registro npm privato in modo che gli altri membri del team possano installarlo a loro piacimento:

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

Quando ne avrete bisogno, dovrete solo eseguire npm install --save-dev agency-wp-cli per installare il vostro strumento. Da qui, potrete fare riferimento alla CLI all’interno di package.json:

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

La creazione e l’utilizzo di uno strumento come questo garantisce che tutti i membri della vostra agenzia utilizzino gli stessi comandi e processi. Questo può ridurre le incongruenze e snellire ulteriormente il flusso di lavoro dello sviluppo di WordPress.

Ottimizzazione delle prestazioni

Quando si gestiscono più siti WordPress ad alto traffico, l’ottimizzazione delle prestazioni diventa fondamentale per i vostri risultati. Ci sono diverse tecniche avanzate che wp-scripts può aiutarvi a implementare.

Splitting avanzato del codice

Ad esempio, lo splitting del codice permette di suddividere il vostro pacchetto JavaScript in parti più piccole, che potete caricare su richiesta. Questo può aumentare i tempi di caricamento iniziali, soprattutto per le applicazioni di grandi dimensioni.

Per prima cosa, modificate il vostro file webpack.config.js per abilitare la suddivisione del codice:

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 tutto il vostro codice JavaScript, utilizzate le importazioni dinamiche per suddividerlo in parti più piccole:

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

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

Inoltre, dovete mettere in coda ogni suddivisione all’interno dei vostri file WordPress:

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

Questo dovrebbe ridurre i tempi di caricamento e non richiede molto tempo per essere implementato.

Tree shaking

Nel contesto di JavaScript, il “tree shaking” è il modo in cui ci si libera del codice inutilizzato. Sia wp-scripts che webpack eseguono il tree shaking per le build di produzione, ma potete ottimizzarlo ulteriormente. L’applicazione è più complessa di quella descritta qui, ma in ogni caso dovete assicurarvi di utilizzare la sintassi di importazione ed esportazione di ES6:

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

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

Quindi, specificate i file con “sideEffects”, effetti collaterali…

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

… o contrassegnarli come privi di effetti collaterali:

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

Alcune librerie più grandi non supportano il tree shaking, così come altre più piccole. In questi casi, sarà necessario utilizzare un plugin specifico:

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

Questo significa che dovrete aggiornare anche i file di configurazione di babel per un’installazione ottimale e priva di errori.

Ottimizzazione delle risorse

Il processo di creazione di wp-scripts ridurrà al minimo i file CSS e JavaScript, ma potete fare di più. Ad esempio, potete installare un plugin specifico per l’ottimizzazione delle immagini:

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

Una volta aggiunto al file di configurazione del webpack, potete utilizzare i suggerimenti sulle risorse aggiungendo il codice giusto al file functions.php o al file principale del plugin:

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

Un’attività come questa mostra la flessibilità che avete con wp-scripts, in quanto potete adattarlo alle esigenze della vostra agenzia o del vostro progetto.

Analizzare le dimensioni del bundle

Capire la composizione del vostro bundle è fondamentale per l’ottimizzazione. Con wp-scripts, potete renderlo più semplice con il flag --analyze.

npm run build -- --analyze

Il primo passo è aggiungere lo script corrispondente al vostro file package.json:

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

Una volta eseguito il comando analyze, questo genererà un report che mostra le dimensioni di ogni modulo del vostro bundle. Questa semplice implementazione aiuta a identificare le aree da ottimizzare.

Implementare il critical CSS

Un critical CSS, o CSS critico, del sito è il minimo indispensabile che la vostra pagina richiede per caricare i contenuti above the fold. L’inserimento di questo CSS in linea può migliorare il tempo di caricamento percepito.

Per ottenere questo risultato è necessario il plugin Critical CSS Webpack:

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

Il prossimo passo consiste nell’aggiornare il file di configurazione di Webpack per fare riferimento al plugin:

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

Per poterlo usare, è necessario aggiungere uno snippet al vostro file header.php:

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

Questo strumento essenzialmente estrae e inserisce in linea i CSS critici per un rendering iniziale più veloce. Genera CSS critici per dimensioni specifiche del viewport, migliorando così il tempo di caricamento percepito dei vostri temi.

Riepilogo

Per lo sviluppo di un’agenzia, wp-scripts può essere un potente strumento in grado di migliorare significativamente il flusso di lavoro per i progetti di temi e plugin. Fornendo un processo di creazione standardizzato, un supporto JavaScript moderno e strumenti di test e linting integrati, wp-scripts permette di concentrarvi sulla creazione di progetti WordPress di alta qualità automatizzando alcune delle attività più importanti.

Sfruttare wp-scripts non aiuta solo a stare al passo con le moderne pratiche di sviluppo. È un modo per posizionarvi all’avanguardia nello sviluppo di WordPress, pronti ad affrontare le sfide e le opportunità che la vostra agenzia deve affrontare.

wp-scripts offre le funzionalità e la portata di cui avete bisogno per i progetti di sviluppo della vostra agenzia? Condividete con noi i vostri pensieri nella sezione commenti qui sotto!