Magento 2: requireejs-config.js dalam tema?

Apakah mungkin untuk memasukkan requirejs-config.jsfile (atau mengkonfigurasi RequireJS) melalui tema Magento? Atau kemampuan dicadangkan untuk modul Magento? Informasi dev docs tentang struktur tema tidak jelas untuk poin ini.

Dev docs tidak menyebutkan apa pun tentang RequireJS - namun, tema menyertakan webyang artinya javascript dapat digabungkan dengan mereka. Jika javascript dapat dibundel dengan tema, itu berarti modul RequireJS dapat dibundel dengan tema, dan jika modul RequireJS dapat dibundel dengan tema, modul tersebut mungkin memerlukan konfigurasi RequireJS tertentu.

Asumsi naif saya akan tema akan memiliki kemampuan ini, tapi saya belum dapat menemukan dokumentasi dengan cara ini atau yang lain, dan belum sore bebas untuk menghabiskan melakukan kode yang diperlukan spelunking pada requirejs-config.jsfile Magento termasuk.

Anda benar-benar dapat memasukkan memerlukan-config.js dalam tema Anda Modul dirs.

Masalahnya adalah (sebenarnya untuk tim frontend kami) bahwa tampaknya tidak ada kemungkinan, untuk mengesampingkan konfigurasi, tetapi untuk memperpanjang konfigurasi.

Jadi, untuk mengambil modul Magento_Theme untuk contoh di sini, jika Anda menambahkan memerlukan-config.js di bawah <theme_base_dir>/Magento_Themedir, konfigurasi akan ditambahkan ke file yang diperlukan-config.js yang dihasilkan dan juga konfigurasi dari modul Magento_Theme akan ditambahkan.

Untuk menjawab pertanyaan Anda, saya juga mencoba untuk menambahkan memerlukan-config.js di bawah tema tema <theme_base_dir>/webdan juga di bawah tema tema direktori. Keduanya tidak bekerja. pembaruan: sebenarnya sesuai dengan jawaban di bawah ini, dimungkinkan dengan menempatkannya ke dalam basis tema tem

Jadi jawabannya pada dasarnya ya, karena Anda dapat menambahkan persyaratan js di bawah modul apa pun (file tema terkait js mungkin lebih baik ditempatkan di bawah <theme_base_dir>/Magento_Themedir)

Meskipun saya akan mengatakan, harus ada kemungkinan untuk menambahkan tema yang terkait dengan memerlukan-config.js di luar Modul apa pun (mungkin Anda menonaktifkan modul yang diberikan) dan juga harus memungkinkan untuk mengganti modul yang membutuhkan-config.js.

Keduanya sepertinya tidak mungkin atm.

=== UPDATE ===

sebenarnya sepertinya mungkin untuk memiliki theme-need-config.js yang spesifik. Lihat @Gareth Daine's Jawaban di bawah ini

OK, saya pikir saya mungkin telah menyelesaikannya dan saya percaya bahwa dokumentasinya ambigu dan perlu diperbarui untuk memperjelas prosesnya.

Saya pindah requirejs-config.jsdari dalam web/jsdan webdirektori masing-masing untuk kedua Magento_Themedan akar tema saya di <Vendor>/<theme>dan sekarang konfigurasi RequireJS saya digabung menjadi main requirejs-config.jsdengan semua termasuk lainnya.

Jadi, tampaknya Anda harus memasukkan requirejs-config.jsfile di lokasi berikut berdasarkan persyaratan tema / modul.

Tingkat Tema

app/design/frontend/<Vendor>/<theme>/requirejs-config.js

Tingkat Modul

app/design/frontend/<Vendor>/<theme>/<Module_Name>/requirejs-config.js

Jadi, dalam requirejs-config.jsuntuk tema Anda, Anda harus memetakan komponen Anda ke jalur dan kemudian gunakan shimuntuk mendeklarasikan dependensi:

var config = {
    map: {
        'component': 'js/component'
    },
    shim: {
        'component': {
            deps: ['jquery']
        }
    }
};

Maka Anda harus membuat templat untuk menahan inisialisasi komponen melalui <script>tag (kecuali jika Anda melampirkannya langsung ke elemen dalam file .phtml) jika ini adalah rute yang ingin Anda turunkan, sertakan konten berikut:

<script type="text/x-magento-init">
    {
        "*": {
            "js/component": {} // Not entirely sure what {} is and what I'm passing here
        }
    }
</script>

Sebagai alternatif, ikat ke elemen:

<script type="text/x-magento-init">
    {
        "#element": {
            "js/component": {} // Not entirely sure what {} is and what I'm passing here
        }
    }
</script>

Kemudian cukup sertakan templat .phtml dalam instruksi tata letak Anda, misalnya, saya menempatkan milik saya di dalam yang default.xmlterletak di app/design/frontend/<Vendor>/<theme>/Magento_Theme/layoutbawah simpul tubuh dan direferensikan:

<block class="Magento\Framework\View\Element\Template" name="theme.js" template="Magento_Theme::html/js.phtml" />

Tidak memiliki perwakilan yang cukup untuk membuat komentar ini, tetapi hanya untuk mencatat bahwa jawaban Gareth tidak bekerja untuk saya.

var config = {
    map: {
        '*': {
            'component': 'js/component'
        }
    },
    shim: {
        'component': {
            deps: ['jquery']
        }
    }
};

Membungkus 'komponen': 'js / komponen' dengan '*':{}melakukan trik.

Juga daripada membuat file templat saya menambahkan kode di bawah ini di bagian atas app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default.xml

    <referenceContainer name="after.body.start">
        <block class="Magento\Framework\View\Element\Text" name="jquery.bootstrap">
            <arguments>
                <argument translate="true" name="text" xsi:type="string"><![CDATA[<script type="text/x-magento-init">{"*":{"jquery.bootstrap":{}}}</script>]]></argument>
            </arguments>
        </block>
    </referenceContainer>

Ya requirejs-config.jsdapat ditambahkan ke tema sebagai berikut. Ini adalah bagaimana saya menambahkan perpustakaan dotdotdot di tema khusus magento2 saya.

1. Unduh dan tambahkan Js Library di tema Anda mengikuti jalur:

// app/design/frontend/Namespace/themename/web/js/jquery.dotdotdot.min.js

2. Buat file requirejs tema sebagai follow dan biarkan requirejs tahu pustaka yang baru ditambahkan.

// app/design/frontend/Namespace/themename/requirejs-config.js
var config = {
   map: {
       '*': {
           dotdotdot: 'js/jquery.dotdotdot.min',
       }
   }
};

3. Gunakan perpustakaan yang ditambahkan di file js utama tema Anda sebagai berikut:

// app/design/frontend/Namespace/themename/web/js/main.js
require([ 'jquery' , 'dotdotdot' , 'domReady!'],function($){
    $(window).load(function() {
        //custom js code
        /* $(".product-item-name").each(function(){
            $(this).dotdotdot(); 
        }); */
    });
});

4. dan sertakan file js tema Anda di kepala situs Anda sebagai berikut:

// app/design/frontend/Namespace/themename/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="js/main.js"/> 
    </head>
</page>

Anda dapat menambahkan perpustakaan JS eksternal dan file khusus pada setiap halaman di magento2.