Le travail de développement WordPress pour les agences peut être compétitif dans le meilleur des cas. Il exige une efficacité et une cohérence suprêmes sur plusieurs projets de clients.

Quelle que soit votre expérience en tant que développeur, la gestion d’un portefeuille entier de thèmes et d’extensions personnalisés nécessite toujours un effort perpétuel lorsqu’il s’agit de rationaliser le flux de travail. Entre en scène wp-scripts: une puissante suite d’utilitaires qui peut révolutionner la façon dont votre agence aborde le développement WordPress.

Ce guide complet examine les capacités de wp-scripts, et explore des techniques pour tes processus de construction. Tout au long de l’ouvrage, il sera question d’optimisation de la compilation et du regroupement, de linting automatisé, de tests unitaires, et de bien d’autres choses encore – tout cela vous parlera si vous jonglez avec de multiples projets WordPress à fort enjeu.

Le concept de processus de construction

Avant de nous pencher sur les spécificités de wp-scripts, comprenons le concept plus large du processus de construction de ton développement web. Il s’agit d’une série de tâches automatisées qui vous aident à transformer votre code source en une application ou un site web prêt pour la production.

Par exemple, il existe de nombreux emplois qui bénéficient de l’automatisation de cette manière :

  • Compilation de JavaScript moderne en code compatible avec les navigateurs.
  • Transposer les langages de préprocesseur CSS (Sass, par exemple) en CSS standard.
  • Minifier et optimiser les ressources telles que JavaScript, CSS et les médias.
  • Exécuter des linters pour détecter les erreurs potentielles et appliquer les normes de codage.
  • Exécuter des tests unitaires pour garantir une meilleure fonctionnalité du code.

Ce sont de bons aspects à automatiser pour tout flux de travail de développement, mais pour les agences, le processus est tout aussi crucial. Pour commencer, vous pouvez maintenir la cohérence entre plusieurs projets (et votre équipe).

Vous pouvez aussi développer et déployer à travers des cycles plus rapides et maintenir tous vos projets en tirant parti de cette cohérence, même les plus complexes. Pour l’utilisateur final, les performances optimisées que vous obtenez se répercutent sur son expérience globale.

Généralement, votre agence peut « bricoler » des processus de construction personnalisés à l’aide d’outils tels que Gulp, Grunt, ou même des processus manuels. Cependant, ces approches peuvent souvent entraîner des incohérences entre les projets, sans parler des frais généraux de maintenance importants.

wp-scripts : un changement de flux de travail pour le développement de WordPress au sein d’une agence

Dans le contexte de WordPress, un processus de construction peut également offrir une rationalisation significative pour le développement de thèmes et d’extensions. Il vous permet d’utiliser des outils et des pratiques modernes tout en assurant la compatibilité de la plateforme.

Le paquetage @wordpress/scripts – wp-scripts tout au long de cet article – est une collection de fichiers de configuration et de scripts qui vous aide à simplifier le processus de construction pour les projets WordPress.

Un extrait de code affichant la section scripts d'un fichier package.json pour un projet WordPress. Il répertorie divers scripts npm pour des tâches telles que la construction, la vérification des moteurs et des licences, le formatage, l'analyse de la qualité (pour CSS, JavaScript, les documents Markdown et package.json), la mise à jour des paquets, la création de fichiers zip de plugins, le démarrage du projet et l'exécution de tests (à la fois de bout en bout et unitaires). Tous les scripts utilisent wp-scripts comme commande de base.
Partie d’une référence wp-scripts pour les différents scripts qu’un projet utilisera.

L’équipe Make WordPress Core développe et maintient le package, qui fait partie intégrante des éditeurs de blocs et de sites. Mieux encore, vous pouvez aussi l’utiliser pour le développement de thèmes et d’extensions personnalisés.

Pour aborder le développement de WordPress à grande échelle au sein d’une agence, wp-scripts sera un élément central du flux de travail. C’est plus qu’un simple outil de construction, c’est une solution complète pour les projets WordPress modernes qui s’aligne sur le besoin d’un flux de travail de développement sophistiqué.

Les principales fonctionnalités de wp-scripts

Au fur et à mesure que des pratiques JavaScript plus modernes s’infiltrent dans l’écosystème WordPress, nous avons besoin d’outils de construction plus standardisés pour les prendre en compte. Un ensemble d’outils de construction unifiés sous la forme de wp-scripts profite à l’ensemble de l’écosystème de développement de WordPress.

En tant que tel, wp-scripts offre une gamme de fonctionnalités qui rendent le développement de WordPress plus efficace :

  • Installation « zéro configuration ». Vous pouvez commencer sans avoir besoin de configurations webpack complexes.
  • Prise en charge de JavaScript moderne. Votre code ES6 sera transpilé pour la compatibilité avec les navigateurs, et vous donnera une plus grande confiance dans son exactitude.
  • Traitement CSS intégré. Si vous utilisez des préprocesseurs CSS tels que Sass, vous bénéficiez d’une prise en charge immédiate.
  • Outils de qualité du code. Le paquet intègre à la fois ESLint et Prettier pour un style et une qualité de code cohérents.
  • Utilitaires de test. Vous avez Jest disponible dans le package pour les tests unitaires et une exécution facile.
  • Rechargement à chaud. Si vous avez la possibilité de recharger tes modifications en direct, cela peut accélérer votre temps de développement.

Combiné, wp-scripts offre de nombreux avantages clés pour les agences qui gèrent plusieurs projets WordPress. Par exemple, vous pouvez normaliser votre environnement de développement pour chaque projet et reproduire le processus de construction pour tout nouveau projet. Le paquet vous permettra de centraliser les dépendances de votre outil de construction, ce qui rend les mises à jour et les correctifs de sécurité plus faciles à gérer.

Dans l’ensemble, vous pouvez moins vous inquiéter des problèmes de compatibilité, réduire votre temps d’installation et éradiquer la plupart des erreurs typiques que vous commetez tout au long du processus de construction moins rationalisé.

Comparaison entre wp-scripts et un processus de développement WordPress classique

Le développement typique de WordPress implique souvent l’utilisation d’une file d’attente manuelle pour les scripts et les styles. De plus, vous écrirez probablement du vanilla JavaScript ou du jQuery, et vous aurez recours à des outils de construction tiers – ou pas de processus de construction du tout.

En revanche, wp-scripts offre une approche moderne et intégrée dans presque tous les domaines :

Élément Développement typique wp-scripts
JavaScript Souvent du vanilla JavaScript ou du jQuery Prise en charge de ES6 et de React
CSS CSS direct ou préprocesseurs de base Prise en charge des traitements Sass et PostCSS
Processus de construction Une configuration manuelle ou personnalisée à l’aide de Gulp ou Grunt. Une configuration zéro à l’aide de webpack, intégré dans le paquet.
Qualité du code Linting manuel ou outils séparés intégrés à ton éditeur de code. ESLint et Prettier sont intégrés dans les scripts wp.
Tests unitaires S’il ne s’agit pas d’une étape négligée, il y a généralement une configuration séparée Le paquet intègre les tests Jest

Dans l’ensemble, wp-scripts offre une plus grande flexibilité grâce à son intégration avec des outils que vous n’utilisez peut-être pas déjà. Par exemple, l’effort de configuration de PostCSS, webpack ou Jest pourrait être quelque chose que vous ignorez par manque de temps.

Comment configurer ton environnement de développement pour y intégrer des scripts wp ?

L’utilisation de wp-scripts a ses propres exigences, mais il est probable que vous utilisez déjà ces outils. Si vous en avez besoin, installez Node.js et npm ainsi qu’un environnement de développement WordPress local. DevKinsta sera une bonne solution, grâce à son fonctionnement sur Docker et à la prise en charge des environnements de staging de Kinsta.

L'interface DevKinsta affiche les informations relatives à un site WordPress. Elle comprend le type de site, le type de base de données, le serveur web et la version PHP. La partie supérieure de l'interface affiche les boutons Ouvrir le site, Synchroniser, Gestionnaire de base de données et Admin WP. Un petit aperçu du site web est affiché sur le côté gauche. Le bas de l'interface comporte une section Statut du site avec un bouton Arrêter le site.
L’interface principale de DevKinsta.

Si vous utilisez déjà le paquetage create-block pour développer des extensions WordPress de blocs, cela installe wp-scripts avec ses autres ressources. À partir de là, vous pouvez commencer à mettre en place un projet de développement de paquet.

Mise en place d’un nouveau projet WordPress avec wp-scripts

Le travail que vous entreprendrez se fera dans le répertoire wp-content de votre installation WordPress. Le sous-répertoire spécifique correspond au type de projet que vous avez créé : wp-content/themes pour les thèmes et wp-content/plugins pour les extensions !

Quoi qu’il en soit, le dossier de votre projet doit comprendre un certain nombre de fichiers et de répertoires :

  • Un fichier package.json.
  • Un répertoire build.
  • Un répertoire src qui comprend également un fichier index.js.

Pour créer un fichier package.json, naviguez dans le répertoire de votre projet à l’aide de votre terminal ou d’une application de ligne de commande. L’exécution de la commande npm init vous emmènera dans un processus d’installation interactif, et votre « point d’entrée » devrait être build/index.js:

Fenêtre de terminal sur fond sombre montrant la sortie d'une commande npm init pour un projet de thème WordPress. Le texte explique que cet utilitaire guidera l'utilisateur dans la création d'un fichier package.json, en couvrant les éléments courants et en suggérant des valeurs par défaut raisonnables. Il fournit des instructions sur la manière d'installer les paquets et de les enregistrer en tant que dépendances. Le terminal affiche les détails de l'installation initiale, y compris le nom, la version, la description et le point d'entrée du paquet.
Une exécution partielle du processus npm init, montrant l’invite de valeur du point d’entrée.

Ensuite, installez wp-scripts comme dépendance de développement :

npm install @wordpress/scripts --save-dev

Vous devriez également voir quelques répertoires et fichiers générés automatiquement : node_modules, et package-lock.json. Quoi qu’il en soit, vous devez maintenant faire référence aux scripts prédéfinis dans le fichier package.json:

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

Vous reviendrez probablement souvent à ce fichier pour ajouter d’autres scripts au fur et à mesure des besoins. Par exemple :

…

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

Vous pouvez aussi avoir besoin de mettre en file d’attente les ressources de votre thème ou de votre extension ici, puis d’enregistrer vos modifications.

Comprendre et utiliser webpack avec wp-scripts

Pour regrouper les ressources sous le capot, wp-scripts utilise webpack. Vous n’avez pas besoin de le configurer, mais comprendre son rôle peut vous aider à exploiter wp-scripts de manière plus efficace. Webpack a beaucoup de responsabilités lorsqu’il s’agit de votre configuration :

  • Il aide à résoudre les dépendances entre vos modules JavaScript.
  • Il vous permet de transpiler du JavaScript moderne en code compatible avec les navigateurs.
  • Il aidera à traiter et à optimiser vos styles.
  • Vous êtes en mesure de générer des cartes de source pour déboguer plus facilement.
  • Il peut vous aider à créer des bundles minifiés prêts pour la production.

Vous avez déjà une configuration webpack par défaut au sein de wp-scripts. Cela fonctionne bien pour la plupart des projets WordPress. Mais dans certains cas, vous pouvez avoir besoin de créer des configurations personnalisées.

Configuration webpack avancée pour les configurations d’agence

Bien que la config webpack par défaut soit idéale pour la majorité des projets de développement, il y a des moments où vous devez créer une configuration pour vos besoins spécifiques. Par exemple, vous pouvez avoir affaire à des structures de thèmes complexes ou à des architectures d’extenbsions uniques. C’est là qu’un fichier webpack.config.js à la racine de votre projet vous sera 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
};

Cette configuration permet d’avoir plusieurs points d’entrée, ce qui est particulièrement utile pour les thèmes ou les extensions nécessitant des scripts distincts pour différentes parties de l’administration ou de l’interface publique de WordPress. Ainsi, vous pouvez étendre votre configuration par défaut et conserver les avantages de wp-scripts.

Les bases de l’utilisation des scripts wp

Avec un environnement de développement approprié et la bonne structure de fichiers et de dossiers en place, vous pouvez commencer à utiliser wp-scripts. Il existe quelques commandes de base qui vous permettront de passer le plus clair de votre temps.

La commande start surveille les modifications apportées à vos fichiers, recompile les éléments à la volée et permet le rechargement à chaud pour une expérience de développement plus fluide :

npm run start

Vous l’utilisez au début d’un projet pour démarrer un serveur de développement, bien qu’elle n’optimise pas le code compilé dans votre fichier build/index.js.

Lorsque vous devras déployer votre projet, la commande build compilera tes ressources pour la production :

npm run build

Une fois que vous l’avez lancée, elle effectue quelques tâches. Par exemple, elle transpose votre JavaScript, compile votre Sass et votre SCSS en CSS, minifie toutes tes ressources et génère des cartes de source. À la fin, le tout est publié dans le fichier build/index.js. Le processus de construction crée également un fichier build/index.asset.php pour la mise en cache.

Le paquetage wp-scripts fournit également plusieurs commandes de linting pour vous aider à maintenir un code de haute qualité :

  • npm run lint:js. Vous l’utilisez pour lister vos fichiers JavaScript.
  • npm run lint:css. Cette commande permet de lister vos fichiers CSS ou Sass.
  • npm run lint:pkg-json. Ceci valide votre fichier package.json.

Pour les tests unitaires, vous appellez simplement npm run test, qui utilise Jest pour exécuter votre suite de tests.

Exploration des utilitaires de base dans wp-scripts

Les tâches de construction de base peuvent vous prendre beaucoup de temps, et les commandes typiques nécessiteront beaucoup d’automatisation. Cependant, wp-scripts fournit une suite d’utilitaires sophistiqués qui répondront aux besoins complexes de votre développement WordPress :

  • Compilation avancée. Avec des configurations optimisées, vous pouvez transpiler le JavaScript moderne – y compris les modules ECMAScript (ESM) et Javascript XML (JSX) – et compiler Sass.
  • Regroupement intelligent . Vous pouvez tirer parti du fractionnement du code et du « tree shaking » de webpack pour optimiser la livraison de vos ressources.
  • Linting complet. Vous pouvez faire respecter les normes de codage dans les fichiers JavaScript, CSS et package.json.
  • Tests intégrés. Avec Jest, vous pouvez exécuter des tests unitaires et des rapports de couverture.
  • Serveur de développement. Vous pouvez utiliser le rechargement à chaud pour un développement rapide sur plusieurs projets.

Vous pouvez étendre les fonctionnalités par défaut de chacun pour tirer parti d’un processus de développement WordPress plus personnalisé, que vous travailliez sur des thèmes ou des extensions.

Gestion de JSX et de JavaScript moderne

De nombreux projets WordPress travaillent avec des éléments JavaScript modernes tels que les composants React, les fonctions fléchées, la déstructuration, async/await, et bien plus encore. Même certains aspects du code de base, comme l’éditeur de blocs, utilisent du JavaScript moderne pour construire ses fonctionnalités.

Cependant, les navigateurs ne comprennent pas nativement ces syntaxes avancées, et un travail supplémentaire est donc nécessaire pour les transpiler et les compiler.

JSX vous permet d’écrire un code de type HTML dans ton JavaScript, ce qui facilite la description de ce à quoi vos interfaces et autres éléments doivent ressembler. Cela peut améliorer la lisibilité et la maintenabilité, pour commencer. Vous pouvez également accéder à de puissants composants React pour créer des interfaces utilisateur (IU) dynamiques.

wp-scripts utilise le compilateur JavaScript Babel pour transpiler vogtre JavaScript et ton JSX modernes en un code que les navigateurs peuvent comprendre. Il s’occupe de toute la configuration complexe et nécessaire, ce qui vous permet de te concentrer sur l’écriture du code.

Vous pouvez en tirer parti grâce à votre fichier src/index.js . Jettez un coup d’œil à ce petit exemple de mise en œuvre de JSX et de JavaScript moderne à l’aide de 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);
}

Vous devez également mettre le script en file d’attente dans le fichier functions.php de votre thème, ou dans le fichier principal de votre extension :

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

Une fois que vous aurez exécuté la commande npx wp-scripts build, wp-scripts transposera votre JavaScript et votre JSX modernes pour créer un fichier build/index.js compatible avec les navigateurs.

Contrôles de la qualité du code et mise en place d’un système sophistiqué d’évaluation de la qualité (linting)

Le paquetage wp-scripts comprend plusieurs outils pour vous aider à maintenir un code de qualité et à appliquer un style cohérent dans tous vos projets : En plus d’ESLint et de Prettier, vous pouvez également accéder à stylelint pour l’analyse CSS et SCSS.

La première étape consiste à ajouter les scripts de linting à votre fichier package.json:

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

Ensuite, créez des fichiers de configuration personnalisés dans le répertoire racine de votre projet. Par exemple, ESLint exige que vous travailliez dans le fichier .eslintrc.js. Cet exemple (en partie) impose l’utilisation de littéraux de modèle pour les chaînes de caractères dans votre code JavaScript :

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

Pour stylelint, vous modifiez le fichier .stylelintrc.js:

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

Si vous maintenez une base de code importante à travers plusieurs projets, il est crucial d’avoir un style de code cohérent. Ainsi, vous pouvez étendre les configurations ESLint et stylelint par défaut pour faire respecter les normes de codage de votre agence.

À partir de là, vous pouvez lancer npm run lint pour mettre ce processus en marche, en l’étendant au type de linter spécifique. Par exemple, si vous avez un code qui énonce une concaténation typique…

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

…l’exécution de npm run lint:js signalera une erreur et vous suggérera d’utiliser un modèle littéral à la place :

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

C’est un moyen inestimable de vérifier le code de votre thème ou de votre extension WordPress et cela vous permet d’adapter les ensembles de règles à vos besoins et à vos normes spécifiques.

Tests unitaires

Les tests unitaires sont essentiels pour assurer la fiabilité et la maintenabilité de votre code. Les outils que wp-scripts utilise comme cadre de test sont Jest.

Lorsque vous exécutez la commande test, Jest recherche des fichiers portant l’extension .test.js ou .spec.js, ou des fichiers dans un répertoire __tests__. Il exécute ensuite les tests définis dans ces fichiers et rapporte les résultats.

Vous devez d’abord faire référence au script de test dans votre fichier package.json:

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

Si nécessaire, créez un fichier tel que src/utils.js:

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

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

À partir de là, créez un fichier de test, tel que 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);
  });
});

Une fois que vous aurez exécuté la commande npm run test, wp-scripts trouvera et exécutera automatiquement tous les fichiers portant l’extension .test.js. Vous pouvez également étendre la configuration Jest par défaut pour prendre en charge tout besoin de test avancé, tel que la couverture des tests :

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

Cette configuration ajoute un fichier d’installation personnalisé, spécifie les fichiers à inclure dans les rapports de couverture et définit des seuils de couverture pour assurer une couverture complète des tests dans vos projets. Lorsque tu exécutes ces tests, Jest fournit des résultats qui indiquent les tests réussis et ceux qui échouent.

Étendre les capacités de tes tests unitaires de cette manière peut offrir une amélioration significative de la qualité et de la fiabilité de vos thèmes et extensions WordPress et rationaliser l’ensemble de votre processus de développement.

Comment intégrer wp-scripts dans vos processus de travail ?

Le champ d’application de l’utilisation des wp-scripts est aussi vaste que vous en avez besoin. Pour illustrer cela, passons en revue quelques approches rapides que vous pourriez adopter en utilisant wp-scripts pour automatiser des tâches typiques.

Création de modèles de projets réutilisables

Vous aurez probablement besoin de démarrer de nouveaux projets fréquemment – peut-être même tous les jours. La création d’un modèle de projet personnalisé par le biais de la pré-configuration de wp-scripts peut vous faire gagner beaucoup de temps de configuration.

Vous pouvez commencer par un projet de base : un nouveau thème ou extension WordPress qui inclut votre configuration de wp-scripts:

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

Ensuite, mettez en place la structure du projet, et créez les répertoires et les fichiers nécessaires :

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

À ce stade, vous configurez wp-scripts et tu mettez à jour le fichier package.json avec les commandes appropriées :

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

Vous pouvez développer cela pour créer des configurations pour webpack, ESLint et stylelint.

Pour en faire un modèle réutilisable et simple d’accès, un dépôt GitHub est idéal. Par exemple, considérez une origine distante de https://github.com/your-agency/theme-template.git.

Lorsque vous commencez un nouveau projet, vous pouvez exécuter une commande simple :

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

Cela clonera votre répertoire de modèles et mettra en place un nouveau thème avec votre configuration prédéfinie wp-scripts.

Vous pouvez personnaliser davantage le modèle en ajoutant du code de base spécifique à l’agence, comme des fonctions ou des composants couramment utilisés. Il est important de garder ce dépôt de modèles à jour, en utilisant la dernière version de wp-scripts et en mettant en œuvre toutes les améliorations du flux de travail que vous avez décidées.

Contrôle des versions et collaboration

Vous pouvez faire plus lorsqu’il s’agit de wp-scripts et de travailler avec le contrôle des versions. Souvent, cependant, vous devriez mettre en œuvre certaines pratiques typiques pour vous assurer de maintenir la qualité du code à un niveau élevé :

  • Inclure package.json et package-lock.json dans le contrôle de version. Cela garantit que tous les membres de l’équipe utiliseront les mêmes dépendances.
  • Assurez-vous d’inclure les artefacts de construction tels que /build et /node_modules dans votre fichier .gitignore.
  • Assurez-vous de référencer tous les scripts dont vous avez besoin dans votre fichier package.json avant de le valider.
  • Envisagez d’utiliser un fichier .nvmrc pour spécifier la bonne version de Node.js pour votre projet.

Vous pouvez choisir d’implémenter des crochets de pré-commission à l’aide d’outils tels que Husky. C’est un excellent moyen d’exécuter un linter avant chaque validation, pour ne citer qu’un exemple :

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

De cette façon, vous pouvez vous assurer que vous faîtes du lint et que vous exécutez des tests automatiquement avant les commits et les pushes. C’est une autre façon de maintenir la qualité du code au sein de votre équipe.

Intégration et déploiement continus (CI/CD)

L’intégration de wp-scripts dans votre pipeline CI/CD peut rationaliser votre processus de déploiement pour les thèmes et les extensions. Les actions GitHub ne sont qu’un moyen d’intégrer cela à votre configuration wp-scripts.

La première étape consiste à créer un fichier de flux de travail dédié au sein d’un répertoire workflows de votre dépôt :

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/

L’étape de déploiement variera en fonction de votre hébergeur. Vous pouvez utiliser rsync, intégrer des services comme DeployHQ ou Buddy, ou opter pour une simple intégration cURL. Si votre déploiement nécessite des mots de passe ou des clés, vous devez les ajouter en tant que secrets aux paramètres de ton dépôt GitHub.

Ce flux de travail exécute des linters, des tests et construit votre projet à chaque push et pull request. Mieux encore, il ne se déploie que lorsque vous poussez des modifications sur la branche principale.

Création d’un outil d’interface de ligne de commande (CLI) personnalisé

Si vous avez besoin d’outils personnalisés, wp-scripts peut vous aider. Par exemple, vous pouvez vouloir déployer un outil d’interface de ligne de commande personnalisé qui répond aux besoins de votre agence.

Dans certains cas, votre outil aura besoin de certaines dépendances :

npm install @wordpress/scripts commander chalk

Ici, Commander analyse les arguments de la ligne de commande, et chalk améliore l’affichage visuel du texte de sortie.

À partir de là, vous pouvez commencer à coder l’outil à l’aide de wp-scripts. Voici un exemple de ce à quoi ressemblerait ce fichier :

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

L’ajout du champ bin à votre fichier package.json vous permet de faire de l’outil CLI un exécutable :

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

Pour lier l’outil CLI à une installation locale, vous pouvez simplement exécuter npm link. Vous pouvez maintenant tester l’outil CLI dans votre application Terminal :

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

Vous devriez publier l’outil dans un registre npm privé pour que les autres membres de l’équipe puissent l’installer à leur guise :

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

Lorsque vous en aurez besoin, il vous suffira d’exécuter npm install --save-dev agency-wp-cli pour installer votre outil. À partir de là, vous pouvez faire référence à l’interface de programmation dans package.json:

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

La création et l’utilisation d’un outil comme celui-ci permet de s’assurer que tous les membres de votre agence utilisent les mêmes commandes et processus. Cela peut réduire les incohérences et rationaliser encore plus votre flux de travail de développement WordPress.

Optimisation des performances

Lorsque vous gérez plusieurs sites WordPress à fort trafic, l’optimisation de vos performances devient cruciale pour votre prestation. Il existe plusieurs techniques avancées que wp-scripts peut vous aider à mettre en œuvre.

Fractionnement avancé du code

Par exemple, le fractionnement du code vous permet de diviser votre paquet JavaScript en plus petits morceaux, que vous pouvez charger à la demande. Cela peut améliorer vos temps de chargement initiaux, en particulier pour les applications volumineuses.

Tout d’abord, modifiez votre fichier webpack.config.js pour activer le fractionnement du code :

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

Tout au long de votre code JavaScript, vous utilisez des importations dynamiques pour le diviser en morceaux plus petits :

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

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

Vous devez également mettre en file d’attente chaque fractionnement dans vos fichiers 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');

Cela devrait vous permettre de réduire les temps de chargement et ne prend pas trop de temps à mettre en place non plus.

Tree Shaking

Dans le contexte de JavaScript, le « tree shaking » est la façon dont vous vous débarrassez du code inutilisé. Les sites wp-scripts et webpack effectuent tous les deux du tree shaking pour les versions de production, mais vous pouvez l’optimiser davantage. L’application est plus complexe que ce que nous donnons ici, mais quoi qu’il en soit, vous voulez vous assurer que vous utilisez la syntaxe d’importation et d’exportation ES6 :

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

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

Ensuite, spécifiez les fichiers qui ont des « effets secondaires »

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

…ou indiquez qu’il n’y a pas d’effets secondaires :

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

Certaines grandes bibliothèques ne prennent pas en charge le tree shaking, aussi bien que d’autres. Dans ces cas-là, vous devez utiliser une extension spécifique pour ce travail :

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

Cela signifie également que vous devez mettre à jour vos fichiers de configuration babel pour une installation optimale et sans erreur.

Optimisation des ressources

Le processus de construction de wp-scripts minimisera les fichiers CSS et JavaScript pour vous, et vous pouvez aller plus loin. Par exemple, vous pouvez installer une extension spécifique d’optimisation des images :

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

Une fois que vous l’avez ajouté à votre fichier de configuration webpack, vous pouvez utiliser les indices de ressources en ajoutant le bon code à votre fichier functions.php ou au fichier principal de l’extension :

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

Une tâche comme celle-ci montre la flexibilité dont vous disposez avec wp-scripts, dans la mesure où vous pouvez l’adapter aux besoins de votre agence ou de votre projet.

Analysez la taille des paquets

Comprendre la composition de votre bundle est crucial pour l’optimisation. Avec wp-scripts, vous pouvez vous faciliter la tâche grâce à l’indicateur --analyze.

npm run build -- --analyze

La première étape consiste à ajouter le script correspondant à votre fichier package.json:

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

Une fois que vous aurez exécuté la commande analyze, elle générera un rapport qui indiquera la taille de chaque module de votre bundle. Cette mise en œuvre simple vous aide à identifier les domaines à optimiser.

Mise en œuvre du CSS critique

Le CSS critique de votre site est le strict minimum dont votre page a besoin pour charger le contenu au-dessus du pli. Le fait de mettre cette feuille de style CSS en ligne peut améliorer le temps de chargement perçu.

Pour y parvenir, il faut utiliser l’extension Webpack CSS critique:

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

Le prochain travail consiste à mettre à jour votre fichier de configuration webpack pour référencer l’extension :

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

Pour l’utiliser, vous devez ajouter un extrait à votre fichier header.php:

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

Cela permet d’extraire et d’intégrer des feuilles de style CSS critiques pour un rendu initial plus rapide. Il génère des feuilles de style CSS critiques pour des tailles de fenêtres spécifiques, ce qui peut améliorer le temps de chargement perçu de vos thèmes.

Résumé

Pour le développement d’une agence, wp-scripts peut être un outil puissant qui peut améliorer considérablement votre flux de travail pour les projets de thèmes et d’extensions. En fournissant un processus de construction standardisé, une prise en charge moderne du JavaScript et des outils de test et de linting intégrés, wp-scripts vous permet de vous concentrer sur la création de projets WordPress de haute qualité tout en automatisant certaines des tâches les plus importantes.

L’utilisation de wp-scripts ne vous aide pas seulement à suivre les pratiques de développement modernes. C’est un moyen de vous positionner à l’avant-garde du développement WordPress, prêt à relever les défis et les opportunités auxquels votre agence doit faire face.

Est-ce que wp-scripts offre les fonctionnalités et la portée dont vous avez besoin pour les projets de développement de votre agence ? Partagez vos réflexions avec nous dans la section des commentaires ci-dessous !

Steve Bonisteel Kinsta

Steve Bonisteel est un rédacteur technique chez Kinsta qui a commencé sa carrière d'écrivain en tant que journaliste de presse écrite, chassant les ambulances et les camions de pompiers. Il couvre les technologies similaires à l'Internet depuis la fin des années 1990.