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