Bagaimana / Di mana Magento mengonversi Nama modul RequireJS menjadi URL?

Di Magento 2, Anda dapat menggunakan RequireJS untuk memasukkan modul javascript dengan kode yang terlihat seperti ini.

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

Walaupun requirejs-config.jsfile ini sedikit ajaib Magento 2, ini tampaknya merupakan Persyaratan standar. Anda pada dasarnya memetakan nama pendek modulenameke modul javascript bernama Package_Name/js/path/to/file.

Yang tidak jelas adalah di mana atau bagaimana Magento 2 mengubah nama modul javascript di atas

Package_Name/js/path/to/file

Ke dalam url HTTP (S)

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

Dalam sistem Stock RequireJS, RequireJS akan mencoba memuat URL berikut

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

Jadi jelas Magento melakukan sesuatu untuk memastikan URL di atas dikonversi menjadi URL frontend Magento. Yang tidak jelas adalah

1. Di mana ini terjadi (lapisan PHP? Lapisan Javascript?)
2. Apa aturan konversi itu. Modul RequireJS tidak terlihat seperti pengidentifikasi file Magento standar ( Package_Name::js/path/to/file)

Jadi, bagaimana / di mana Magento 2 / RequireJS mengubah modul menjadi jalur.

RequireJS memiliki fitur yang memungkinkan Anda untuk mengatur basisUrl kustom .

Magento menghasilkan baseUrl untuk RequireJS di badan halaman, di mana sumber daya JS diminta. Jadi, ini pada dasarnya satu bagian lagi dari konfigurasi RequireJS yang dihasilkan oleh Magento. BaseUrl ini dihitung di sisi server dan didasarkan pada tema saat ini, lokal dan URL dasar untuk file tampilan statis untuk toko. Kemudian fungsionalitas RequireJS asli menghitung jalur lengkap sebagai berikut

baseUrl + file + '.js'

Anda bertanya-tanya bagaimana caranya

Module_Name/js/path/to/module

menjadi

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

Pertama-tama, penting untuk memahami bahwa ini sepenuhnya memerlukan JS, bukan saus khusus Magento (, meskipun ada beberapa di tempat lain). Untuk sebagian besar, front-end hanya menggunakan perilaku normal RequireJS. Keajaiban biasanya dalam bagaimana ia menghasilkan pub/static, yaitu bagaimana view/area/web/js/path/to/module.jsdisinkronkan dengan pub/static/area/Package/theme/Module_Name/js/path/to/module.js. Ini ditangani oleh proses kompilasi aset statis Magento, dan saya tidak membahasnya di sini.

requirejs-config.js

Mari kita memperkenalkan sebuah file baru, yang Anda sebutkan: requirejs-config.js. Ini adalah saus spesial Magento 2, tetapi mungkin tidak sebanyak yang Anda kira.

File ini dapat berupa JavaScript apa saja, tetapi paling tidak harus mendeklarasikan variabel (global) yang dipanggil config. Objek terikat ke configditeruskan langsung ke memerlukan JS untuk mengkonfigurasinya.

Cara kerjanya adalah Magento menemukan semuanya requirejs-config.jsdalam sebuah proyek. Ini bisa dalam modul, di bawah view/area, atau di tema, di direktori root, dan di modul tema menimpa, misalnya Magento_Catalog/requirejs-config.js. Perhatikan bahwa ini tidak termasuk anak webdirektori. File ini, seharusnya, secara umum menjadi saudara kandung suatu webdirektori.

Setelah digumpalkan, setiap file didekorasi dengan penutupan (jadi variabel global kita sebenarnya tidak), dan garis di akhir penutupan meneruskan configvariabel ke requireobjek. Ini bisa dilihat:

Ini adalah 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' 
 }
 } 
};

Ketika sampai ke ujung depan, akan terlihat seperti ini:

(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);
})();

Dekorasi ini bisa dilihat di Magento\Framework\RequireJs\Config.

Masing-masing file yang dihiasi ini digabungkan dan dibuang static/_requirejs/area/Package/theme/locale/secure/requirejs-config.js. Lokasi ini disepakati sebelumnya, sehingga HTML memuat skrip ini saat memuat memerlukan JS:

<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>

Saya mempertimbangkan cara mengkonfigurasi RequireJS di luar cakupan untuk jawaban ini, tetapi mereka memiliki dokumentasi yang cukup bagus untuk ini . Ada dua hal penting yang perlu diperhatikan:

1. Panggilan yang berurutan untuk require.configakan melapisi objek di atas satu sama lain, sehingga penulisan terakhir menang. Mereka tidak menggantikan, yang sangat penting.
2. Ada satu konfigurasi di bagian atas konfigurasi ini yang menetapkan baseUrl. Ini bukan dalam a requirejs-config.js. Ini dimasukkan pada waktu kompilasi oleh Magento\Framework\RequireJs\Config.

Melupakan sejenak bagaimana Magento bekerja pada modul RequireJS mana yang perlu dimuat (diskusi yang baik untuk waktu lain, mungkin; Sebagai petunjuk, lihatlah mage/apply/main.js), misalkan kita memiliki kode:

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

di ruang hampa di suatu tempat. Bagaimana Magento tahu apa yang harus dilakukan?

Nah, hal pertama yang perlu JS lakukan adalah melihat modulenamedalam pemetaannya. Dalam kasus kami, ia akan belajar bahwa itu harus memperlakukan semua permintaan modulenamesebagai permintaan Module_Name/js/path/to/module. Ini hanya dilakukan sekali saja. Pemetaan tidak rekursif. Saya ulangi. Jika Anda memiliki pemetaan dari ake b, dan dari bke a, ini akan menukar setiap permintaan, dan tidak akan menyebabkan perulangan tak terbatas.

Setelah kami melalui pemetaan brouhaha, RequireJS melihat apa yang dimilikinya. Jika diakhiri .js, dan tidak terlihat seperti tautan absolut atau URL, itu akan menambah konfigurasi baseUrldan memuat skrip itu melalui prosedur normalnya. Jika tidak berakhir .jsdan bukan merupakan tautan atau URL absolut, itu akan menambah .jssampai akhir, kemudian tambahkan yang sudah dikonfigurasi baseUrldan muat melalui prosedur normalnya. Jika mensyaratkan JS menganggapnya memiliki URL, itu hanya mencoba memuatnya.

Ini menggunakan komponen lebih lanjut lebih detail Anda memeriksa Magento \ Framework \ View \ Element \ Js \ Komponen kelas dan defaul vendor file modul \ 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>