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