Requirejs shim 옵션이 작동하지 않습니다


11

Magento2 용 모듈을 개발 중이며 requirejs를 사용하여 jquery에 의존하는 사용자 정의 자바 스크립트를로드하고 있습니다. 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 파일의 자바 스크립트입니다.

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 폴더를 제거하고 시도하십시오. 감사.


이것은 실제로 트릭을 수행하는 것으로 보이며이 답변으로 표시했습니다. 왜 이것이 작동하는지 이해하고 싶습니다. maps 구성 대신 경로이거나 shim 구성의 특정 종속성 설정입니다. requirejs 문서에는 각 종속성을 별도로 지정하는 대신 shim 구성에서 종속성 배열을 사용할 수 있다고 언급되어 있습니다. 그래서 내 추측은 그것이 경로와지도의 차이라고 생각하지만 왜 그럴까요?
Solide

2
이 게시물에서 참조를 확인할 수 있습니다. stackoverflow.com/questions/19216580/requirejs-paths-vs-map
Rakesh Jesadiya

1
유용한 정보가 포함되어 있으므로 / var를 삭제하지 마십시오.
Max

안녕하세요 Rakesh, 위의 코드가 어떻게 작동하는지 설명 할 수 있습니까
Jaisa

@Jaisa, 나는 위의 링크에서 내 블로그에서 더 자세히 설명했습니다
Rakesh Jesadiya
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.