magento 2에서 사용자 정의 모듈 JS 파일을로드하는 방법은 무엇입니까?


9

magento 2 용 배너 슬라이더 모듈을 만들었습니다. 다음과 같은 방법으로 잘 작동하는 JS 파일을 호출했습니다. 블록 클래스에서 다음 함수를 만들었습니다.

public function getBaseJs($fileName){

        return $this->_storeManager->getStore()->getBaseUrl(
                \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
            ).'bannerslider/js/'.$fileName;
    }

이 함수는 bannerslider.phtml다음과 같이 파일 에서 호출됩니다 .

<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery-1.7.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery.flexslider.js') ?>"></script>

그러나 jQuery 종속성 메커니즘에 따르면 require.js어떻게 할 수 있습니까?

답변:


29

마지막으로 쿼리에 대한 솔루션을 얻었습니다. 아래와 같이 상세하게 공유하고 싶습니다.

여기에 이미지 설명을 입력하십시오

1 단계 : 아래에 모듈 js 파일 추가<Vendor>/<Module_Name>/view/<area>/web/js/

예 : <Vendor>/<Module_Name>/view/<area>/web/js/flexslider.js

2 단계 :requirejs-config.js 아래에 파일 작성<Vendor>/<Module_Name>/view/<area>/

예 : <Vendor>/<Module_Name>/view/<frontend>/requirejs-config.js

다음 코드를 추가하십시오 requirejs-config.js

var config = {
    map: {
        '*': {
            bannerslider: 'VendorName_ModuleName/js/flexslider'
        }
    }
};

참고 : 원하는대로 개체 이름을 설정할 수 있습니다. 내 경우에는로 설정 bannerslider하고 파일 이름에 .js 확장자를 추가하지 마십시오.VendorName_ModuleName/js/flexslider

3 단계 : 다음과 같이 파일 function에서 모듈 js를 호출하십시오 .phtml.

<script type="text/javascript">
    require(['jquery','bannerslider'],function($){
        $(window).load(function() {
            $('.flexslider-8').flexslider({
                animation: "fade",
                controlNav: "thumbnails",
                slideshowSpeed: 2000,
                minItems: 2,
                maxItems: 4
            });
        });

    });
</script>

그것은 나를 위해 잘 작동합니다.

추적 : Net탭을 사용 하여 요청 된 js 파일의 URL 이로 드되었는지 확인하십시오.

여기에 이미지 설명을 입력하십시오


4
'domReady!'를 사용하는 것이 좋습니다 $ (window) .load () 대신 플러그인 (예 : require ([ 'jquery', 'bannerslider', 'domReady!], function ($) {... code dom load 후에 만 ​​실행}))
KAndy

예, 매우 유용합니다.
Praful Rajput

@KAndy 스크립트를 마지막으로 실행하려면 $ (window)를 사용하는 것이 좋지 않습니까? DOM을 읽을 때뿐만 아니라 모든 스크립트가 실행될 때 스크립트가 실행되도록합니까?
Lachezar Raychev

그리고 그 방법은 나를 위해 작동하지 않습니다 ... static / adminhtml / Magento / backend / en_US / gift.js라고 말합니다 404 (찾을 수 없음) 캐시와 펍 / 정적을 제거했습니다. 봇 nope .. 작동하지 않습니다
Lachezar Raychev

흠집, 그것은 작동합니다 ... domReady! 그래도 작동하지 않습니다 ... 다른 모든 스크립트가로드 된 후 또는 현재 magent2 방법론에 존재하지 않는 스크립트를 실행하도록 지시하려면 어떻게해야합니까?
Lachezar Raychev

4

내 길은 :

1 단계

레이아웃 지침을 사용하여 확장의 기본 자바 스크립트 파일을 포함합니다.

2 단계

RequireJS를 사용하여 기본 파일에서 확장의 다른 자바 스크립트 파일이 필요합니다.

require(
    [
      'jquery', 
      '{VendorName}_{ModuleName}{path_to_js_file/relative_to/view/web/no_js_at_end}'
     // ex. Magento/Ui/view/base/web/js/grid/sticky/sticky.js
     // became Magento_Ui/js/grid/sticky/stick
    ], 
    function($, someOtherLibrary) {
        // custom code here...
    );
});

1
requirejs 전에 내 js가로드 되었기 때문에 require가 정의되지 않았다는 오류가 발생했습니다
simple guy
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.