Come / dove Magento converte un nome del modulo RequireJS in un URL?

In Magento 2, puoi utilizzare RequireJS per includere un modulo javascript con un codice simile a questo.

#File: app/code/Package/Name/view/frontend/requirejs-config.js
var config = {
    map: {
        '*': {
            modulename: 'Package_Name/js/path/to/file'
        }
    }
}

Mentre il requirejs-config.jsfile è un po 'magico di Magento 2, questo sembra essere RequireJS standard. In pratica stai mappando il nome breve modulenamesul modulo javascript chiamato Package_Name/js/path/to/file.

Ciò che non è chiaro è dove o come Magento 2 converte il nome del modulo javascript sopra

Package_Name/js/path/to/file

Nell'URL HTTP (S)

//magento.example.com/static/frontend/Magento/luma/en_US/Package_Name/js/path/to/file.js

In un sistema RequireJS di serie, RequireJS tenterebbe di caricare il seguente URL

//magento.example.com/Package_Name/js/path/to/file.js

Quindi chiaramente Magento sta facendo qualcosa per garantire che l'URL sopra sia convertito in un URL frontend Magento. Ciò che non è chiaro è

1. Dove ciò accade (livello PHP? Livello Javascript?)
2. Quali sono le regole per quella conversione. Il modulo RequireJS non sembra un identificatore di file Magento standard ( Package_Name::js/path/to/file)

Quindi, come / dove Magento 2 / RequireJS converte il modulo in un percorso.

RequireJS ha una funzione che ti consente di impostare un baseUrl personalizzato .

Magento genera baseUrl per RequireJS nel corpo della pagina, dove sono richieste le risorse JS. Quindi, sostanzialmente è un'altra parte della configurazione di RequireJS generata da Magento. Questo URL di base viene calcolato sul lato server e si basa sul tema corrente, sulla locale e sull'URL di base per i file di visualizzazione statica per l'archivio. Quindi la funzionalità nativa RequireJS calcola il percorso completo come segue

baseUrl + file + '.js'

Ti stai chiedendo come

Module_Name/js/path/to/module

diventa

//magento.example.com/static/frontend/Package/Theme/locale/Module_Name/js/path/to/module.js

Prima di tutto, è importante capire che questo è del tutto necessario JS, non qualsiasi salsa speciale Magento (anche se ce n'è un po 'altrove). Per la maggior parte, il front-end utilizza solo il normale comportamento di RequireJS. La magia è di solito nel modo in cui si genera pub/static, vale a dire in che modo view/area/web/js/path/to/module.jsè collegata a symlink pub/static/area/Package/theme/Module_Name/js/path/to/module.js. Questo è gestito dal processo di compilazione delle risorse statiche di Magento, e non ci vado qui.

requirejs-config.js

Introduciamo un nuovo file, che si parla: requirejs-config.js. Questa è una salsa speciale di Magento 2, ma probabilmente non tanto quanto potresti pensare.

Questo file può essere qualsiasi JavaScript, ma dovrebbe almeno dichiarare una variabile (globale) chiamata config. L'oggetto associato configviene passato direttamente a requestJS per configurarlo.

Il modo in cui funziona Magento trova tutto requirejs-config.jsin un progetto. Questi possono trovarsi in un modulo, sotto view/areao in un tema, nella sua directory principale e nella sostituzione del modulo di un tema, ad es Magento_Catalog/requirejs-config.js. Si noti che ciò non include alcun figlio di una webdirectory. Questo file, in generale, dovrebbe essere un fratello o una sorella web.

Una volta globbed, ogni file viene decorato in una chiusura (quindi la nostra variabile globale in realtà non lo è) e una linea alla fine della chiusura passa la configvariabile requireall'oggetto. Questo può essere visto:

Questo è Magento_Checkout::view/frontend/requirejs-config.js:

/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

 var config = { 
 map: { 
 '*': { 
 discountCode: 'Magento_Checkout/js/discount-codes',
 shoppingCart: 'Magento_Checkout/js/shopping-cart', 
 regionUpdater: 'Magento_Checkout/js/region-updater', 
 opcOrderReview: 'Magento_Checkout/js/opc-order-review',
 sidebar: 'Magento_Checkout/js/sidebar', 
 payment: 'Magento_Checkout/js/payment', 
 paymentAuthentication: 'Magento_Checkout/js/payment-authentication' 
 }
 } 
};

Quando arriva al front-end, sarà simile a questo:

(function() {
 /**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

 var config = { 
 map: { 
 '*': { 
 discountCode: 'Magento_Checkout/js/discount-codes',
 shoppingCart: 'Magento_Checkout/js/shopping-cart', 
 regionUpdater: 'Magento_Checkout/js/region-updater', 
 opcOrderReview: 'Magento_Checkout/js/opc-order-review',
 sidebar: 'Magento_Checkout/js/sidebar', 
 payment: 'Magento_Checkout/js/payment', 
 paymentAuthentication: 'Magento_Checkout/js/payment-authentication' 
 }
 } 
}; require.config(config);
})();

Questa decorazione è visibile in Magento\Framework\RequireJs\Config.

Ognuno di questi file decorati viene concatenato e scaricato static/_requirejs/area/Package/theme/locale/secure/requirejs-config.js. Questa posizione è concordata in anticipo, in modo che l'HTML carichi questo script man mano che richiedeJS:

<script type="text/javascript" src="https://magento.example.com/static/area/Package/theme/locale/requirejs/require.js"></script> <script type="text/javascript" src="https://magento.example.com/static/_requirejs/area/Package/theme/locale/secure/requirejs-config.js"></script>

Considero come configurare RequireJS al di fuori dell'ambito di questa risposta, ma hanno abbastanza buona documentazione su questo . Ci sono due cose importanti da notare, però:

1. Le chiamate successive a require.configsovrappongono gli oggetti uno sopra l'altro, quindi vince l'ultima scrittura. Non sostituiscono, il che è cruciale.
2. C'è una configurazione nella parte superiore di questa configurazione che imposta baseUrl. Questo non è in a requirejs-config.js. Questo viene inserito in fase di compilazione da Magento\Framework\RequireJs\Config.

Dimenticando per un momento come Magento risolva quali moduli RequireJS devono essere caricati (una buona discussione per un'altra volta, forse; Come suggerimento, guarda dentro mage/apply/main.js), supponiamo di avere il codice:

require(['modulename'], function () {});

nel vuoto da qualche parte. Come fa Magento a sapere cosa fare?

Bene, la prima cosa che richiederà a JS è cercare modulenamenella sua mappatura. Nel nostro caso, imparerà che dovrebbe trattare tutte le richieste modulenamecome richieste Module_Name/js/path/to/module. Lo fa solo una volta. I mapping non sono ricorsivi. Io ripeto. Se si dispone di un mapping da aa b, e da ba a, questo cambierà ogni richiesta e non causerà un ciclo infinito.

Dopo aver esaminato la mappatura brouhaha, RequireJS esamina ciò che ha. Se termina .jse non sembra un collegamento assoluto o un URL, anteporrà la configurazione baseUrle caricherà quello script attraverso le sue normali procedure. Se non termina in .jse non è un collegamento o URL assoluto, verrà aggiunto .jsalla fine, quindi anteporre la configurazione baseUrle caricare attraverso le sue normali procedure. Se requestJS ritiene che abbia un URL, prova solo a caricarlo.

Sta usando i componenti per ulteriori dettagli, controlla Magento \ Framework \ View \ Element \ Js \ Components class e defaul module file vendor \ magento \ module-catalog \ view \ frontend \ layout \ default.xml

<referenceContainer name="after.body.start">
        <block class="Magento\Framework\View\Element\Js\Components" name="head.components" as="components" template="Magento_Catalog::js/components.phtml"/>
    </referenceContainer>