{"id":78765,"date":"2024-12-02T10:21:30","date_gmt":"2024-12-02T09:21:30","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=78765&#038;preview=true&#038;preview_id=78765"},"modified":"2024-12-10T15:29:16","modified_gmt":"2024-12-10T14:29:16","slug":"developpement-wp-scripts","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/","title":{"rendered":"D\u00e9veloppement avanc\u00e9 de WordPress : comment construire votre prochain projet avec wp-scripts"},"content":{"rendered":"<p>Le travail de d\u00e9veloppement WordPress pour les agences peut \u00eatre comp\u00e9titif dans le meilleur des cas. Il exige une efficacit\u00e9 et une coh\u00e9rence supr\u00eames sur plusieurs projets de clients.<\/p>\n<p>Quelle que soit votre exp\u00e9rience en tant que d\u00e9veloppeur, la gestion d&rsquo;un portefeuille entier de th\u00e8mes et d&rsquo;extensions personnalis\u00e9s n\u00e9cessite toujours un effort perp\u00e9tuel lorsqu&rsquo;il s&rsquo;agit de rationaliser le flux de travail. Entre en sc\u00e8ne <code>wp-scripts<\/code>: une puissante suite d&rsquo;utilitaires qui peut r\u00e9volutionner la fa\u00e7on dont votre agence aborde le d\u00e9veloppement WordPress.<\/p>\n<p>Ce guide complet examine les capacit\u00e9s de <code>wp-scripts<\/code>, et explore des techniques pour tes processus de construction. Tout au long de l&rsquo;ouvrage, il sera question d&rsquo;optimisation de la compilation et du regroupement, de linting automatis\u00e9, de tests unitaires, et de bien d&rsquo;autres choses encore &#8211; tout cela vous parlera si vous jonglez avec de multiples projets WordPress \u00e0 fort enjeu.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Le concept de processus de construction<\/h2>\n<p>Avant de nous pencher sur les sp\u00e9cificit\u00e9s de <code>wp-scripts<\/code>, comprenons le concept plus large du processus de construction de ton d\u00e9veloppement web. Il s&rsquo;agit d&rsquo;une s\u00e9rie de t\u00e2ches automatis\u00e9es qui vous aident \u00e0 transformer votre code source en une application ou un site web pr\u00eat pour la production.<\/p>\n<p>Par exemple, il existe de nombreux emplois qui b\u00e9n\u00e9ficient de l&rsquo;automatisation de cette mani\u00e8re :<\/p>\n<ul>\n<li>Compilation de JavaScript moderne en code compatible avec les navigateurs.<\/li>\n<li>Transposer les langages de pr\u00e9processeur CSS (<a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sass<\/a>, par exemple) en CSS standard.<\/li>\n<li>Minifier et optimiser les ressources telles que <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>, CSS et les m\u00e9dias.<\/li>\n<li>Ex\u00e9cuter des linters pour d\u00e9tecter les erreurs potentielles et appliquer les normes de codage.<\/li>\n<li>Ex\u00e9cuter des <a href=\"https:\/\/kinsta.com\/fr\/blog\/tests-unitaires-laravel\/\">tests unitaires<\/a> pour garantir une meilleure fonctionnalit\u00e9 du code.<\/li>\n<\/ul>\n<p>Ce sont de bons aspects \u00e0 automatiser pour tout <a href=\"https:\/\/kinsta.com\/fr\/blog\/flux-travail-wordpress\/\">flux de travail de d\u00e9veloppement<\/a>, mais pour les agences, le processus est tout aussi crucial. Pour commencer, vous pouvez maintenir la coh\u00e9rence entre plusieurs projets (et votre \u00e9quipe).<\/p>\n<p>Vous pouvez aussi d\u00e9velopper et d\u00e9ployer \u00e0 travers des cycles plus rapides et maintenir tous vos projets en tirant parti de cette coh\u00e9rence, m\u00eame les plus complexes. Pour l&rsquo;utilisateur final, les performances optimis\u00e9es que vous obtenez se r\u00e9percutent sur son exp\u00e9rience globale.<\/p>\n<p>G\u00e9n\u00e9ralement, votre agence peut \u00ab bricoler \u00bb des processus de construction personnalis\u00e9s \u00e0 l&rsquo;aide d&rsquo;outils tels que <a href=\"https:\/\/community.kinsta.com\/t\/install-node-and-gulp\/2804\" target=\"_blank\" rel=\"noopener noreferrer\">Gulp<\/a>, <a href=\"https:\/\/gruntjs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Grunt<\/a>, ou m\u00eame des processus manuels. Cependant, ces approches peuvent souvent entra\u00eener des incoh\u00e9rences entre les projets, sans parler des frais g\u00e9n\u00e9raux de maintenance importants.<\/p>\n<h2>wp-scripts : un changement de flux de travail pour le d\u00e9veloppement de WordPress au sein d&rsquo;une agence<\/h2>\n<p>Dans le contexte de WordPress, un processus de construction peut \u00e9galement offrir une rationalisation significative pour le d\u00e9veloppement de th\u00e8mes et d&rsquo;extensions. Il vous permet d&rsquo;utiliser des outils et des pratiques modernes tout en assurant la compatibilit\u00e9 de la plateforme.<\/p>\n<p>Le paquetage <code>@wordpress\/scripts<\/code> &#8211; <code>wp-scripts<\/code> tout au long de cet article &#8211; est une collection de fichiers de configuration et de scripts qui vous aide \u00e0 simplifier le processus de construction pour les projets WordPress.<\/p>\n<figure id=\"attachment_186951\" aria-describedby=\"caption-attachment-186951\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-186951 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/wp-scripts.png\" alt=\"Un extrait de code affichant la section scripts d'un fichier package.json pour un projet WordPress. Il r\u00e9pertorie divers scripts npm pour des t\u00e2ches telles que la construction, la v\u00e9rification des moteurs et des licences, le formatage, l'analyse de la qualit\u00e9 (pour CSS, JavaScript, les documents Markdown et package.json), la mise \u00e0 jour des paquets, la cr\u00e9ation de fichiers zip de plugins, le d\u00e9marrage du projet et l'ex\u00e9cution de tests (\u00e0 la fois de bout en bout et unitaires). Tous les scripts utilisent wp-scripts comme commande de base.\" width=\"1200\" height=\"842\"><figcaption id=\"caption-attachment-186951\" class=\"wp-caption-text\">Partie d&rsquo;une r\u00e9f\u00e9rence wp-scripts pour les diff\u00e9rents scripts qu&rsquo;un projet utilisera.<\/figcaption><\/figure>\n<p>L&rsquo;\u00e9quipe Make WordPress Core d\u00e9veloppe et maintient le package, qui fait partie int\u00e9grante des \u00e9diteurs de blocs et de sites. Mieux encore, vous pouvez aussi l&rsquo;utiliser pour le d\u00e9veloppement de th\u00e8mes et d&rsquo;extensions personnalis\u00e9s.<\/p>\n<p>Pour aborder le d\u00e9veloppement de WordPress \u00e0 grande \u00e9chelle au sein d&rsquo;une agence, <code>wp-scripts<\/code> sera un \u00e9l\u00e9ment central du flux de travail. C&rsquo;est plus qu&rsquo;un simple outil de construction, c&rsquo;est une solution compl\u00e8te pour les projets WordPress modernes qui s&rsquo;aligne sur le besoin d&rsquo;un flux de travail de d\u00e9veloppement sophistiqu\u00e9.<\/p>\n<h3>Les principales fonctionnalit\u00e9s de wp-scripts<\/h3>\n<p>Au fur et \u00e0 mesure que des pratiques JavaScript plus modernes s&rsquo;infiltrent dans l&rsquo;\u00e9cosyst\u00e8me WordPress, nous avons besoin d&rsquo;outils de construction plus standardis\u00e9s pour les prendre en compte. Un ensemble d&rsquo;outils de construction unifi\u00e9s sous la forme de <code>wp-scripts<\/code> profite \u00e0 l&rsquo;ensemble de l&rsquo;\u00e9cosyst\u00e8me de d\u00e9veloppement de WordPress.<\/p>\n<p>En tant que tel, <code>wp-scripts<\/code> offre une gamme de fonctionnalit\u00e9s qui rendent le d\u00e9veloppement de WordPress plus efficace :<\/p>\n<ul>\n<li><strong>Installation \u00ab z\u00e9ro configuration \u00bb.<\/strong> Vous pouvez commencer sans avoir besoin de configurations <a href=\"https:\/\/kinsta.com\/fr\/blog\/vite-vs-webpack\/\">webpack<\/a> complexes.<\/li>\n<li><strong>Prise en charge de JavaScript moderne.<\/strong> Votre code ES6 sera transpil\u00e9 pour la compatibilit\u00e9 avec les navigateurs, et vous donnera une plus grande confiance dans son exactitude.<\/li>\n<li><strong>Traitement CSS int\u00e9gr\u00e9.<\/strong> Si vous utilisez des pr\u00e9processeurs CSS tels que Sass, vous b\u00e9n\u00e9ficiez d&rsquo;une prise en charge imm\u00e9diate.<\/li>\n<li><strong>Outils de qualit\u00e9 du code.<\/strong> Le paquet int\u00e8gre \u00e0 la fois <a href=\"https:\/\/kinsta.com\/fr\/blog\/vscode-extensions\/#1-prettier\">ESLint et Prettier<\/a> pour un style et une qualit\u00e9 de code coh\u00e9rents.<\/li>\n<li><strong>Utilitaires de test.<\/strong> Vous avez <a href=\"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/\">Jest<\/a> disponible dans le package pour les tests unitaires et une ex\u00e9cution facile.<\/li>\n<li><strong>Rechargement \u00e0 chaud.<\/strong> Si vous avez la possibilit\u00e9 de recharger tes modifications en direct, cela peut acc\u00e9l\u00e9rer votre temps de d\u00e9veloppement.<\/li>\n<\/ul>\n<p>Combin\u00e9, <code>wp-scripts<\/code> offre de nombreux avantages cl\u00e9s pour les agences qui g\u00e8rent plusieurs projets WordPress. Par exemple, vous pouvez normaliser votre environnement de d\u00e9veloppement pour chaque projet et reproduire le processus de construction pour tout nouveau projet. Le paquet vous permettra de centraliser les d\u00e9pendances de votre outil de construction, ce qui rend les mises \u00e0 jour et les correctifs de s\u00e9curit\u00e9 plus faciles \u00e0 g\u00e9rer.<\/p>\n<p>Dans l&rsquo;ensemble, vous pouvez moins vous inqui\u00e9ter des probl\u00e8mes de compatibilit\u00e9, r\u00e9duire votre temps d&rsquo;installation et \u00e9radiquer la plupart des erreurs typiques que vous commetez tout au long du processus de construction moins rationalis\u00e9.<\/p>\n<h3>Comparaison entre wp-scripts et un processus de d\u00e9veloppement WordPress classique<\/h3>\n<p>Le d\u00e9veloppement typique de WordPress implique souvent l&rsquo;utilisation d&rsquo;une <a href=\"https:\/\/kinsta.com\/fr\/blog\/wp-enqueue-scripts\/\">file d&rsquo;attente manuelle pour les scripts et les styles<\/a>. De plus, vous \u00e9crirez probablement du <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-javascript\/\">vanilla JavaScript<\/a> ou du <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-jquery\/\">jQuery<\/a>, et vous aurez recours \u00e0 des outils de construction tiers &#8211; ou pas de processus de construction du tout.<\/p>\n<p>En revanche, wp-scripts offre une approche moderne et int\u00e9gr\u00e9e dans presque tous les domaines :<\/p>\n<table>\n<tbody>\n<tr>\n<td>\u00c9l\u00e9ment<\/td>\n<td>D\u00e9veloppement typique<\/td>\n<td>wp-scripts<\/td>\n<\/tr>\n<tr>\n<td>JavaScript<\/td>\n<td>Souvent du vanilla JavaScript ou du jQuery<\/td>\n<td>Prise en charge de ES6 et de React<\/td>\n<\/tr>\n<tr>\n<td>CSS<\/td>\n<td>CSS direct ou pr\u00e9processeurs de base<\/td>\n<td>Prise en charge des traitements Sass et PostCSS<\/td>\n<\/tr>\n<tr>\n<td>Processus de construction<\/td>\n<td>Une configuration manuelle ou personnalis\u00e9e \u00e0 l&rsquo;aide de Gulp ou Grunt.<\/td>\n<td>Une configuration z\u00e9ro \u00e0 l&rsquo;aide de webpack, int\u00e9gr\u00e9 dans le paquet.<\/td>\n<\/tr>\n<tr>\n<td>Qualit\u00e9 du code<\/td>\n<td>Linting manuel ou outils s\u00e9par\u00e9s int\u00e9gr\u00e9s \u00e0 ton \u00e9diteur de code.<\/td>\n<td>ESLint et Prettier sont int\u00e9gr\u00e9s dans les scripts wp.<\/td>\n<\/tr>\n<tr>\n<td>Tests unitaires<\/td>\n<td>S&rsquo;il ne s&rsquo;agit pas d&rsquo;une \u00e9tape n\u00e9glig\u00e9e, il y a g\u00e9n\u00e9ralement une configuration s\u00e9par\u00e9e<\/td>\n<td>Le paquet int\u00e8gre les tests Jest<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Dans l&rsquo;ensemble, <code>wp-scripts<\/code> offre une plus grande flexibilit\u00e9 gr\u00e2ce \u00e0 son int\u00e9gration avec des outils que vous n&rsquo;utilisez peut-\u00eatre pas d\u00e9j\u00e0. Par exemple, l&rsquo;effort de configuration de <a href=\"https:\/\/postcss.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">PostCSS<\/a>, <a href=\"https:\/\/webpack.js.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">webpack<\/a> ou <a href=\"https:\/\/jestjs.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jest<\/a> pourrait \u00eatre quelque chose que vous ignorez par manque de temps.<\/p>\n<h2>Comment configurer ton environnement de d\u00e9veloppement pour y int\u00e9grer des scripts wp ?<\/h2>\n<p>L&rsquo;utilisation de <code>wp-scripts<\/code> a ses propres exigences, mais il est probable que vous utilisez d\u00e9j\u00e0 ces outils. Si vous en avez besoin, installez <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-installer-node-js\/\">Node.js et npm<\/a> ainsi qu&rsquo;un environnement de d\u00e9veloppement WordPress local. <a href=\"https:\/\/kinsta.com\/fr\/devkinsta\/\">DevKinsta<\/a> sera une bonne solution, gr\u00e2ce \u00e0 son fonctionnement sur <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-docker\/\">Docker<\/a> et \u00e0 la prise en charge des environnements de staging de Kinsta.<\/p>\n<figure id=\"attachment_186952\" aria-describedby=\"caption-attachment-186952\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-186952 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/devkinsta-interface.png\" alt=\"L'interface DevKinsta affiche les informations relatives \u00e0 un site WordPress. Elle comprend le type de site, le type de base de donn\u00e9es, le serveur web et la version PHP. La partie sup\u00e9rieure de l'interface affiche les boutons Ouvrir le site, Synchroniser, Gestionnaire de base de donn\u00e9es et Admin WP. Un petit aper\u00e7u du site web est affich\u00e9 sur le c\u00f4t\u00e9 gauche. Le bas de l'interface comporte une section Statut du site avec un bouton Arr\u00eater le site.\" width=\"1200\" height=\"689\"><figcaption id=\"caption-attachment-186952\" class=\"wp-caption-text\">L&rsquo;interface principale de DevKinsta.<\/figcaption><\/figure>\n<p>Si vous utilisez d\u00e9j\u00e0 le paquetage <code>create-block<\/code> pour <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/\">d\u00e9velopper des extensions WordPress de blocs<\/a>, cela installe <code>wp-scripts<\/code> avec ses autres ressources. \u00c0 partir de l\u00e0, vous pouvez commencer \u00e0 mettre en place un projet de d\u00e9veloppement de paquet.<\/p>\n<h3>Mise en place d&rsquo;un nouveau projet WordPress avec wp-scripts<\/h3>\n<p>Le travail que vous entreprendrez se fera dans le r\u00e9pertoire <strong>wp-content<\/strong> de votre installation WordPress. Le sous-r\u00e9pertoire sp\u00e9cifique correspond au type de projet que vous avez cr\u00e9\u00e9 : <strong>wp-content\/themes<\/strong> pour les th\u00e8mes et <strong>wp-content\/plugins<\/strong> pour les extensions !<\/p>\n<p>Quoi qu&rsquo;il en soit, le dossier de votre projet doit comprendre un certain nombre de fichiers et de r\u00e9pertoires :<\/p>\n<ul>\n<li>Un fichier <code>package.json<\/code>.<\/li>\n<li>Un r\u00e9pertoire <strong>build<\/strong>.<\/li>\n<li>Un r\u00e9pertoire <strong>src<\/strong> qui comprend \u00e9galement un fichier <code>index.js<\/code>.<\/li>\n<\/ul>\n<p>Pour cr\u00e9er un fichier <code>package.json<\/code>, naviguez dans le r\u00e9pertoire de votre projet \u00e0 l&rsquo;aide de votre terminal ou d&rsquo;une application de ligne de commande. L&rsquo;ex\u00e9cution de la commande <code>npm init<\/code> vous emm\u00e8nera dans un processus d&rsquo;installation interactif, et votre \u00ab point d&rsquo;entr\u00e9e \u00bb devrait \u00eatre <code>build\/index.js<\/code>:<\/p>\n<figure id=\"attachment_186953\" aria-describedby=\"caption-attachment-186953\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-186953 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/npm-init.png\" alt=\"Fen\u00eatre de terminal sur fond sombre montrant la sortie d'une commande npm init pour un projet de th\u00e8me WordPress. Le texte explique que cet utilitaire guidera l'utilisateur dans la cr\u00e9ation d'un fichier package.json, en couvrant les \u00e9l\u00e9ments courants et en sugg\u00e9rant des valeurs par d\u00e9faut raisonnables. Il fournit des instructions sur la mani\u00e8re d'installer les paquets et de les enregistrer en tant que d\u00e9pendances. Le terminal affiche les d\u00e9tails de l'installation initiale, y compris le nom, la version, la description et le point d'entr\u00e9e du paquet.\" width=\"1200\" height=\"420\"><figcaption id=\"caption-attachment-186953\" class=\"wp-caption-text\">Une ex\u00e9cution partielle du processus npm init, montrant l&rsquo;invite de valeur du point d&rsquo;entr\u00e9e.<\/figcaption><\/figure>\n<p>Ensuite, installez <code>wp-scripts<\/code> comme d\u00e9pendance de d\u00e9veloppement :<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/scripts --save-dev\n<\/code><\/pre>\n<p>Vous devriez \u00e9galement voir quelques r\u00e9pertoires et fichiers g\u00e9n\u00e9r\u00e9s automatiquement : <strong>node_modules<\/strong>, et <code>package-lock.json<\/code>. Quoi qu&rsquo;il en soit, vous devez maintenant faire r\u00e9f\u00e9rence aux scripts pr\u00e9d\u00e9finis dans le fichier <code>package.json<\/code>:<\/p>\n<pre><code class=\"language-json\">\"scripts\": {\n  \"build\": \"wp-scripts build\",\n  \"start\": \"wp-scripts start\",\n}\n<\/code><\/pre>\n<p>Vous reviendrez probablement souvent \u00e0 ce fichier pour ajouter d&rsquo;autres scripts au fur et \u00e0 mesure des besoins. Par exemple :<\/p>\n<pre><code class=\"language-json\">\u2026\n\n\"lint:js\": \"wp-scripts lint-js\",\n\"lint:css\": \"wp-scripts lint-style\",\n\"lint:pkg-json\": \"wp-scripts lint-pkg-json\",\n\"test\": \"wp-scripts test-unit-js\"\n\u2026\n<\/code><\/pre>\n<p>Vous pouvez aussi avoir besoin de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/enqueueing-assets-in-the-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">mettre en file d&rsquo;attente les ressources de votre th\u00e8me ou de votre extension<\/a> ici, puis d&rsquo;enregistrer vos modifications.<\/p>\n<h3>Comprendre et utiliser webpack avec wp-scripts<\/h3>\n<p>Pour regrouper les ressources sous le capot, <code>wp-scripts<\/code> utilise webpack. Vous n&rsquo;avez pas besoin de le configurer, mais comprendre son r\u00f4le peut vous aider \u00e0 exploiter <code>wp-scripts<\/code> de mani\u00e8re plus efficace. Webpack a beaucoup de responsabilit\u00e9s lorsqu&rsquo;il s&rsquo;agit de votre configuration :<\/p>\n<ul>\n<li>Il aide \u00e0 r\u00e9soudre les d\u00e9pendances entre vos modules JavaScript.<\/li>\n<li>Il vous permet de transpiler du JavaScript moderne en code compatible avec les navigateurs.<\/li>\n<li>Il aidera \u00e0 traiter et \u00e0 optimiser vos styles.<\/li>\n<li>Vous \u00eates en mesure de g\u00e9n\u00e9rer des cartes de source pour d\u00e9boguer plus facilement.<\/li>\n<li>Il peut vous aider \u00e0 cr\u00e9er des bundles minifi\u00e9s pr\u00eats pour la production.<\/li>\n<\/ul>\n<p>Vous avez d\u00e9j\u00e0 une configuration webpack par d\u00e9faut au sein de <code>wp-scripts<\/code>. Cela fonctionne bien pour la plupart des projets WordPress. Mais dans certains cas, vous pouvez avoir besoin de cr\u00e9er des configurations personnalis\u00e9es.<\/p>\n<h3>Configuration webpack avanc\u00e9e pour les configurations d&rsquo;agence<\/h3>\n<p>Bien que la config webpack par d\u00e9faut soit id\u00e9ale pour la majorit\u00e9 des projets de d\u00e9veloppement, il y a des moments o\u00f9 vous devez cr\u00e9er une configuration pour vos besoins sp\u00e9cifiques. Par exemple, vous pouvez avoir affaire \u00e0 des structures de th\u00e8mes complexes ou \u00e0 des architectures d&rsquo;extenbsions uniques. C&rsquo;est l\u00e0 qu&rsquo;un fichier <code>webpack.config.js<\/code> \u00e0 la racine de votre projet vous sera utile :<\/p>\n<pre><code class=\"language-js\">const defaultConfig = require(\"@wordpress\/scripts\/config\/webpack.config\");\n\nconst path = require('path');\n\n\nmodule.exports = {\n  ...defaultConfig,\n  entry: {\n    main: path.resolve(__dirname, 'src\/js\/main.js'),\n    admin: path.resolve(__dirname, 'src\/js\/admin.js'),\n    \/\/ Add more entry points as needed\n  },\n  output: {\n    filename: '[name].js',\n    path: path.resolve(__dirname, 'dist'),\n  },\n  \/\/ Add custom loaders or plugins here\n};\n<\/code><\/pre>\n<p>Cette configuration permet d&rsquo;avoir plusieurs points d&rsquo;entr\u00e9e, ce qui est particuli\u00e8rement utile pour les th\u00e8mes ou les extensions n\u00e9cessitant des scripts distincts pour diff\u00e9rentes parties de l&rsquo;administration ou de l&rsquo;interface publique de WordPress. Ainsi, vous pouvez \u00e9tendre votre configuration par d\u00e9faut et conserver les avantages de <code>wp-scripts<\/code>.<\/p>\n<h2>Les bases de l&rsquo;utilisation des scripts wp<\/h2>\n<p>Avec un environnement de d\u00e9veloppement appropri\u00e9 et la bonne structure de fichiers et de dossiers en place, vous pouvez commencer \u00e0 utiliser <code>wp-scripts<\/code>. Il existe quelques commandes de base qui vous permettront de passer le plus clair de votre temps.<\/p>\n<p>La commande <code>start<\/code> surveille les modifications apport\u00e9es \u00e0 vos fichiers, recompile les \u00e9l\u00e9ments \u00e0 la vol\u00e9e et permet le rechargement \u00e0 chaud pour une exp\u00e9rience de d\u00e9veloppement plus fluide :<\/p>\n<pre><code class=\"language-bash\">npm run start<\/code><\/pre>\n<p>Vous l&rsquo;utilisez au d\u00e9but d&rsquo;un projet pour d\u00e9marrer un serveur de d\u00e9veloppement, bien qu&rsquo;elle n&rsquo;optimise pas le code compil\u00e9 dans votre fichier <strong>build\/index.js<\/strong>.<\/p>\n<p>Lorsque vous devras d\u00e9ployer votre projet, la commande <code>build<\/code> compilera tes ressources pour la production :<\/p>\n<pre><code class=\"language-bash\">npm run build\n<\/code><\/pre>\n<p>Une fois que vous l&rsquo;avez lanc\u00e9e, elle effectue quelques t\u00e2ches. Par exemple, elle transpose votre JavaScript, compile votre Sass et votre SCSS en CSS, minifie toutes tes ressources et g\u00e9n\u00e8re des <a href=\"https:\/\/web.dev\/articles\/source-maps\" target=\"_blank\" rel=\"noopener noreferrer\">cartes de source<\/a>. \u00c0 la fin, le tout est publi\u00e9 dans le fichier <code>build\/index.js<\/code>. Le processus de construction cr\u00e9e \u00e9galement un fichier <code>build\/index.asset.php<\/code> pour la mise en cache.<\/p>\n<p>Le paquetage <code>wp-scripts<\/code> fournit \u00e9galement plusieurs commandes de linting pour vous aider \u00e0 maintenir un code de haute qualit\u00e9 :<\/p>\n<ul>\n<li><code>npm run lint:js<\/code>. Vous l&rsquo;utilisez pour lister vos fichiers JavaScript.<\/li>\n<li><code>npm run lint:css<\/code>. Cette commande permet de lister vos fichiers CSS ou Sass.<\/li>\n<li><code>npm run lint:pkg-json<\/code>. Ceci valide votre fichier <code>package.json<\/code>.<\/li>\n<\/ul>\n<p>Pour les tests unitaires, vous appellez simplement <code>npm run test<\/code>, qui utilise Jest pour ex\u00e9cuter votre suite de tests.<\/p>\n<h2>Exploration des utilitaires de base dans wp-scripts<\/h2>\n<p>Les t\u00e2ches de construction de base peuvent vous prendre beaucoup de temps, et les commandes typiques n\u00e9cessiteront beaucoup d&rsquo;automatisation. Cependant, <code>wp-scripts<\/code> fournit une suite d&rsquo;utilitaires sophistiqu\u00e9s qui r\u00e9pondront aux besoins complexes de votre d\u00e9veloppement WordPress :<\/p>\n<ul>\n<li><strong>Compilation avanc\u00e9e.<\/strong> Avec des configurations optimis\u00e9es, vous pouvez transpiler le JavaScript moderne &#8211; y compris les modules ECMAScript (ESM) et Javascript XML (JSX) &#8211; et compiler Sass.<\/li>\n<li><strong>Regroupement intelligent .<\/strong> Vous pouvez tirer parti du fractionnement du code et du <a href=\"https:\/\/webpack.js.org\/guides\/tree-shaking\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u00ab tree shaking \u00bb<\/a> de webpack pour optimiser la livraison de vos ressources.<\/li>\n<li><strong>Linting complet.<\/strong> Vous pouvez faire respecter les normes de codage dans les fichiers JavaScript, CSS et <code>package.json<\/code>.<\/li>\n<li><strong>Tests int\u00e9gr\u00e9s.<\/strong> Avec Jest, vous pouvez ex\u00e9cuter des tests unitaires et des rapports de couverture.<\/li>\n<li><strong>Serveur de d\u00e9veloppement.<\/strong> Vous pouvez utiliser le rechargement \u00e0 chaud pour un d\u00e9veloppement rapide sur plusieurs projets.<\/li>\n<\/ul>\n<p>Vous pouvez \u00e9tendre les fonctionnalit\u00e9s par d\u00e9faut de chacun pour tirer parti d&rsquo;un processus de d\u00e9veloppement WordPress plus personnalis\u00e9, que vous travailliez sur des th\u00e8mes ou des extensions.<\/p>\n<h3>Gestion de JSX et de JavaScript moderne<\/h3>\n<p>De nombreux projets WordPress travaillent avec des <a href=\"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/\">\u00e9l\u00e9ments JavaScript modernes<\/a> tels que les <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-tutoriels-react\/\">composants React<\/a>, les fonctions fl\u00e9ch\u00e9es, la d\u00e9structuration, <code>async<\/code>\/<code>await<\/code>, et bien plus encore. M\u00eame certains aspects du code de base, comme l&rsquo;\u00e9diteur de blocs, utilisent du JavaScript moderne pour construire ses fonctionnalit\u00e9s.<\/p>\n<p>Cependant, les navigateurs ne comprennent pas nativement ces syntaxes avanc\u00e9es, et un travail suppl\u00e9mentaire est donc n\u00e9cessaire pour les transpiler et les compiler.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/\">JSX<\/a> vous permet d&rsquo;\u00e9crire un code de type HTML dans ton JavaScript, ce qui facilite la description de ce \u00e0 quoi vos interfaces et autres \u00e9l\u00e9ments doivent ressembler. Cela peut am\u00e9liorer la lisibilit\u00e9 et la maintenabilit\u00e9, pour commencer. Vous pouvez \u00e9galement acc\u00e9der \u00e0 de puissants composants React pour cr\u00e9er des interfaces utilisateur (IU) dynamiques.<\/p>\n<p><code>wp-scripts<\/code> utilise le <a href=\"https:\/\/babeljs.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">compilateur JavaScript Babel<\/a> pour transpiler vogtre JavaScript et ton JSX modernes en un code que les navigateurs peuvent comprendre. Il s&rsquo;occupe de toute la configuration complexe et n\u00e9cessaire, ce qui vous permet de te concentrer sur l&rsquo;\u00e9criture du code.<\/p>\n<p>Vous pouvez en tirer parti gr\u00e2ce \u00e0 votre fichier <code>src\/index.js <\/code>. Jettez un coup d&rsquo;\u0153il \u00e0 ce petit exemple de mise en \u0153uvre de JSX et de JavaScript moderne \u00e0 l&rsquo;aide de <code>wp-scripts<\/code>:<\/p>\n<pre><code class=\"language-js\">import { render } from '@wordpress\/element';\n\n\/\/ Modern JavaScript feature: Arrow function\nconst HelloWorld = () =&gt; {\n    \/\/ Modern JavaScript feature: Template literal\n    const greeting = `Hello, ${wp.data.select('core\/editor').getCurrentPost().title}!`;    \n\n    \/\/ JSX\n    return (\n        &lt;div className=\"hello-world\"&gt;\n            &lt;h1&gt;{greeting}&lt;\/h1&gt;\n            &lt;p&gt;This is a React component in WordPress!&lt;\/p&gt;\n        &lt;\/div&gt;\n    );\n};\n\n\/\/ Modern JavaScript feature: Optional chaining\nconst rootElement = document.getElementById('hello-world-root');\nif (rootElement?.innerHTML) {\n    render(&lt;HelloWorld \/&gt;, rootElement);\n}\n<\/code><\/pre>\n<p>Vous devez \u00e9galement mettre le script en file d&rsquo;attente dans le fichier <strong>functions.php<\/strong> de votre th\u00e8me, ou dans le fichier principal de votre extension :<\/p>\n<pre><code class=\"language-js\">function enqueue_hello_world_script() {\n    wp_enqueue_script(\n        'hello-world-script',\n        get_template_directory_uri() . '\/build\/index.js',\n        ['wp-element'],\n        filemtime(get_template_directory() . '\/build\/index.js'),\n        true\n    );\n}\n\nadd_action('wp_enqueue_scripts', 'enqueue_hello_world_script');<\/code><\/pre>\n<p>Une fois que vous aurez ex\u00e9cut\u00e9 la commande <code>npx wp-scripts build<\/code>, <code>wp-scripts<\/code> transposera votre JavaScript et votre JSX modernes pour cr\u00e9er un fichier <code>build\/index.js<\/code> compatible avec les navigateurs.<\/p>\n<h3>Contr\u00f4les de la qualit\u00e9 du code et mise en place d&rsquo;un syst\u00e8me sophistiqu\u00e9 d&rsquo;\u00e9valuation de la qualit\u00e9 (linting)<\/h3>\n<p>Le paquetage <code>wp-scripts<\/code> comprend plusieurs outils pour vous aider \u00e0 maintenir un code de qualit\u00e9 et \u00e0 appliquer un style coh\u00e9rent dans tous vos projets : En plus d&rsquo;ESLint et de Prettier, vous pouvez \u00e9galement acc\u00e9der \u00e0 <strong>stylelint<\/strong> pour l&rsquo;analyse CSS et SCSS.<\/p>\n<p>La premi\u00e8re \u00e9tape consiste \u00e0 ajouter les scripts de linting \u00e0 votre fichier <code>package.json<\/code>:<\/p>\n<pre><code class=\"language-json\">\"scripts\": {\n  \"lint:js\": \"wp-scripts lint-js\",\n  \"lint:css\": \"wp-scripts lint-style\",\n  \"lint\": \"npm run lint:js && npm run lint:css\"\n}\n<\/code><\/pre>\n<p>Ensuite, cr\u00e9ez des fichiers de configuration personnalis\u00e9s dans le r\u00e9pertoire racine de votre projet. Par exemple, ESLint exige que vous travailliez dans le fichier <code>.eslintrc.js<\/code>. Cet exemple (en partie) impose l&rsquo;utilisation de litt\u00e9raux de mod\u00e8le pour les cha\u00eenes de caract\u00e8res dans votre code JavaScript :<\/p>\n<pre><code class=\"language-js\">\u2026\nmodule.exports = {\n  extends: [\n    'plugin:@wordpress\/eslint-plugin\/recommended',\n  ],\n  rules: {\n    \/\/ Custom rules here\n    'no-console': 'error',\n    'react-hooks\/exhaustive-deps': 'warn',\n    'prefer-template': 'error',\n  },\n};\n\u2026\n<\/code><\/pre>\n<p>Pour stylelint, vous modifiez le fichier <code>.stylelintrc.js<\/code>:<\/p>\n<pre><code class=\"language-js\">\u2026\nmodule.exports = {\n  extends: [\n    '@wordpress\/stylelint-config\/scss',\n  ],\n  rules: {\n    \/\/ Custom rules here\n    'selector-class-pattern': '^[a-z]+(-[a-z]+)*$',\n    'max-nesting-depth': 3,\n  },\n};\n\u2026\n<\/code><\/pre>\n<p>Si vous maintenez une base de code importante \u00e0 travers plusieurs projets, il est crucial d&rsquo;avoir un style de code coh\u00e9rent. Ainsi, vous pouvez \u00e9tendre les configurations ESLint et stylelint par d\u00e9faut pour faire respecter les normes de codage de votre agence.<\/p>\n<p>\u00c0 partir de l\u00e0, vous pouvez lancer <code>npm run lint<\/code> pour mettre ce processus en marche, en l&rsquo;\u00e9tendant au type de linter sp\u00e9cifique. Par exemple, si vous avez un code qui \u00e9nonce une concat\u00e9nation typique&#8230;<\/p>\n<pre><code class=\"language-js\">const name = \"World\";\nconsole.log(\"Hello \" + name + \"!\");\n<\/code><\/pre>\n<p>&#8230;l&rsquo;ex\u00e9cution de <code>npm run lint:js<\/code> signalera une erreur et vous sugg\u00e9rera d&rsquo;utiliser un mod\u00e8le litt\u00e9ral \u00e0 la place :<\/p>\n<pre><code class=\"language-js\">const name = \"World\";\nconsole.log(`Hello ${name}!`);\n<\/code><\/pre>\n<p>C&rsquo;est un moyen inestimable de v\u00e9rifier le code de votre th\u00e8me ou de votre extension WordPress et cela vous permet d&rsquo;adapter les ensembles de r\u00e8gles \u00e0 vos besoins et \u00e0 vos normes sp\u00e9cifiques.<\/p>\n<h3>Tests unitaires<\/h3>\n<p>Les tests unitaires sont essentiels pour assurer la fiabilit\u00e9 et la maintenabilit\u00e9 de votre code. Les outils que <code>wp-scripts<\/code> utilise comme cadre de test sont Jest.<\/p>\n<p>Lorsque vous ex\u00e9cutez la commande <code>test<\/code>, Jest recherche des fichiers portant l&rsquo;extension <code>.test.js<\/code> ou <code>.spec.js<\/code>, ou des fichiers dans un r\u00e9pertoire <strong>__tests__<\/strong>. Il ex\u00e9cute ensuite les tests d\u00e9finis dans ces fichiers et rapporte les r\u00e9sultats.<\/p>\n<p>Vous devez d&rsquo;abord faire r\u00e9f\u00e9rence au script de test dans votre fichier <code>package.json<\/code>:<\/p>\n<pre><code class=\"language-js\">\u2026\n\"scripts\": {\n  \"test\": \"wp-scripts test-unit-js\"\n}\n\u2026\n<\/code><\/pre>\n<p>Si n\u00e9cessaire, cr\u00e9ez un fichier tel que <code>src\/utils.js<\/code>:<\/p>\n<pre><code class=\"language-js\">\u2026\nexport function capitalizeString(str) {\n  return str.charAt(0).toUpperCase() + str.slice(1);\n}\n\nexport function sum(a, b) {\n  return a + b;\n}\n\u2026\n<\/code><\/pre>\n<p>\u00c0 partir de l\u00e0, cr\u00e9ez un fichier de test, tel que <code>src\/__tests__\/utils.test.js<\/code>:<\/p>\n<pre><code class=\"language-js\">import { capitalizeString, sum } from '..\/utils';\n\ndescribe('capitalizeString', () =&gt; {\n  it('capitalizes the first letter of a string', () =&gt; {\n    expect(capitalizeString('hello')).toBe('Hello');\n  });\n  it('returns an empty string if given an empty string', () =&gt; {\n    expect(capitalizeString('')).toBe('');\n  });\n});\n\ndescribe('sum', () =&gt; {\n  it('adds two numbers correctly', () =&gt; {\n    expect(sum(2, 3)).toBe(5);\n  });\n  it('handles negative numbers', () =&gt; {\n    expect(sum(-1, 1)).toBe(0);\n  });\n});\n<\/code><\/pre>\n<p>Une fois que vous aurez ex\u00e9cut\u00e9 la commande <code>npm run test<\/code>, <code>wp-scripts<\/code> trouvera et ex\u00e9cutera automatiquement tous les fichiers portant l&rsquo;extension <strong>.test.js<\/strong>. Vous pouvez \u00e9galement \u00e9tendre la configuration Jest par d\u00e9faut pour prendre en charge tout besoin de test avanc\u00e9, tel que la couverture des tests :<\/p>\n<pre><code class=\"language-js\">\/\/ jest.config.js\nconst defaultConfig = require('@wordpress\/scripts\/config\/jest-unit.config');\nmodule.exports = {\n  ...defaultConfig,\n  setupFilesAfterEnv: ['&lt;rootDir&gt;\/tests\/setupTests.js'],\n  collectCoverageFrom: [\n    'src\/**\/*.js',\n    '!src\/tests\/**\/*.js',\n    '!src\/vendor\/**\/*.js',\n  ],\n  coverageThreshold: {\n    global: {\n      branches: 80,\n      functions: 80,\n      lines: 80,\n      statements: 80,\n    },\n  },\n};\n<\/code><\/pre>\n<p>Cette configuration ajoute un fichier d&rsquo;installation personnalis\u00e9, sp\u00e9cifie les fichiers \u00e0 inclure dans les rapports de couverture et d\u00e9finit des seuils de couverture pour assurer une couverture compl\u00e8te des tests dans vos projets. Lorsque tu ex\u00e9cutes ces tests, Jest fournit des r\u00e9sultats qui indiquent les tests r\u00e9ussis et ceux qui \u00e9chouent.<\/p>\n<p>\u00c9tendre les capacit\u00e9s de tes tests unitaires de cette mani\u00e8re peut offrir une am\u00e9lioration significative de la qualit\u00e9 et de la fiabilit\u00e9 de vos th\u00e8mes et extensions WordPress et rationaliser l&rsquo;ensemble de votre processus de d\u00e9veloppement.<\/p>\n<h2>Comment int\u00e9grer wp-scripts dans vos processus de travail ?<\/h2>\n<p>Le champ d&rsquo;application de l&rsquo;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 <code>wp-scripts<\/code> pour automatiser des t\u00e2ches typiques.<\/p>\n<h3>Cr\u00e9ation de mod\u00e8les de projets r\u00e9utilisables<\/h3>\n<p>Vous aurez probablement besoin de d\u00e9marrer de nouveaux projets fr\u00e9quemment &#8211; peut-\u00eatre m\u00eame tous les jours. La cr\u00e9ation d&rsquo;un mod\u00e8le de projet personnalis\u00e9 par le biais de la pr\u00e9-configuration de <code>wp-scripts<\/code> peut vous faire gagner beaucoup de temps de configuration.<\/p>\n<p>Vous pouvez commencer par un projet de base : un nouveau th\u00e8me ou extension WordPress qui inclut votre configuration de <code>wp-scripts<\/code>:<\/p>\n<pre><code class=\"language-bash\">mkdir my-agency-base-theme\ncd my-agency-base-theme\nnpm init -y\nnpm install --save-dev @wordpress\/scripts\n<\/code><\/pre>\n<p>Ensuite, mettez en place la structure du projet, et cr\u00e9ez les r\u00e9pertoires et les fichiers n\u00e9cessaires :<\/p>\n<pre><code class=\"language-bash\">mkdir src build\ntouch src\/index.js src\/style.scss\ntouch functions.php style.css\n<\/code><\/pre>\n<p>\u00c0 ce stade, vous configurez <code>wp-scripts<\/code> et tu mettez \u00e0 jour le fichier <code>package.json<\/code> avec les commandes appropri\u00e9es :<\/p>\n<pre><code class=\"language-js\">{\n  \"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"start\": \"wp-scripts start\",\n    \"lint:js\": \"wp-scripts lint-js\",\n    \"lint:css\": \"wp-scripts lint-style\",\n    \"test\": \"wp-scripts test-unit-js\"\n  }\n}\n<\/code><\/pre>\n<p>Vous pouvez d\u00e9velopper cela pour cr\u00e9er des configurations pour webpack, ESLint et stylelint.<\/p>\n<p>Pour en faire un mod\u00e8le r\u00e9utilisable et simple d&rsquo;acc\u00e8s, un <a href=\"https:\/\/kinsta.com\/fr\/blog\/base-de-connaissances-github\/\">d\u00e9p\u00f4t GitHub<\/a> est id\u00e9al. Par exemple, consid\u00e9rez une origine distante de <code>https:\/\/github.com\/your-agency\/theme-template.git<\/code>.<\/p>\n<p>Lorsque vous commencez un nouveau projet, vous pouvez ex\u00e9cuter une commande simple :<\/p>\n<pre><code class=\"language-bash\">npx create-wordpress-theme@latest my-new-theme --template your-agency\/theme-template\n<\/code><\/pre>\n<p>Cela clonera votre r\u00e9pertoire de mod\u00e8les et mettra en place un nouveau th\u00e8me avec votre configuration pr\u00e9d\u00e9finie <code>wp-scripts<\/code>.<\/p>\n<p>Vous pouvez personnaliser davantage le mod\u00e8le en ajoutant du code de base sp\u00e9cifique \u00e0 l&rsquo;agence, comme des fonctions ou des composants couramment utilis\u00e9s. Il est important de garder ce d\u00e9p\u00f4t de mod\u00e8les \u00e0 jour, en utilisant la derni\u00e8re version de <code>wp-scripts<\/code> et en mettant en \u0153uvre toutes les am\u00e9liorations du flux de travail que vous avez d\u00e9cid\u00e9es.<\/p>\n<h3>Contr\u00f4le des versions et collaboration<\/h3>\n<p>Vous pouvez faire plus lorsqu&rsquo;il s&rsquo;agit de <code>wp-scripts<\/code> et de travailler avec le contr\u00f4le des versions. Souvent, cependant, vous devriez mettre en \u0153uvre certaines pratiques typiques pour vous assurer de maintenir la qualit\u00e9 du code \u00e0 un niveau \u00e9lev\u00e9 :<\/p>\n<ul>\n<li>Inclure <code>package.json<\/code> et <code>package-lock.json<\/code> dans le contr\u00f4le de version. Cela garantit que tous les membres de l&rsquo;\u00e9quipe utiliseront les m\u00eames d\u00e9pendances.<\/li>\n<li>Assurez-vous d&rsquo;inclure les artefacts de construction tels que <strong>\/build<\/strong> et <strong>\/node_modules<\/strong> dans votre fichier <code>.gitignore<\/code>.<\/li>\n<li>Assurez-vous de r\u00e9f\u00e9rencer tous les scripts dont vous avez besoin dans votre fichier <code>package.json<\/code> avant de le valider.<\/li>\n<li>Envisagez d&rsquo;utiliser un fichier <code>.nvmrc<\/code> pour sp\u00e9cifier la bonne version de Node.js pour votre projet.<\/li>\n<\/ul>\n<p>Vous pouvez choisir d&rsquo;impl\u00e9menter des <a href=\"https:\/\/kinsta.com\/fr\/blog\/hooks-git\/\">crochets de pr\u00e9-commission<\/a> \u00e0 l&rsquo;aide d&rsquo;outils tels que <a href=\"https:\/\/typicode.github.io\/husky\/\">Husky<\/a>. C&rsquo;est un excellent moyen d&rsquo;ex\u00e9cuter un linter avant chaque validation, pour ne citer qu&rsquo;un exemple :<\/p>\n<pre><code class=\"language-json\">\u2026\n\"husky\": {\n    \"hooks\": {\n        \"pre-commit\": \"npm run lint:js && npm run lint:css\"\n    }\n}\n\u2026\n<\/code><\/pre>\n<p>De cette fa\u00e7on, vous pouvez vous assurer que vous fa\u00eetes du lint et que vous ex\u00e9cutez des tests automatiquement avant les commits et les pushes. C&rsquo;est une autre fa\u00e7on de maintenir la qualit\u00e9 du code au sein de votre \u00e9quipe.<\/p>\n<h3>Int\u00e9gration et d\u00e9ploiement continus (CI\/CD)<\/h3>\n<p>L&rsquo;int\u00e9gration de <code>wp-scripts<\/code> dans votre pipeline CI\/CD peut rationaliser votre processus de d\u00e9ploiement pour les th\u00e8mes et les extensions. <a href=\"https:\/\/kinsta.com\/fr\/blog\/configurer-pipeline-ci-cd\/\">Les actions GitHub<\/a> ne sont qu&rsquo;un moyen d&rsquo;int\u00e9grer cela \u00e0 votre configuration <code>wp-scripts<\/code>.<\/p>\n<p>La premi\u00e8re \u00e9tape consiste \u00e0 cr\u00e9er un fichier de flux de travail d\u00e9di\u00e9 au sein d&rsquo;un r\u00e9pertoire <strong>workflows<\/strong> de votre d\u00e9p\u00f4t :<\/p>\n<pre><code class=\"language-json\">name: CI\/CD\n\non:\n  push:\n    branches: [ main ]\n  pull_request:\n    branches: [ main ]\njobs:\n  build-and-test:\n    runs-on: ubuntu-latest\n    steps:\n    - uses: actions\/checkout@v2\n    - name: Use Node.js\n      uses: actions\/setup-node@v2\n      with:\n        node-version: '14'\n    - name: Cache dependencies\n      uses: actions\/cache@v2\n      with:\n        path: ~\/.npm\n        key: ${{ runner.OS }}-node-${{ hashFiles('**\/package-lock.json') }}\n    - name: Install dependencies\n      run: npm ci\n    - name: Run linters\n      run: |\n        npm run lint:js\n        npm run lint:css\n    - name: Run tests\n      run: npm run test\n    - name: Build\n      run: npm run build\n    - name: Deploy\n      if: github.ref == 'refs\/heads\/main'\n      run: |\n        # Add your deployment script here\n        # For example, using rsync to a remote server:\n        # rsync -avzc --delete .\/build\/ user@example.com:\/path\/to\/wp-content\/themes\/your-theme\/\n<\/code><\/pre>\n<p>L&rsquo;\u00e9tape de d\u00e9ploiement variera en fonction de votre h\u00e9bergeur. Vous pouvez utiliser rsync, int\u00e9grer des services comme <a href=\"https:\/\/www.deployhq.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">DeployHQ<\/a> ou <a href=\"https:\/\/kinsta.com\/partners\/buddy\/\">Buddy<\/a>, ou opter pour une <a href=\"https:\/\/kinsta.com\/fr\/blog\/configurer-pipeline-ci-cd\/#trigger-deployment-with-curl-in-cicd-pipeline\">simple int\u00e9gration cURL<\/a>. Si votre d\u00e9ploiement n\u00e9cessite des mots de passe ou des cl\u00e9s, vous devez les ajouter en tant que secrets aux param\u00e8tres de ton d\u00e9p\u00f4t GitHub.<\/p>\n<p>Ce flux de travail ex\u00e9cute des linters, des tests et construit votre projet \u00e0 chaque push et pull request. Mieux encore, il ne se d\u00e9ploie que lorsque vous poussez des modifications sur la branche principale.<\/p>\n<h3>Cr\u00e9ation d&rsquo;un outil d&rsquo;interface de ligne de commande (CLI) personnalis\u00e9<\/h3>\n<p>Si vous avez besoin d&rsquo;outils personnalis\u00e9s, <code>wp-scripts<\/code> peut vous aider. Par exemple, vous pouvez vouloir d\u00e9ployer un outil d&rsquo;interface de ligne de commande personnalis\u00e9 qui r\u00e9pond aux besoins de votre agence.<\/p>\n<p>Dans certains cas, votre outil aura besoin de certaines d\u00e9pendances :<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/scripts commander chalk\n<\/code><\/pre>\n<p>Ici, <a href=\"https:\/\/www.npmjs.com\/package\/commander\" target=\"_blank\" rel=\"noopener noreferrer\">Commander<\/a> analyse les arguments de la ligne de commande, et <a href=\"https:\/\/www.npmjs.com\/package\/chalk\" target=\"_blank\" rel=\"noopener noreferrer\">chalk<\/a> am\u00e9liore l&rsquo;affichage visuel du texte de sortie.<\/p>\n<p>\u00c0 partir de l\u00e0, vous pouvez commencer \u00e0 coder l&rsquo;outil \u00e0 l&rsquo;aide de <code>wp-scripts<\/code>. Voici un exemple de ce \u00e0 quoi ressemblerait ce fichier :<\/p>\n<pre><code class=\"language-js\">#!\/usr\/bin\/env node\nconst { program } = require('commander');\nconst { spawn } = require('child_process');\nconst path = require('path');\nconst chalk = require('chalk');\n\nconst wpScripts = path.resolve(__dirname, '.\/node_modules\/.bin\/wp-scripts');\n\nconst runWpScripts = (script, args) =&gt; {\n  console.log(chalk.blue(`Running wp-scripts ${script}...`));\n  const result = spawn(wpScripts, [script, ...args], { stdio: 'inherit' });\n  result.on('exit', (code) =&gt; {\n    if (code !== 0) {\n      console.log(chalk.red(`wp-scripts ${script} failed with code ${code}`));\n    }\n  });\n};\n\nprogram\n  .version('1.0.0')\n  .description('Custom WordPress development CLI for Agency XYZ');\n\nprogram\n  .command('build')\n  .description('Build the project')\n  .action(() =&gt; runWpScripts('build'));\n\nprogram\n  .command('start')\n  .description('Start the development server')\n  .action(() =&gt; runWpScripts('start'));\n\nprogram\n  .command('lint')\n  .description('Lint JavaScript and CSS files')\n  .action(() =&gt; {\n    runWpScripts('lint-js');\n    runWpScripts('lint-style');\n  });\n\nprogram\n  .command('test')\n  .description('Run unit tests')\n  .action(() =&gt; runWpScripts('test-unit-js'));\n\nprogram\n  .command('deploy')\n  .description('Deploy the project')\n  .action(() =&gt; {\n    console.log(chalk.green('Deploying project...'));\n    \/\/ Add your deployment logic here\n    \/\/ For example:\n    \/\/ spawn('rsync', ['-avz', 'build\/', 'user@server:\/path\/to\/wordpress\/wp-content\/themes\/your-theme\/']);\n  });\n\nprogram.parse(process.argv);\n<\/code><\/pre>\n<p>L&rsquo;ajout du champ bin \u00e0 votre fichier package.json vous permet de faire de l&rsquo;outil CLI un ex\u00e9cutable :<\/p>\n<pre><code class=\"language-js\">\u2026\n{\n  \"name\": \"agency-wp-cli\",\n  \"version\": \"1.0.0\",\n  \"bin\": {\n    \"agency-wp\": \".\/cli.js\"\n  },\n  \/\/ ... other fields\n}\n\u2026\n<\/code><\/pre>\n<p>Pour lier l&rsquo;outil CLI \u00e0 une installation locale, vous pouvez simplement ex\u00e9cuter <code>npm link<\/code>. Vous pouvez maintenant tester l&rsquo;outil CLI dans votre application Terminal :<\/p>\n<pre><code class=\"language-bash\">agency-wp build\nagency-wp lint\nagency-wp deploy\n<\/code><\/pre>\n<p>Vous devriez publier l&rsquo;outil dans un registre npm priv\u00e9 pour que les autres membres de l&rsquo;\u00e9quipe puissent l&rsquo;installer \u00e0 leur guise :<\/p>\n<pre><code class=\"language-bash\">npm publish --registry=<a href=\"https:\/\/your-private-registry.com\">https:\/\/your-private-registry.com<\/a>\n<\/code><\/pre>\n<p>Lorsque vous en aurez besoin, il vous suffira d&rsquo;ex\u00e9cuter <code>npm install --save-dev agency-wp-cli<\/code> pour installer votre outil. \u00c0 partir de l\u00e0, vous pouvez faire r\u00e9f\u00e9rence \u00e0 l&rsquo;interface de programmation dans <code>package.json<\/code>:<\/p>\n<pre><code class=\"language-js\">{\n  \"scripts\": {\n    \"build\": \"agency-wp build\",\n    \"start\": \"agency-wp start\",\n    \"lint\": \"agency-wp lint\",\n    \"test\": \"agency-wp test\",\n    \"deploy\": \"agency-wp deploy\"\n  }\n}\n<\/code><\/pre>\n<p>La cr\u00e9ation et l&rsquo;utilisation d&rsquo;un outil comme celui-ci permet de s&rsquo;assurer que tous les membres de votre agence utilisent les m\u00eames commandes et processus. Cela peut r\u00e9duire les incoh\u00e9rences et rationaliser encore plus votre flux de travail de d\u00e9veloppement WordPress.<\/p>\n<h3>Optimisation des performances<\/h3>\n<p>Lorsque vous g\u00e9rez plusieurs sites WordPress \u00e0 fort trafic, l&rsquo;optimisation de vos performances devient cruciale pour votre prestation. Il existe plusieurs techniques avanc\u00e9es que <code>wp-scripts<\/code> peut vous aider \u00e0 mettre en \u0153uvre.<\/p>\n<h4>Fractionnement avanc\u00e9 du code<\/h4>\n<p>Par exemple, le fractionnement du code vous permet de diviser votre paquet JavaScript en plus petits morceaux, que vous pouvez charger \u00e0 la demande. Cela peut am\u00e9liorer vos temps de chargement initiaux, en particulier pour les applications volumineuses.<\/p>\n<p>Tout d&rsquo;abord, modifiez votre fichier <code>webpack.config.js<\/code> pour activer le fractionnement du code :<\/p>\n<pre><code class=\"language-js\">const defaultConfig = require('@wordpress\/scripts\/config\/webpack.config');\n\nmodule.exports = {\n  ...defaultConfig,\n  entry: {\n    main: '.\/src\/index.js',\n    admin: '.\/src\/admin.js',\n  },\n  output: {\n    filename: '[name].js',\n    chunkFilename: '[name].[contenthash].js',\n  },\n  optimization: {\n    ...defaultConfig.optimization,\n    splitChunks: {\n      chunks: 'all',\n      minSize: 0,\n      cacheGroups: {\n        vendor: {\n          test: \/[\\\/]node_modules[\\\/]\/,\n          name(module) {\n            const packageName = module.context.match(\/[\\\/]node_modules[\\\/](.*?)([\\\/]|$)\/)[1];\n            return `vendor.${packageName.replace('@', '')}`;\n          },\n        },\n      },\n    },\n  },\n};\n<\/code><\/pre>\n<p>Tout au long de votre code JavaScript, vous utilisez des importations dynamiques pour le diviser en morceaux plus petits :<\/p>\n<pre><code class=\"language-js\">\/\/ Instead of: import { heavyFunction } from '.\/heavyModule';\n\nbutton.addEventListener('click', () =&gt; {\n  import('.\/heavyModule').then(module =&gt; {\n    module.heavyFunction();\n  });\n});\n<\/code><\/pre>\n<p>Vous devez \u00e9galement mettre en file d&rsquo;attente chaque fractionnement dans vos fichiers WordPress :<\/p>\n<pre><code class=\"language-php\">function enqueue_split_scripts() {\n  $asset_file = include(get_template_directory() . '\/build\/index.asset.php');  \n\n  wp_enqueue_script('main', get_template_directory_uri() . '\/build\/main.js', $asset_file['dependencies'], $asset_file['version'], true);\n  wp_enqueue_script('admin', get_template_directory_uri() . '\/build\/admin.js', $asset_file['dependencies'], $asset_file['version'], true);\n}\nadd_action('wp_enqueue_scripts', 'enqueue_split_scripts');\n<\/code><\/pre>\n<p>Cela devrait vous permettre de r\u00e9duire les temps de chargement et ne prend pas trop de temps \u00e0 mettre en place non plus.<\/p>\n<h4>Tree Shaking<\/h4>\n<p>Dans le contexte de JavaScript, le \u00ab tree shaking \u00bb est la fa\u00e7on dont vous vous d\u00e9barrassez du code inutilis\u00e9. Les sites <code>wp-scripts<\/code> et <code>webpack<\/code> effectuent tous les deux du tree shaking pour les versions de production, mais vous pouvez l&rsquo;optimiser davantage. L&rsquo;application est plus complexe que ce que nous donnons ici, mais quoi qu&rsquo;il en soit, vous voulez vous assurer que vous utilisez la syntaxe d&rsquo;importation et d&rsquo;exportation ES6 :<\/p>\n<pre><code class=\"language-php\">\/\/ Good for tree shaking\nexport function usedFunction() { \/* ... *\/ }\n\n\/\/ Bad for tree shaking\nmodule.exports = {\n  usedFunction: function() { \/* ... *\/ },\n};\n<\/code><\/pre>\n<p>Ensuite, sp\u00e9cifiez les fichiers qui ont des \u00ab <a href=\"https:\/\/travislramos.com\/blog\/understanding-tree-shaking-in-javascript\" target=\"_blank\" rel=\"noopener noreferrer\">effets secondaires<\/a> \u00bb<\/p>\n<pre><code class=\"language-js\">{\n  \"name\": \"your-package\",\n  \"sideEffects\": [\"*.css\", \"*.scss\"]\n}\n<\/code><\/pre>\n<p>&#8230;ou indiquez qu&rsquo;il n&rsquo;y a pas d&rsquo;effets secondaires :<\/p>\n<pre><code class=\"language-json\">{\n  \"name\": \"your-package\",\n  \"sideEffects\": false\n}\n<\/code><\/pre>\n<p>Certaines grandes biblioth\u00e8ques ne prennent pas en charge le tree shaking, aussi bien que d&rsquo;autres. Dans ces cas-l\u00e0, vous devez utiliser une extension sp\u00e9cifique pour ce travail :<\/p>\n<pre><code class=\"language-bash\">npm install --save-dev babel-plugin-transform-imports\n<\/code><\/pre>\n<p>Cela signifie \u00e9galement que vous devez mettre \u00e0 jour vos fichiers de configuration babel pour une installation optimale et sans erreur.<\/p>\n<h4>Optimisation des ressources<\/h4>\n<p>Le processus de construction de <code>wp-scripts<\/code> minimisera les fichiers CSS et JavaScript pour vous, et vous pouvez aller plus loin. Par exemple, vous pouvez installer une extension sp\u00e9cifique d&rsquo;optimisation des images :<\/p>\n<pre><code class=\"language-bash\">npm install --save-dev imagemin-webpack-plugin\n<\/code><\/pre>\n<p>Une fois que vous l&rsquo;avez ajout\u00e9 \u00e0 votre fichier de configuration webpack, vous pouvez utiliser les indices de ressources en ajoutant le bon code \u00e0 votre fichier <code>functions.php<\/code> ou au fichier principal de l&rsquo;extension :<\/p>\n<pre><code class=\"language-php\">function add_resource_hints( $urls, $relation_type ) {\n  if ( 'preconnect' === $relation_type ) {\n    $urls[] = 'https:\/\/fonts.googleapis.com';\n    $urls[] = 'https:\/\/fonts.gstatic.com';\n  }\n  return $urls;\n}\n\nadd_filter( 'wp_resource_hints', 'add_resource_hints', 10, 2 );\n<\/code><\/pre>\n<p>Une t\u00e2che comme celle-ci montre la flexibilit\u00e9 dont vous disposez avec <code>wp-scripts<\/code>, dans la mesure o\u00f9 vous pouvez l&rsquo;adapter aux besoins de votre agence ou de votre projet.<\/p>\n<h4>Analysez la taille des paquets<\/h4>\n<p>Comprendre la composition de votre bundle est crucial pour l&rsquo;optimisation. Avec <code>wp-scripts<\/code>, vous pouvez vous faciliter la t\u00e2che gr\u00e2ce \u00e0 l&rsquo;indicateur <code>--analyze<\/code>.<\/p>\n<pre><code class=\"language-bash\">npm run build -- --analyze\n<\/code><\/pre>\n<p>La premi\u00e8re \u00e9tape consiste \u00e0 ajouter le script correspondant \u00e0 votre fichier <code>package.json<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n  \"scripts\": {\n    \"analyze\": \"wp-scripts build --analyze\"\n  }\n}\n<\/code><\/pre>\n<p>Une fois que vous aurez ex\u00e9cut\u00e9 la commande <code>analyze<\/code>, elle g\u00e9n\u00e9rera un rapport qui indiquera la taille de chaque module de votre bundle. Cette mise en \u0153uvre simple vous aide \u00e0 identifier les domaines \u00e0 optimiser.<\/p>\n<h4>Mise en \u0153uvre du CSS critique<\/h4>\n<p>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\u00e9liorer le temps de chargement per\u00e7u.<\/p>\n<p>Pour y parvenir, il faut utiliser l&rsquo;extension <a href=\"https:\/\/www.npmjs.com\/package\/critical-css-webpack-plugin\" target=\"_blank\" rel=\"noopener noreferrer\">Webpack CSS critique<\/a>:<\/p>\n<pre><code class=\"language-bash\">npm install --save-dev critical-css-webpack-plugin\n<\/code><\/pre>\n<p>Le prochain travail consiste \u00e0 mettre \u00e0 jour votre fichier de configuration webpack pour r\u00e9f\u00e9rencer l&rsquo;extension :<\/p>\n<pre><code class=\"language-js\">const CriticalCssPlugin = require('critical-css-webpack-plugin');\nconst defaultConfig = require('@wordpress\/scripts\/config\/webpack.config');\n\nmodule.exports = {\n  ...defaultConfig,\n  plugins: [\n    ...defaultConfig.plugins,\n    new CriticalCssPlugin({\n      base: 'dist\/',\n      src: 'index.html',\n      target: 'styles\/critical.css',\n      extract: true,\n      inline: true,\n      minify: true,\n      dimensions: [\n        {\n          height: 500,\n          width: 300,\n        },\n        {\n          height: 900,\n          width: 1300,\n        },\n      ],\n    }),\n  ],\n};\n<\/code><\/pre>\n<p>Pour l&rsquo;utiliser, vous devez ajouter un extrait \u00e0 votre fichier <code>header.php<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;style&gt;\n  &lt;?php echo file_get_contents(get_template_directory() . '\/build\/styles\/critical.css'); ?&gt;\n&lt;\/style&gt;\n<\/code><\/pre>\n<p>Cela permet d&rsquo;extraire et d&rsquo;int\u00e9grer des feuilles de style CSS critiques pour un rendu initial plus rapide. Il g\u00e9n\u00e8re des feuilles de style CSS critiques pour des tailles de fen\u00eatres sp\u00e9cifiques, ce qui peut am\u00e9liorer le temps de chargement per\u00e7u de vos th\u00e8mes.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Pour le d\u00e9veloppement d&rsquo;une agence, <code>wp-scripts<\/code> peut \u00eatre un outil puissant qui peut am\u00e9liorer consid\u00e9rablement votre flux de travail pour les projets de th\u00e8mes et d&rsquo;extensions. En fournissant un processus de construction standardis\u00e9, une prise en charge moderne du JavaScript et des outils de test et de linting int\u00e9gr\u00e9s, <code>wp-scripts<\/code> vous permet de vous concentrer sur la cr\u00e9ation de projets WordPress de haute qualit\u00e9 tout en automatisant certaines des t\u00e2ches les plus importantes.<\/p>\n<p>L&rsquo;utilisation de <code>wp-scripts<\/code> ne vous aide pas seulement \u00e0 suivre les pratiques de d\u00e9veloppement modernes. C&rsquo;est un moyen de vous positionner \u00e0 l&rsquo;avant-garde du d\u00e9veloppement WordPress, pr\u00eat \u00e0 relever les d\u00e9fis et les opportunit\u00e9s auxquels votre agence doit faire face.<\/p>\n<p>Est-ce que wp-scripts offre les fonctionnalit\u00e9s et la port\u00e9e dont vous avez besoin pour les projets de d\u00e9veloppement de votre agence ? Partagez vos r\u00e9flexions avec nous dans la section des commentaires ci-dessous !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le travail de d\u00e9veloppement WordPress pour les agences peut \u00eatre comp\u00e9titif dans le meilleur des cas. Il exige une efficacit\u00e9 et une coh\u00e9rence supr\u00eames sur plusieurs &#8230;<\/p>\n","protected":false},"author":259,"featured_media":78766,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1070,1041,1028,1034],"class_list":["post-78765","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-agence","topic-conception-site-web-wordpress","topic-developpement-wordpress","topic-performance-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>D\u00e9veloppement WordPress avanc\u00e9 avec wp-scripts<\/title>\n<meta name=\"description\" content=\"Le d\u00e9veloppement WordPress n\u00e9cessite des outils pr\u00e9-requis. Cet article traite de l&#039;utilisation de wp-scripts, ainsi que des techniques de compilation, de linting, de test, et bien plus encore !\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"D\u00e9veloppement avanc\u00e9 de WordPress : comment construire votre prochain projet avec wp-scripts\" \/>\n<meta property=\"og:description\" content=\"Le d\u00e9veloppement WordPress n\u00e9cessite des outils pr\u00e9-requis. Cet article traite de l&#039;utilisation de wp-scripts, ainsi que des techniques de compilation, de linting, de test, et bien plus encore !\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-02T09:21:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-10T14:29:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Steve Bonisteel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Le d\u00e9veloppement WordPress n\u00e9cessite des outils pr\u00e9-requis. Cet article traite de l&#039;utilisation de wp-scripts, ainsi que des techniques de compilation, de linting, de test, et bien plus encore !\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steve Bonisteel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"29 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/\"},\"author\":{\"name\":\"Steve Bonisteel\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\"},\"headline\":\"D\u00e9veloppement avanc\u00e9 de WordPress : comment construire votre prochain projet avec wp-scripts\",\"datePublished\":\"2024-12-02T09:21:30+00:00\",\"dateModified\":\"2024-12-10T14:29:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/\"},\"wordCount\":4796,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/\",\"name\":\"D\u00e9veloppement WordPress avanc\u00e9 avec wp-scripts\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png\",\"datePublished\":\"2024-12-02T09:21:30+00:00\",\"dateModified\":\"2024-12-10T14:29:16+00:00\",\"description\":\"Le d\u00e9veloppement WordPress n\u00e9cessite des outils pr\u00e9-requis. Cet article traite de l'utilisation de wp-scripts, ainsi que des techniques de compilation, de linting, de test, et bien plus encore !\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"D\u00e9veloppement WordPress\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/developpement-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"D\u00e9veloppement avanc\u00e9 de WordPress : comment construire votre prochain projet avec wp-scripts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\",\"name\":\"Steve Bonisteel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g\",\"caption\":\"Steve Bonisteel\"},\"description\":\"Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/stevebonisteel\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"D\u00e9veloppement WordPress avanc\u00e9 avec wp-scripts","description":"Le d\u00e9veloppement WordPress n\u00e9cessite des outils pr\u00e9-requis. Cet article traite de l'utilisation de wp-scripts, ainsi que des techniques de compilation, de linting, de test, et bien plus encore !","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/","og_locale":"fr_FR","og_type":"article","og_title":"D\u00e9veloppement avanc\u00e9 de WordPress : comment construire votre prochain projet avec wp-scripts","og_description":"Le d\u00e9veloppement WordPress n\u00e9cessite des outils pr\u00e9-requis. Cet article traite de l'utilisation de wp-scripts, ainsi que des techniques de compilation, de linting, de test, et bien plus encore !","og_url":"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2024-12-02T09:21:30+00:00","article_modified_time":"2024-12-10T14:29:16+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","type":"image\/png"}],"author":"Steve Bonisteel","twitter_card":"summary_large_image","twitter_description":"Le d\u00e9veloppement WordPress n\u00e9cessite des outils pr\u00e9-requis. Cet article traite de l'utilisation de wp-scripts, ainsi que des techniques de compilation, de linting, de test, et bien plus encore !","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package-1024x512.png","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Steve Bonisteel","Dur\u00e9e de lecture estim\u00e9e":"29 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/"},"author":{"name":"Steve Bonisteel","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f"},"headline":"D\u00e9veloppement avanc\u00e9 de WordPress : comment construire votre prochain projet avec wp-scripts","datePublished":"2024-12-02T09:21:30+00:00","dateModified":"2024-12-10T14:29:16+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/"},"wordCount":4796,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/","url":"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/","name":"D\u00e9veloppement WordPress avanc\u00e9 avec wp-scripts","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","datePublished":"2024-12-02T09:21:30+00:00","dateModified":"2024-12-10T14:29:16+00:00","description":"Le d\u00e9veloppement WordPress n\u00e9cessite des outils pr\u00e9-requis. Cet article traite de l'utilisation de wp-scripts, ainsi que des techniques de compilation, de linting, de test, et bien plus encore !","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"D\u00e9veloppement WordPress","item":"https:\/\/kinsta.com\/fr\/sujets\/developpement-wordpress\/"},{"@type":"ListItem","position":3,"name":"D\u00e9veloppement avanc\u00e9 de WordPress : comment construire votre prochain projet avec wp-scripts"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f","name":"Steve Bonisteel","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g","caption":"Steve Bonisteel"},"description":"Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.","url":"https:\/\/kinsta.com\/fr\/blog\/author\/stevebonisteel\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/78765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/259"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=78765"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/78765\/revisions"}],"predecessor-version":[{"id":78782,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/78765\/revisions\/78782"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78765\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78765\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78765\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78765\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78765\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78765\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78765\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78765\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78765\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/78766"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=78765"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=78765"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=78765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}