Magento 2 RequireJS

RequireJS è un componente che consente di caricare file e librerie JavaScript in background e in modalità asincrona migliorando così i tempi di caricamento della pagina.

Tutte le configurazioni vengono passate all’interno del file requirejs-config.js

var config = {
    map: {...},
    paths: {...},
    deps: [...],
    shim: {...},
    config: {
        mixins: {...},
        text: {...}
    }
}

map

La configurazione map connette i moduli AMD ad uno specifico alias e ci consente così di richiamare il modulo js utilizzando semplicemente il suo alias

 map: {
        '*': {
            fiscalCompany: "Ea_ItalianInvoice/js/fiscal-company"
        }
    }

paths

La configurazione paths è simile a map ma utilizzata per creare un alias per qualsiasi file JS (anche da una URL esterna) o template HTML

paths: {            
       'owlcarousel': "Ea_Carousel/js/owl.carousel.min",
        'acceptjs': 'https://js.authorize.net/v1/Accept'
        }, 

oppure un file HTML

 paths: {
         'ui/template/form/element/input': '<vendor_name>_<module_name>/template/form/element/input'
     }

deps

Viene utilizzato per creare una dipendenza. Può essere utilizzato direttamente all’interno di var config = {} , caricando il modulo specificato in tutte le pagine, oppure all’interno della configurazione shim

deps: [
        'js/custom'
    ],

shim

La configurazione shim crea una dipendenza con una libreria di terze parti

shim: {
    '3rd-party-library': ['myJSFile'],
    'another-3rd-party-library': {
        deps: ['myJSFile'],
        exports: 'another3rdPartyLibrary'
    }
}

mixins

La configurazione mixins viene utilizzata per sovrascrivere i metodi di un modulo AMD che restituisce un componente UI, un widget jQuery o un oggetto JS. A differenza delle proprietà di configurazione precedenti, la proprietà mixins è annidata nella proprietà config.

config: {
    mixins: {
        'Vendor_Module/js/module': {
            'Vendor_Module/js/module-mixin': true
        }
    }
}

text

La configurazione text viene utilizzata per impostare le security request headers utilizzando il file text.js.

config: {
    text: {
        'headers': {
            'X-Requested-With': 'XMLHttpRequest'
        }
    }
}