NPM-pakketten in Experience Builder 1.8

NiklasKöhn

Bij het integreren van enkele NPM-pakketten in ExB 1.8-widgets kwam ik het probleem tegen dat Webpack 5 geen polyfills meer bevat voor Node Core Modules. Dit uit zich in de foutmelding "BREAKING CHANGE: webpack < 5 gebruikte standaard polyfills voor node.js core modules", <\/SPAN>en dat betekent in het Hoogduits:<\/EM><\/DIV>Pakketten die kernfuncties van node.js gebruiken, werken niet meer native met Webpack 5.<\/STRONG><\/DIV> <\/DIV>Op zoek naar een verklaring leek de volgende plausibel: "Webpack 4 polyfillde automatisch veel Node-API's in de browser.<\/STRONG> Dit was geen geweldig systeem, omdat het kon leiden tot verrassend grote bibliotheken<\/STRONG> die per ongeluk in je app werden opgenomen, en het gaf je geen controle over de exacte versies van de polyfills die je gebruikte. <\/SPAN>Dus heeft Webpack 5 deze functionaliteit verwijderd." (Bron<\/A>)<\/SPAN><\/DIV>

 <\/DIV>

Oplossingen zijn te vinden

op veel plaatsen<\/A>, direct in de foutmeldingen in de console en ook onder de bovengenoemde bron: De benodigde bronnen moeten in de webpack.config onder resolve.fallback worden opgenomen en via 'npm i' worden geïnstalleerd.<\/STRONG><\/DIV> <\/DIV>Tot zover mooi. Alleen is deze configuratie in ExB versnipperd en verdeeld over meerdere bestanden:
<\/span> <\/P>Van links naar rechts:<\/SPAN><\/P>webpack.config.js<\/EM> in de "client" root-map verwijst naar webpack-extensions.config.js<\/EM> in de submap "webpack"<\/LI>webpack-extensions.config.js<\/EM> stelt de config samen uit verwijzingen naar webpack-extensions.common.js<\/EM><\/LI>in webpack-extensions.common.js<\/EM> komt het resolve<\/EM>-object op 3 plaatsen voor, namelijk ingetTemplatesWebpackConfig(), <\/SPAN>getWidgetsWebpackConfig() en <\/SPAN>getThemesWebpackConfig(). Hier wordt de eigenschap fallback<\/EM> ingevuld, waarvan de inhoud (net als bij de andere eigenschappen) wordt opgenomen in webpack.common.js<\/EM>.<\/SPAN><\/DIV><\/LI>in webpack.common.js<\/EM> staan tenslotte de verwijzingen naar de "in te vullen" pakketten onder exports<\/SPAN>.<\/<\strong>fallback.<\/<\em>

Dat werkt.

Nadelig is, dat de Webpack-bestanden op rootniveau van de "client"-map niet in de code-repository staan, maar met ExB worden geleverd. ExB biedt immers precies het voordeel om eigen als "exb-web-extension-repo" gemarkeerde Git-repositories te kunnen koppelen, en zo alleen je eigen broncode in versiebeheer te hebben (zonder wilde kopieeracties in het buildproces te integreren zoals jaren geleden met Gulp voor WebApp-Builder-projecten door ons gerealiseerd). Gebruik je nu NPM-pakketten die polyfills nodig hebben in je Custom Widgets, dan moet je bij de Webpack-configuraties kunnen, die echter niet in het repo staan.

 

Mijn oplossing: Ik heb in mijn repository een submap genaamd "_webpack5-config-updates" aangemaakt, die als eerste commit de originele meegeleverde configs bevatte. In de tweede commit staan mijn aanvullingen, zodat je ook kunt zien wat er veranderd is.

 

Dit wordt vooral belangrijk wanneer je meerdere repos wilt integreren die elk hun eigen polyfills nodig hebben. Want dan moet je de configs manual bekijken en alle benodigde polyfills opnemen in de Webpack-configs binnen de "client"-map.

Precies daarom is deze oplossing ook niet echt zo cool. 

 

Iemand hier ideeën? - a.u.b. graag melden en bespreken!

 

NiklasKöhn

Na gut, hier ist eine Idee. Um einfach wieder alle hinzuzufügen,  gibt es dieses Paket: https://www.npmjs.com/package/node-polyfill-webpack-plugin
Ich hab's nicht ausprobiert. Wer will?