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

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

}));

Credit goes to jrburke; like so much javascript, it's functions inside functions acting on other functions. But I think I have unpacked what it's doing.

The function argument factory in the first line is itself a function which is invoked to define the plugin on the $ argument. When no AMD-compatible loader is present, it's invoked directly to define the plugin on the global jQuery object. That's just like the common plugin definition idiom:

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

If there is a module loader, then factory is registered as the callback for the loader to invoke after loading jQuery. The loaded copy of jQuery is the argument. It's equivalent to

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

---

Just as an FYI to all some of the jquery plugins already use amd/require so you dont need to declare anything in the shim. In fact doing so might cause problems for you in some cases.

If you look in the jquery cookie JS you will see define calls and require(["jquery"]).

and in jquery.js you will see a call to define("jquery",[],function()...

참고URL : https://stackoverflow.com/questions/10918063/how-to-make-a-jquery-plugin-loadable-with-requirejs