Magento 2에 jQuery 라이브러리 추가

타사 개발자가 어떻게 jQuery 라이브러리를 Magento 2에 추가 할 수 있습니까?

Magento 2의 프론트 엔드 테마에 jQuery 버전이 포함되어 있지만 jQuery 객체 는 글로벌 네임 스페이스에서 즉시 사용할 수 없습니다 . Magento 2가 RequireJS를 사용하여 jQuery를 가져 오기 때문에 RequireJS가 필요할 때까지 모듈 파일을로드하지 않기 때문입니다.

이것은 jQuery 플러그인에 문제가 있습니다. 일반적으로 HTML과 같은 플러그인을 포함 시켰습니다.

<script type="text/javascript" src="http://magento-1-9-2-2.dev/js/commercebug/jquery-ui-1.8.custom/js/jquery.cookie.js"></script>

그러나 Magento 2에서는이 기능을 사용할 수 없습니다. jquery.cookie.js파일이 전역 jQuery 객체를 사용하여 jQuery 플러그인을 정의하므로 Magento 2에서 jQuery is not defined오류 와 함께 실패 합니다.

프론트 엔드 개발자는 Magento 2의 프론트 엔드 애플리케이션에 표준 jquery 플러그인 라이브러리를 어떻게 포함시켜야합니까?

requirejs-config.js 회사 이름 \ 모듈 이름 \ view \ frontend \ requirejs-config.js 추가

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

모듈 Companyname \ Modulename \ view \ frontend \ web \ js \ flexslider.js의 Js 파일
다음 구문을 사용하여 jquery lib를 추가하십시오.

<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>

두 번째 예

<script type="text/javascript">
    require(['jquery'],function($){
        $(window).load(function() {
            alert('jquery working');
        });
    });
</script>

나는 Magento Docs를 인용한다 .

써드 파티 플러그인에 대한 종속성을 빌드하려면 다음 구성 파일에서 shim을 지정하십시오.

requirejs-config.js에서 :

var config = {
  "shim": {
     "3-rd-party-plugin": ["jquery"]
    }
  };

그런 다음 테마 또는 모듈에 타사 플러그인 코드를 포함하십시오 : "web / js / 3-rd-party-plugin.js":

!(function($){
  // plugin code
  // where $ == jQuery
})(jQuery);

이 솔루션은 어떤 종류의 수정없이 플러그인 파일을 포함하기 때문에 유리합니다. 플러그인 작성자가 업데이트하거나 cdn을 사용할 때 간단히 js 파일을 교체하십시오!

가장 좋은 방법은 Magento 2 모듈 또는 테마 를 사용하여 이러한 플러그인 / 라이브러리를 포함 시키는 것 입니다. 권장되는 방법과 모범 사례 입니다.

방법 1> 테마 : javascript / jquery 라이브러리가 테마와 관련된 경우 (시스템의 모양과 느낌을 변경하기 위해)

• 사용자 정의 컴포넌트 소스 파일을 다음 위치 중 하나에 배치하십시오
  [theme_dir] / web / js /
• 당신의 장소 requirejs-config.js의 에서 파일
  [theme_dir을]

방법 2> 모듈 : javascript / jquery 라이브러리가 특정 비즈니스 기능과 관련이 있거나 Magento 기능을 처리하는 경우. 모듈 안에 들어가야합니다.

• 사용자 정의 컴포넌트 소스 파일을 다음 위치 중 하나에 배치하십시오
  [module_dir] / view / frontend / web / js /

• 당신의 장소 requirejs-config.js의 에서 파일을
  [module_dir] /보기 / 프론트 엔드 /

Magento 2는 기본 Magento 구성 요소 및 위젯의 소스 코드를 변경하지 않는 것이 좋습니다. 모든 사용자 정의는 사용자 정의 모듈 또는 테마로 구현해야합니다.

Alan, jQuery UI 위젯 팩토리에는 특별한 경우가 있습니다. AMD와 호환되도록하려면 다음 링크를 확인하십시오.

http://gregfranko.com/blog/registering-the-jqueryui-widget-factory-as-an-amd-module/