Requirejsシムオプションが機能しない


11

Magento2のモジュールを開発しています。requirejsを使用して、jqueryに依存するカスタムJavaScriptをロードしています。requirejs-config.jsのshimオプションを使用して、カスタムスクリプトとjqueryの間にこの依存関係を設定しています。問題は、この依存関係が(常に)設定されていないことです。jQueryはスクリプトの前に読み込まれることもあれば、問題なく動作することもありますが、スクリプトの後で読み込まれることもあり、スクリプトエラーが発生します。

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

以下のrequirejs-config.jsの例をご覧ください。

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']
    }
};

これは私のphtmlファイルのjavascriptです。

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

    // javascript here

});

ここで何が間違っているのですか、shimオプションが受け入れられず、jQueryが他のスクリプトの前に常に読み込まれるとは限らないのはなぜですか。

回答:


20

以下のようにrequirejs-config.jsを設定する必要があります。

詳細、リンクの参照、Magento 2でのRequireJsエラーの解決方法

 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']
                }
        }
    };

上記のコードを使用してvarフォルダーを削除し、試してください。ありがとう。


これは確かにトリックを行うようであり、私はこれを答えとしてマークしました。なぜこれが機能するのか理解したいのですが。それはマップ設定の代わりのパスですか、それともシム設定の特定の依存関係設定ですか?requirejsのドキュメントには、依存関係を個別に指定する代わりに、shim設定で依存関係の配列を使用できると記載されています。だから、私の推測では、パスとマップの違いだと思いますが、なぜですか?
Solide 2016


1
/ varには有用な情報が含まれているため、絶対に削除しないでください
Max

こんにちはラケッシュは、あなたは上記のコードがどのように動作するかを説明することができます
Jaisa

@Jaisa、上記のリンクにあるブログでさらに詳しく説明します
Rakesh Jesadiya 2018
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.