Te preguntas como
Module_Name/js/path/to/module
se convierte
//magento.example.com/static/frontend/Package/Theme/locale/Module_Name/js/path/to/module.js
En primer lugar, es importante comprender que esto es completamente necesario JS, no ninguna salsa especial de Magento (aunque hay algo de eso en otros lugares). En su mayor parte, el front-end usa solo el comportamiento normal de RequireJS. La magia generalmente está en cómo se genera pub/static, es decir, cómo view/area/web/js/path/to/module.jsse enlaza pub/static/area/Package/theme/Module_Name/js/path/to/module.js. Esto es manejado por el proceso de compilación de activos estáticos de Magento, y no voy a entrar aquí.
requirejs-config.js
Vamos a introducir un nuevo archivo, que usted menciona: requirejs-config.js. Esta es una salsa especial de Magento 2, pero probablemente no tanto como podría pensar.
Este archivo puede ser cualquier JavaScript, pero al menos debe declarar una variable (global) llamada config. El objeto vinculado a configse pasa directamente a requireJS para configurarlo.
La forma en que esto funciona es que Magento encuentra todo requirejs-config.jsen un proyecto. Estos pueden estar en un módulo, debajo view/areao en un tema, en su directorio raíz y en la anulación del módulo de un tema, por ejemplo Magento_Catalog/requirejs-config.js. Tenga en cuenta que esto no incluye ningún elemento secundario de un webdirectorio. Este archivo, en general, debería ser un hermano de un webdirectorio.
Una vez globalizado, cada archivo está decorado en un cierre (por lo que nuestra variable global no lo está), y una línea al final del cierre pasa la configvariable al requireobjeto. Esto puede ser visto:
Esto es 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'
}
}
};
Cuando llegue al front-end, se verá así:
(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);
})();
Esta decoración se puede ver en Magento\Framework\RequireJs\Config.
Cada uno de estos archivos decorados se concatena y se descarga static/_requirejs/area/Package/theme/locale/secure/requirejs-config.js. Esta ubicación se acuerda con anticipación, de modo que el HTML carga este script a medida que carga requireJS:
<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 cómo configurar RequireJS fuera del alcance de esta respuesta, pero tienen bastante buena documentación al respecto . Sin embargo, hay dos cosas importantes a tener en cuenta:
- Las llamadas sucesivas a
require.configcapas colocarán objetos uno encima del otro, por lo que la última escritura gana. No reemplazan, lo cual es crucial.
- Hay una configuración en la parte superior de esta configuración que establece baseUrl. Esto no está en un
requirejs-config.js. Esto se inserta en tiempo de compilación por Magento\Framework\RequireJs\Config.
Olvidando por un momento cómo funciona Magento, qué módulos RequireJS necesitan cargarse (una buena discusión para otro momento, tal vez; Como pista, mira mage/apply/main.js), supongamos que tenemos el código:
require(['modulename'], function () {});
en el vacío en alguna parte. ¿Cómo sabe Magento qué hacer?
Bueno, lo primero que requireJS hará es buscar modulenameen su mapeo. En nuestro caso, aprenderá que debe tratar todas las solicitudes modulenamecomo una solicitud Module_Name/js/path/to/module. Solo hace esto una vez. Las asignaciones no son recursivas. Repito. Si tiene una asignación de aa b, y de ba a, esto intercambiará cada solicitud y no causará un bucle infinito.
Una vez que hemos pasado por el mapeo brouhaha, RequireJS mira lo que tiene. Si termina .jsy no parece un enlace absoluto o una URL, antepondrá el configurado baseUrly cargará ese script a través de sus procedimientos normales. Si no termina .jsy no es un enlace absoluto o URL, se agregará .jsal final, luego antepondrá el configurado baseUrly se cargará a través de sus procedimientos normales. Si requireJS considera que tiene una URL, solo intenta cargarla.