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:
|
1 2 3 4 5 6 7 8 9 10 |
const path = require('path'); [...] Encore .addAliases({ 'uikit-util': path.resolve(__dirname, './node_modules/uikit/src/js/util') }) [...] |
Etendre la configuration de Webpack Encore pour faciliter la surchage et l’écrasement de fichiers JS
- Home / Documentation / Frontend / Advanced Webpack Config (version 5.2)
- Webpack – Resolve (webpack v5.26.3)
Dans le fichier webpack.config.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const Encore = require('@symfony/webpack-encore'); Encore // Ici, toute la config Webpack Encore... ; // fetch the config, then modify it! const config = Encore.getWebpackConfig(); // add an extension config.resolve.modules = ['assets', 'node_modules']; // console.log(config); // export the final config module.exports = config; // was: module.exports = Encore.getWebpackConfig(); |
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):
|
1 2 3 4 5 |
// UIkit import UIkit from './uikit'; // components can be called from the imported UIkit reference UIkit.notification('Hello world.'); |
Dans le fichier JS qui sert à importer uniquement les modules voulus (dans mon exemple assets/uikit.js):
|
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 |
import UIkit from 'uikit/dist/js/uikit-core'; // import Countdown from 'uikit/dist/js/components/countdown'; // import Filter from 'uikit/dist/js/components/filter'; // import Lightbox from 'uikit/dist/js/components/lightbox'; // import LightboxPanel from 'uikit/dist/js/components/lightbox-panel'; import Notification from 'uikit/dist/js/components/notification'; // import Parallax from 'uikit/dist/js/components/parallax'; // import Slider from 'uikit/dist/js/components/slider'; // import SliderParallax from 'uikit/dist/js/components/slider-parallax'; // import Slideshow from 'uikit/dist/js/components/slideshow'; // import Sortable from 'uikit/dist/js/components/sortable'; import Tooltip from 'uikit/dist/js/components/tooltip'; // import Upload from 'uikit/dist/js/components/upload'; import Icons from 'uikit/dist/js/uikit-icons'; UIkit.use(Icons); // UIkit.component('countdown', Countdown); // UIkit.component('filter', Filter); // new // UIkit.component('gridParallax', GridParallax); // UIkit.component('lightbox', Lightbox); // UIkit.component('lightboxPanel', LightboxPanel); // new UIkit.component('notification', Notification); // UIkit.component('parallax', Parallax); // UIkit.component('slider', Slider); // new // UIkit.component('sliderParallax', SliderParallax); // new // UIkit.component('slideshow', Slideshow); // UIkit.component('sortable', Sortable); UIkit.component('tooltip', Tooltip); // UIkit.component('upload', Upload); export default UIkit; |
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.