search

BeAPI / beapi-frontend-framework

WordPress friendly Front-End framework.
https://beapi.fr
68 stars 18 forks source link

Mettre en place le plugin WebPack d'extraction des dépendances pour les librairies WordPress #276

Closed firestar300 closed 2 years ago

firestar300 commented 2 years ago

Présentation : Cette issue (et la PR qui l'accompagne), propose de modifier le BFF pour faciliter l'utilisation des packages développés et publiés par le projet Gutenberg et qui sont disponible dans WordPress. Il serait possible d'utiliser ces packages via des imports dans nos scripts en s'assurant qu'ils ne viendront pas alourdir les fichiers finaux.

Lors de la compilation des assets JS, un certain nombre de packages (react, react-dom, @wordpress/xxx) sont exclu de la compilation et à la place un fichier PHP contenant leur handle associés est généré. Lorsque l'asset est register dans WordPress, il suffit de passer le tableau de dependence issue du fichier PHP pour s'assurer qu'elles seront chargées.

Exemple :

// app-min.js 
(()=>{var t={574:t=>{!function(e,n){var i=fun.....
// app-min.asset.php
<?php return array('dependencies' => array('wp-blocks', 'wp-dom-ready', 'wp-hooks', 'wp-polyfill'), 'version' => '6b793aa249d8d7866124');

La PR contient un exemple concret de script JS refactorisé pour tirer partie des import

Réfexion initial : À la base, cette solution a été imaginé pour permettre l'utilisation du package @wordpress/i18n pour gérer les traductions dans nos scripts et les rendre compatible avec la commande WP-CLI i18n make-pot pour générer des catalogues de traduction. Ce changement permet de gérer correctement ce cas mais améliore aussi toute la gestion des dépendances pour les packages disponible dans WordPress.

Note sur le i18n : La gestion des traductions dans nos scripts pose encore des questions sur les projets et plusieurs solutions sont envisageable suivant les cas. Je pense que cette question devrait faire l'objet d'une nouvelle issue pour présenter les pour/contre et déterminer la marche à suivre suivant les projets. Cette PR devrait être concidérer uniquement du point de vue de la modification de la compilation / du chargement des assets.

L'intégration de ce plugin permet de se rapprocher de ce qui est fait côté bloc Gut. Je n'ai pas touché à la façon dont les autres assets (CSS par exemple) sont compilés/chargés, cela pourra aussi fire l'objet d'une issue/PR séparée.

petitphp commented 2 years ago

@Rahe @asadowski10 @francoistibo @firestar300 @ptesei @n-langle