Require.js, gestire moduli e dipendenze in JavaScript

È pratica comune utilizzare molte librerie JavaScript, anche dipendenti tra loro, all'interno di uno stesso progetto. Pratica indispensabile per ottenere applicazioni e prodotti in linea con gli standard richiesti dal Web moderno.

Diventa quindi necessario l'utilizzo di metodi che diano la possibilità di gestire le dipendenze tra le varie librerie utilizzate, ottimizzare i tempi di caricamento di una pagina rendendo il codice pulito, modulare e facilmente comprensibile da tutti gli sviluppatori coinvolti nel progetto.

Per questo in questo breve articolo ci occuperemo di di RequireJS, un module loader open source progettato da James Burke e reperibile dal 2011 sul sito requirejs.org.

Partiremo da un semplice esempio in cui, tramite require.js, caricheremo la libreria jquery ed eseguiremo una semplice funzione che aggiungerà un elemento al dom della pagina.

Strutturiamo il nostro progetto in questo modo:

index.html
js/
	app.js
	lib/
		require.js
		jquery.js
		function.js
	app/
		main.js

Iniziamo caricando la libreria all'interno dell'head della pagina index.html:

<script data-main="js/app" src="js/lib/require.js"></script>

L'attributo data-main indica a require.js quale file caricare dopo aver inizializzato la libreria. Nel nostro caso sarà caricato il file app.js contenuto nella cartella js.

App.js

Il file app.js contiene i parametri di configurazione e l'istruzione necessaria a caricare il file main.js in cui definiremo la dipendenza.

requirejs.config({
	"baseUrl": "js/lib",
	"paths": {
		"app": "../app"
	},
	"shim": {
		"function": ["jquery"]
	}
});

Analizziamo gli elementi presenti nell'esempio.

baseUrl

È il percorso principale che require.js usa per la ricerca dei moduli js da caricare nella funzione define, che vedremo a breve.

Tipicamente vengono presi i riferimenti costruiti tramite baseUrl + path + .js (suffisso aggiunto automaticamente ai moduli, che si presume essere file .js). Questa convenzione viene ignorata in alcuni casi, in particolare se inseriamo:

• file con estensione .js (in questo caso il file viene cercato nell stessa directory che contiene la configurazione)
• path che iniziano con uno slash (/)
• URL che inizino con "http:" o "https:"

Se omettiamo baseUrl, il valore di default sarà il path della pagina HTML in cui viene caricato require.js.

Quando invece viene definito l'attributo data-main, il parametro baseUrl ne assume il valore. Ecco un esempio di come si può scrivere l'import della libreria in questo caso:

<script data-main="/js/lib/" src="/js/require.js"></script>

paths

Qui indichiamo i percorsi dei moduli che non si trovano dentro il path valorizzato tramite baseUrl. Le impostazioni della variabile paths sono sempre relative a baseUrl a meno che il valore non inizi con uno slash (/) o abbia un protocollo URL.

Nel nostro esempio la definizione di paths ci servirà per caricare il file main.js contenuto nella cartella app.

shim

Nel caso di dipendenze in cui vengano richiamate funzioni asincrone, onde evitare problemi di caricamento ed errori sugli script risulta utile definire le dipendenze direttamente nel config tramite il metodo shim. Nel nostro caso la dipendenza riguarda function.js e jquery.js.

Completata la configurazione di requirejs caricheremo il file app/main.js mediante la seguente istruzione:

requirejs(["app/main"]);

Main.js e il metodo define

define è il metodo generale da utilizzare per definire moduli e relative dipendenze:

define(["jquery", "function"], function($) {
	$(function() {
		$('body').addptodom();
	});
});

Il primo argomento da passare al metodo define è un array in cui vengono dichiarate le dipendenze necessarie al corretto funzionamento dello script. Nel nostro caso jquery.js e function.js che require.js caricherà dalla cartella definita in precedenza attraverso il parametro baseUrl.

La funzione verrà eseguita nel momento in cui tutte le dipendenze saranno correttamente caricate.

Function.js

Il file contiene la definizione della funzione addptodom che aggiunge un elemento <p> al dom della pagina.

$.fn.addptodom = function() {
	return this.append('<p>Il nostro primo script ha funzionato!</p>');
};

In allegato si può trovare l'esempio completo.