Upload
alexander-van-trijffel
View
116
Download
0
Embed Size (px)
Citation preview
RequireJS en r.js aanpak
Alexander van Trijffel
Agenda RequireJS aanpak binnen MijnXX Integratie met PolisWeb Bundling met r.js
vs
Waarom AMD / RequireJS?
modulariteit
global namespace
Scripts◦ Config◦ Modules
Shared ViewModules
◦ Vendor Bootstrap
DefaultBundle
◦ Naamgevingconventies: lowercase Streepjes - als scheidingsteken (i.p.v. punten)
Voorbeeld: moment-timezone-with-data.js
Script folderstructuur
Te beginnen met de _Layout..
Bootstrap package
Bootstrap default bundle
ViewBag.DisableScriptsForRequireJsPage PageRequireEntryPoints
Terug naar de _Layout..
PageRequireEntryPoints
Overgeven C# variabelen naar JS
paths
requireconfig
map
Requireconfig
shim
requireconfig
Requireconfigpoliswebcomposite.js
Agenda:◦ Bundling build configuratie◦ Task runner◦ Wijze van inladen bundles◦ Demo
r.js optimization
web.config:Lokaal standaard uit, in alle server omgevingen aan
r.js optimization
require-build-config.js
Lokaal:
Met MinifyJavascript=true:
_Layout: extra requirejs config voor bundling
Caching voor Scripts-built
Require-build-config.js deel II
Lokaal uitvoeren wanneer je MinifyJavascript aan hebt staan en wijzigingen wilt testen!
Gulp task voor r-optimizer
En voor de team build een powershell script om de scripts-built folder te maken:
Gulp task
Volgordelijkheid inladen bundles en scripts die daarvan afhankelijk zijn
Plaats je require in de callback, anders wordt het script niet uit de bundle geladen!
Volgordelijkheid van inladen
Aan de slag met RequireJS modules en bundlesDemo