RequireJS - Del 2 - Konfigurering

I förra inlägget gavs ett intro till RequireJS. Egentligen skulle detta inlägg handla om optimering. Dock behöver jag först ge en introduktion till konfigurering av RequireJS.

Säg att jag har följande JS-filer i min applikation:

 | - js
     | - lib
         | - backbone.min.js
         | - jquery.min.js
         | - underscore.min.js
         | - require.min.js
     | - amazing-app.js

amazing-app.js är min huvudfil och denna har ett beroende till backbone.min.js. Backbone har beroenden till jQuery samt Underscore. Med RequireJS skulle jag kunna definiera denna modul på följande sätt:

Dock finns det två problem med ovanstående lösning.

1. Referenserna till Underscore och Backbone blir undefined. Anledningen till detta är att Underscore och Backbone inte registrerar sig själva som AMD-moduler (jQuery v1. 7+ gör dock detta).
2. Det är jobbigt att skriva hela sökvägen (js/lib/namn) för att inkludera en fil.

Lösningen heter require.conig:

(I ovanstående konfiguration hämtar jag scripten från ett CDN. Givetvis hade jag lika gärna kunnat peka på t.ex. js/lib/backbone.min, men i utvecklingsfasen är det smidigt att köra mot ett CDN tycker jag.)

shim gör att RequireJS ser till att ett script som inte är AMD-kompatibelt kan användas ändå, genom att exportera det globalt och se till att factory funktionen får dessa som inparametrar.

paths mappar ett dependency genom det alias man valt för modulen.

Med ovanstående konfiguration kan jag nu istället skriva:

Därför lägger jag in denna konfiguration i en egen JS-fil så att jag får följande struktur:

 | - js
     | - lib
         | - backbone.min.js
         | - jquery.min.js
         | - underscore.min.js
         | - require.min.js
     | - config.js
     | - amazing-app.js

Normalt när man inkluderar JS-filer gör man detta i head-taggen eller i slutet av sidan. Med ovanstående exempel kunde det sett ut ungefär såhär: Dock behöver vi inte göra det nu, när vi använder RequireJS. Istället räcker följande script-inkludering: data-main attributet säger åt RequireJS att ladda in och exekvera scriptet js/config.js direkt efter att RequireJS har laddats. Om vi dessutom vill starta upp amazing-app från vår config.js räcker det med att göra följande modifiering:

Detta var en introduktion till konfigurering av RequireJS. Jag har dock endast skrapat lite på ytan, men förhoppningsvis täckt in några av de viktigaste delarna.

Nu laddas varje fil in med RequireJS. Dock laddas filerna in en och en, och så vill man inte ha det i sin produktionsmiljö.

Därför kommer nästa blogg-post handla om optimering!

PS: Bifogar även en liten bonus till @buurd och @demassinner som suttit med kompabilitetsproblem mellan olika versioner av jQuery. Givetvis kan RequireJS lösa detta problem!

https://gist.github.com/nekman/4758785

:)

 /Nils