requirejs를 사용하여 jQuery 플러그인을로드 가능하게 만드는 방법

나는 requirejs + jquery로 작업하고 있으며 jQuery 플러그인을 require와 잘 작동시키는 현명한 방법이 있는지 궁금합니다.

예를 들어 jQuery-cookie를 사용하고 있습니다. 내가 올바르게 이해했다면 jquery-cookie.js라는 파일을 만들 수 있으며 내부에서 할 수 있습니다.

define(["jquery"], // Require jquery
       function($){
// Put here the plugin code. 
// No need to return anything as we are augmenting the jQuery object
});
requirejs.config( {
    "shim": {
        "jquery-cookie"  : ["jquery"]
    }
} );

나는 다음과 같은 jQuery와 같은 일을 할 수 있는지 궁금했다.

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
    define( "jquery", [], function () { return jQuery; } );
}

또는 이것이 requirejs 또는 amd와 호환되는 jQuery 플러그인을 만드는 유일한 방법 인 경우

둘 중 하나만 수행하면됩니다.

define(["jquery"], // Require jquery
       function($){
// Put here the plugin code. 
// No need to return anything as we are augmenting the jQuery object
});

jquery-cookie.js 끝, 또는

requirejs.config( {
    "shim": {
        "jquery-cookie"  : ["jquery"]
    }
} );

jquery-cookie를 포함하기 전에 어디에서나 (예를 들어 data-main이 가리키는 곳과 같은).

마지막으로 게시 한 코드 블록은 재분배되고 AMD 환경에있을 수도 있고 없을 수도있는 jQuery와 같은 것들에 유용합니다. 이상적으로는 모든 jQuery 플러그인이 이미 설정되어있을 것입니다.

포함 된 라이브러리를 가능한 한 완전하게 유지하는 것을 선호하므로 페이지 당 한 번 전역 shim 구성이 나에게 가장 깨끗한 솔루션처럼 보입니다 . 이렇게하면 업그레이드가 더 안전하고 CDN이 가능성이됩니다.

http://requirejs.org/docs/api.html#config-shim 에서 지적한 RequireJS에서 shim 구성을 사용할 때 몇 가지주의 사항이 있습니다 . 즉, 최적화 프로그램을 사용할 때 "빌드에서 CDN로드와 shim 구성을 혼합하지 마십시오".

RequireJS가 있거나없는 사이트에서 동일한 jQuery 플러그인 코드를 사용하는 방법을 찾고있었습니다. https://github.com/umdjs/umd/blob/master/jqueryPlugin.js 에서 jQuery 플러그인에 대한이 스 니펫을 찾았습니다 . 이 코드로 플러그인을 래핑하면 어느 쪽이든 제대로 작동합니다.

(function (factory) {
if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module depending on jQuery.
    define(['jquery'], factory);
} else {
    // No AMD. Register plugin with global jQuery object.
    factory(jQuery);
}
}(function ($) {

    $.fn.yourjQueryPlugin = function () {
        // Put your plugin code here
    };  

}));

신용은 jrburke에게갑니다. 많은 자바 스크립트와 마찬가지로 다른 기능에 작용하는 기능 내부의 기능입니다. 그러나 나는 그것이하는 일을 풀 었다고 생각합니다.

factory첫 번째 줄 의 함수 인수 는 그 자체로 $인수 에서 플러그인을 정의하기 위해 호출되는 함수입니다 . AMD 호환 로더가 없으면 전역 jQuery개체 에서 플러그인을 정의하기 위해 직접 호출됩니다 . 일반적인 플러그인 정의 관용구와 같습니다.

function($)
{
  $.fn.yourjQueryPlugin = function() {
    // Plugin code here
  };
}(jQuery);

모듈 로더가 있으면 factoryjQuery를로드 한 후 호출 할 로더에 대한 콜백으로 등록됩니다. 로드 된 jQuery 사본이 인수입니다. 다음과 같습니다.

define(['jquery'], function($) {
  $.fn.yourjQueryPlugin = function() {
     // Plugin code here
  };
})

모든 jquery 플러그인에 대한 FYI가 이미 amd / require를 사용하므로 shim에서 아무것도 선언 할 필요가 없습니다. 실제로 그렇게하면 어떤 경우에는 문제가 발생할 수 있습니다.

jquery 쿠키 JS를 보면 정의 호출과 require ([ "jquery"])가 표시됩니다.

jquery.js에서 define ( "jquery", [], function () ...에 대한 호출을 볼 수 있습니다.