Pour utiliser un environnement permettant de développer des composants React en JSX, il faut préparer un environnement qui permette de compiler le code ESNext en JSX. On configure l’environnement de développement pour utiliser ces syntaxes.
Installation
Webpack et Babel sont des outils écrits en JavaScript et exécutés sur le serveur à l’aide de Node.js. Node.js est un environnement d’exécution pour JavaScript en dehors d’un navigateur. Pour commencer un nouveau projet, on crée un répertoire et on initialise npm dans ce répertoire. J’ai un plugin qui fait plusieurs choses donc je crée un répertoire block-editor dans le répertoire assets de mon plugin. On lance alors l’initialisation avec npm init.
Installation des packages
On crée un nouveau package.json exécutant npm init dans le terminal. On installe ensuite les packages à l’aide de la commande npm install. Si vous passez le paramètre --save-dev, npm écrira le package en tant que dépendance de développement dans le fichier package.json. Le paramètre --save-exact indique à npm d’enregistrer une version exacte d’une dépendance, et non une plage de versions valides.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
$ npm init package name: (icon-inserter) version: (1.0.0) description: Icon inserter for block editor entry point: (index.js) test command: git repository: keywords: author: Xavier BS license: (ISC) GPL-3.0 About to write to /home/xavierbs/www/_blog/wp-content/plugins/icon-inserter/assets/icon-inserter/package.json: { "name": "icon-inserter", "version": "1.0.0", "description": "Icon inserter for block editor", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Xavier BS", "license": "GPL-3.0" } $ npm install --save-dev --save-exact @wordpress/scripts + @wordpress/scripts@12.1.1 added 1826 packages from 738 contributors and audited 1828 packages in 168.014s 134 packages are looking for funding run `npm fund` for details found 0 vulnerabilities $ cat package.json { "name": "icon-inserter", "version": "1.0.0", "description": "Icon inserter for block editor", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Xavier BS", "license": "GPL-3.0", "devDependencies": { "@wordpress/scripts": "12.1.1" } } |
Configuration de la construction de scripts wp
Le package @wordpress/scripts gère les dépendances et la configuration par défaut pour webpack et Babel. Le package de scripts s’attend à ce que le fichier source à compiler soit src/index.js et enregistrera la sortie compilée dans build/index.js. On crée le répertoire src et l’on édite index.js avec le contenu JSX suivant :
|
1 2 3 4 5 6 7 8 9 |
const { registerBlockType } = wp.blocks; registerBlockType( 'myguten/test-block', { title: 'Basic Example', icon: 'smiley', category: 'design', edit: () => <div>Hola, mundo!</div>, save: () => <div>Hola, mundo!</div>, } ); |
Pour configurer npm et exécuter un script, on utilise la section scripts dans package.json :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "name": "icon-inserter", "version": "1.0.0", "description": "Icon inserter for block editor", "main": "icon-inserter.js", "scripts": { "build": "wp-scripts build" }, "author": "Xavier BS", "license": "GPL-3.0", "devDependencies": { "@wordpress/scripts": "12.1.1" } } |
On peut alors lancer le build en utilsant la commande npm run build dans le répertoire contenant le package.json.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$ npm run build > icon-inserter@1.0.0 build /home/xavierbs/www/_blog/wp-content/plugins/icon-inserter/assets/icon-inserter > wp-scripts build Hash: 0cb8ebd8a6899eaf009f Version: webpack 4.43.0 Time: 5890ms Built at: 07/18/2020 10:05:37 PM Asset Size Chunks Chunk Names index.asset.php 135 bytes 0 [emitted] index index.js 1.3 KiB 0 [emitted] index Entrypoint index = index.js index.asset.php [0] external {"this":["wp","element"]} 42 bytes {0} [built] [1] external {"this":["wp","blocks"]} 42 bytes {0} [built] [2] ./src/index.js 389 bytes {0} [built] |
Si on liste le répertoire, on a donc :
|
1 2 3 4 5 6 |
xavier@server:/plugins/icon-inserter/assets/icon-inserter$ ls build node_modules package.json package-lock.json src xavier@server:/plugins/icon-inserter/assets/icon-inserter$ cd build xavier@server:/plugins/icon-inserter/assets/icon-inserter$ ls index.asset.php index.js |
Le fichier index.asset.php contient les dépendances et le N° de version.
|
1 |
<?php return array('dependencies' => array('wp-blocks', 'wp-element', 'wp-polyfill'), 'version' => 'de28583a8c7c477aedda80077b80fd8a'); |
Mode développement
La commande build dans @ wordpress/scripts s’exécute en mode production. Cela réduit le code afin de le télécharger plus rapidement, mais rend difficile la lecture. On peut utiliser la commande start qui s’exécute en mode développement, qui continue le processus en cours d’exécution pour surveiller le fichier source, afin de faire les modifications et reconstructions au fur et à mesure du votre développement. La commande start peut être ajoutée à la section scripts de package.json:
|
1 2 3 4 |
"scripts": { "start": "wp-scripts start", "build": "wp-scripts build" }, |
Ainsi, lorsque l’on exécute npm start, un watcher s’exécute dans le terminal. On peut modifier index.js ; après chaque sauvegarde, le build se construit automatiquement. On garde le terminal ouvert pour suivre toute erreur. En cas d’erreur, la construction échoue et l’erreur se trouvera dans le terminal. Pour sortir du watcher et annuler le Live Reload, on appuie sur Ctrl + C.
Gestion des sources et des dépendances
Le dossier node_modules contient des milliers de fichiers qui changent à chaque mise à jour logicielle, on doit exclure ce dossier node_modules/ du contrôle des sources. Si l’on veut cloner le module, on exécute simplement npm install dans le même dossier que package.json pour extraire les paquets requis et créer un nouveau dossier node_modules. On intègre juste le fichier build/index.js dans le plugin PHP (il s’agit du fichier JavaScript principal nécessaire à l’exécution) en se servant de build/index.asset.php pour les dépendances.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?php /** * Class admin */ // Exit if accessed directly if ( ! defined( 'ABSPATH' ) ) exit; class ICI_Admin { public function __construct( $ici ) { $this->textdomain = $ici->textdomain; add_action( 'enqueue_block_editor_assets', [$this, 'enqueue_block_editor_assets'] ); } public function enqueue_block_editor_assets() { $build = Icon_Inserter::dir( 'assets/icon-inserter/build' ); $index_asset = require( "{$build}/index.asset.php" ); wp_enqueue_script( 'icon-inserter-button', Icon_Inserter::url( 'assets/icon-inserter/build/index.js' ), $index_asset['dependencies'], $index_asset['version'] ); } } |
A chaque fois que l’on fera des modifications dans src/index.js, le build sera reconstruit, et le fichier index.asset.php mis à jour pour les dépendances.
Et hop, l’environnement est installé, en lançant npm start, on peut développer tranquillement un plugin pour le nouvel éditeur de blocs Gutenberg.
Trackbacks/Pingbacks