requirejs로 jQuery 플러그인을 로드할 수 있도록 하는 방법

requirejs로 jQuery 플러그인을 로드할 수 있도록 하는 방법

requirejs+jquery로 작업하고 있는데 jQuery 플러그인이 require와 잘 작동할 수 있는 현명한 방법이 있는지 궁금합니다.

예를 들면 저는 jQuery-cookie를 사용하고 있습니다.내가 제대로 이해했다면 jquery-cookie.js라는 파일을 만들 수 있습니다. 그리고 inside do.

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

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

http://requirejs.org/docs/api.html#config-shim 에서 지적된 RequireJS에서 shim 구성을 사용할 때 몇 가지 주의 사항이 있습니다.즉, 옵티마이저를 사용할 때 "빌드에서 CDN 로딩과 shim config를 섞지 마십시오.

Require를 사용하는 사이트와 사용하지 않는 사이트 모두에서 동일한 jQuery 플러그인 코드를 사용할 수 있는 방법을 찾고 있었습니다.JS. 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의 loaded copy가 인수입니다.에 해당합니다.

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

둘 중 하나만 하면 됩니다.

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, OR 끝에

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

jquery-main을 포함하기 전에 어디서든(예를 들어 데이터 메인이 가리키는 곳이라면 어디든).

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

저는 포함된 라이브러리를 가능한 한 제한 없이 유지하는 것을 선호하기 때문에 페이지당 한 번씩 글로벌 심 구성이 제게 가장 깨끗한 해결책으로 보입니다.그래야 업그레이드가 더 안전하고 CDN이 가능합니다.

참고로 모든 jquery 플러그인이 이미 amd/require를 사용하므로 심에서 어떤 것도 선언할 필요가 없습니다.실제로 그렇게 하면 문제가 생길 수 있습니다.

jquery cookie JS를 보면 통화 정의 및 require(["jquery"])가 나타납니다.

jquery.js에서 "jquery", [], function을 정의하는 호출이 나타납니다.

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