Opsi persyaratan shim tidak berfungsi


11

Saya sedang mengembangkan modul untuk Magento2 dan saya menggunakan requireejs untuk memuat javascript khusus yang bergantung pada jquery. Saya menggunakan opsi shim di requireejs-config.js untuk mengatur ketergantungan ini antara skrip khusus dan jquery. Masalahnya adalah bahwa ketergantungan ini tidak (selalu) ditetapkan. Terkadang jQuery memuat sebelum skrip dan semuanya baik-baik saja tetapi kadang-kadang memuat setelah skrip yang menghasilkan kesalahan skrip:

Uncaught ReferenceError: jQuery is not defined(anonymous function) @ jquery.easing.1.3.js:39
Uncaught ReferenceError: jQuery is not defined(anonymous function) @ jquery.flexslider-min.js:5
Uncaught TypeError: $(...).flexslider is not a function

Lihat di bawah ini contoh dari requirejs-config.js saya:

var config = {
    map: {
        '*': {
            'flexslider': 'Vendor_Modulejs/jquery.flexslider-min',
            'picturefill': 'Vendor_Modulejs/picturefill.min',
            'easing': 'Vendor_Modulejs/jquery.easing.1.3',
            'hoverintent': 'Vendor_Modulejs/jquery.hoverIntent',
            'fitvids': 'Vendor_Modulejs/jquery.fitvids',
            'vimeo': 'Vendor_Modulejs/jquery.vimeo.api.min'
        }
    },
    shim: {
        'flexslider': ['jquery'],
        'picturefill': ['jquery'],
        'easing': ['jquery'],
        'hoverintent': ['jquery'],
        'fitvids': ['jquery'],
        'vimeo': ['jquery']
    }
};

Ini adalah javascript dalam file phtml saya:

require(['jquery', 'domReady!', 'picturefill', 'flexslider', 'easing', 'hoverintent', 'fitvids', 'vimeo'], function($) {
    "use strict";

    // javascript here

});

Apa yang saya lakukan salah di sini, mengapa opsi shim tidak dihormati dan jQuery tidak selalu dimuat sebelum skrip lain.

Jawaban:


20

Anda harus mengatur requireejs-config.js seperti di bawah ini,

Lebih detail, lihat tautan, Cara Menyelesaikan kesalahan yang Diperlukan di Magento 2

 var config = {
        paths: {
                'flexslider': 'Vendor_Modulejs/jquery.flexslider-min',
                'picturefill': 'Vendor_Modulejs/picturefill.min',
                'easing': 'Vendor_Modulejs/jquery.easing.1.3',
                'hoverintent': 'Vendor_Modulejs/jquery.hoverIntent',
                'fitvids': 'Vendor_Modulejs/jquery.fitvids',
                'vimeo': 'Vendor_Modulejs/jquery.vimeo.api.min'
        },
        shim: {
                'flexslider': {
                    deps: ['jquery']
                },
                'picturefill': {
                    deps: ['jquery']
                },
                'easing': {
                    deps: ['jquery']
                },
                'hoverintent': {
                    deps: ['jquery']
                },
                'fitvids': {
                    deps: ['jquery']
                },
                'vimeo': {
                    deps: ['jquery']
                }
        }
    };

Gunakan kode di atas dan hapus folder var dan coba. Terima kasih.


Ini tampaknya memang berhasil dan saya telah menandai ini sebagai jawabannya. Saya ingin mengerti mengapa ini berhasil. Apakah itu jalan bukannya konfigurasi peta atau pengaturan dependensi khusus dalam konfigurasi shim. Dokumentasi yang diperlukan menyebutkan Anda dapat menggunakan array dependensi di konfigurasi shim alih-alih menentukan setiap dependensi secara terpisah. Jadi tebakan saya adalah perbedaan jalur versus peta, tapi mengapa?
Solide

2
Anda dapat memeriksa referensi dari pos ini, stackoverflow.com/questions/19216580/requirejs-paths-vs-map
Rakesh Jesadiya

1
Jangan pernah menghapus / var karena mengandung informasi yang berguna
Maks

Hai Rakesh, Bisakah Anda menjelaskan cara kerja kode di atas
Jaisa

@Jaisa, saya telah menguraikan lebih banyak di blog saya di tautan yang diberikan di atas
Rakesh Jesadiya
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.