Monthmars 2021

[Webpack Encore] Résoudre les problèmes d’imports et de sous-imports de composants JS à l’utilisation de frameworks comme UiKit ou Foundation 6

Note: vous pouvez vous référer à l’article: [Webpack Encore] Utiliser la méthode addAliases pour résoudre les problèmes de sous-imports de fichiers sass/scss à l’utilisation de frameworks comme UiKit ou Foundation 6 pour résoudre la même question côté CSS.

Sources:

Erreur: « ./node_modules/uikit/src/js/api/boot.js » contains a reference to the file « uikit-util ».

Utiliser la méthode addAliases() de Webpack Encore pour créer un alias vers le chemin de référence du fichier non trouvé dans node_modules. Dans le fichier webpack.config.js:

Etendre la configuration de Webpack Encore pour faciliter la surchage et l’écrasement de fichiers JS

Dans le fichier webpack.config.js:

Ici, Webpack va d’abord chercher le fichier JS dans le dossier assets. Si il ne le trouve pas, il va se rabattre sur le dossier node_modules.

Ajouter un console.log(config); vous permettra de visualiser la config au format JSON dans votre console.

Importer uniquement une sélection de modules issus d’un framework (et pas tout le framework)

Dans le fichier JS qui sert de point d’entrée à Webpack (dans mon exemple assets/app.js):

Dans le fichier JS qui sert à importer uniquement les modules voulus (dans mon exemple assets/uikit.js):

Ici, j’importe uniquement les modules notification, tooltip et uikit-icons. Le fichier généré par webpack pour le front ne contiendra pas le code des autres modules du framework UIkit.

[Webpack Encore] Utiliser la méthode addAliases pour résoudre les problèmes de sous-imports de fichiers sass/scss à l’utilisation de frameworks comme UiKit ou Foundation 6

Source: Webpack sass loader resolve absolute path

/webpack.config.js:

/assets/styles/apps.scss.

ATTENTION: afin que le principe de fallback décrit dans l’exemple (surcharge si existante, sinon fichier natif consigné dans node_modules), il est impératif de respecter l’arborescence native de votre framework dans votre chemin vers le fichier surchargé.

Exemple: si je veux surcharger le fichier natif ./node_modules/uikit/src/scss/uikit.scss, je dois respecter l’arborescence suivante: ./assets/styles/uikit/src/scss/uikit.scss.

/assets/styles/uikit/src/scss/components/_import.scss: ce fichier est une surcharge de /node_modules/uikit/src/scss/components/_import.scss.

Par le biais de cette surcharge, nous pouvons:

  • Commenter les composants que nous ne souhaitons pas utiliser dans notre projet: //@import "table.scss";
  • Faire pointer les composants que nous allons utiliser en l’état fourni par le framework (sans en modifier l’aspect ou le comportement) vers la source consignée dans le dossier node_modules: @import "~@uk-components/base.scss";
  • Faire pointer les composants que nous allons surcharger (nous allons modifier l’aspect ou le comportement prévu par le framework) vers les fichiers consignés dans le dossier assets/styles: @import "link.scss";

[Pimcore] Utiliser le Bundle Webpack Encore de Symfony

ATTENTION: Testé fonctionnel (moyennant mes ajustements ci-dessous) sur les bases de la demo officielle de Pimcore qui tournait, au moment de mes tests, sous Pimcore v6.8.10. Source: msenkpiel.de – Using Symfony Webpack-Encore-Bundle with Pimcore et version PDF pour la postérité.

Résoudre l’erreur Could not find the entrypoints file from Webpack: the file « /var/www/html/web/build/entrypoints.json » does not exist.

Attention à bien vérifier les deux fichiers suivants par rapport à ce qui est indiqué dans le billet de blog de référence. J’ai eu une erreur Could not find the entrypoints file from Webpack: the file « /var/www/html/web/build/entrypoints.json » does not exist. en respectant à la lettre ce qui est indiqué. En modifiant les deux fichiers ci-dessous conformément à ce que je décris, ça a fonctionné.

webpack.config.js

/pimcore-demo/webpack.config.js. Attention au paramètre .setOutputPath() pour lequel il faut mettre 'web/build' (et non pas 'public/build'.

Attention, si vous utilisez le skeleton officiel de Pimcore le paramètre .setOutputPath('public/build') sera peut-être valide (pas testé)…

config.yml

/pimcore-demo/app/config/config.yml

Remarque: nous avons /pimcore-demo/config/packages/assets/assets.yaml qui contient aussi une référence au dossier public/. Je ne l’ai pas modifié lors de mon test.

Ajout des liens vers les fichiers compilés dans un template Twig

Attention: veiller à bien positionner l’appel à la source JS juste avant la fermeture du tag </body>. Sinon on peut avoir des problèmes à l’exécution de certains JS, comme par exemple avec l’exemple d’intégration du framework UIkit avec Webpack ou j’obtenais une erreur cannot read property appendChild of undefined.

© 2021 devfrontend.info

Theme by Anders NorénUp ↑