如何使用Require JS配置具有第三方js依赖项的日期选择器？

I am attempting to use the following Date Range Picker in an application: I was able to successfully get it working by placing the scripts in the head section of the page: However, I am not sure how to set this up using Require JS, and the third party dependencies.

我试图在应用程序中使用以下日期范围选择器：我能够通过将脚本放在页面的head部分中成功地使其工作：但是，我不知道如何使用Require JS来设置它，并且第三方依赖。

For example: To use a JQuery UI Date Picker I simply do the following:

例如：要使用JQuery UI日期选择器，我只需执行以下操作：

require.config({

    paths: {

        jquery: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery',
        'jquery-ui': 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui'

    }

});

Then instantiate like this:

然后像这样实例化：

require(['jquery', 'jquery-ui'], function ($) {

    $(function() {
        $( "#datepicker" ).datepicker();
    });

});

However, if there is an additional third party script, then I am not sure how to configure it:

但是，如果有另外的第三方脚本，那么我不确定如何配置它：

Specifically, there is moment.js and daterangepicker-master/jquery.comiseo.daterangepicker.js dependencies which I am struggling with.

具体来说，有一些我正在努力的moment.js和daterangepicker-master / jquery.comiseo.daterangepicker.js依赖项。

Here is a complete working example on JSFiddle:

这是一个关于JSFiddle的完整工作示例：

How do set this up using Require JS?

如何使用Require JS进行设置？

1 个解决方案

#1

You should see if "amd" word is inside each lib. For example in momentjs in 9th string you can see:

你应该看看每个lib里面是否有“amd”字样。例如，在第9个字符串中的momentjs中，您可以看到：

typeof define === 'function' && define.amd ? define(factory) :

it means that you can include it in path part of requirejs config. But if you look inside the library and this word is not there then you should use shim inside your config. For your case it will:

这意味着您可以将它包含在requirejs config的路径部分中。但是如果你看看图书馆里面没有这个词那么你应该在配置中使用垫片。对于您的情况，它将：

require.config({
    paths: {

        jquery: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery',
        'jquery-ui': 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui'
        "momentjs":"//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"
        //shim
        "daterangepicker":"//tamble.github.io/jquery-ui-daterangepicker/daterangepicker-master/jquery.comiseo.daterangepicker"
    },
    shim:{
        "daterangepicker":{
            deps:["jquery-ui","momentjs"]
        }
    }
}

});

}）;

because daterangepicker has jquery-ui as dependency:

因为daterangepicker有jquery-ui作为依赖：

shim:{
        "daterangepicker":{
            deps:["jquery-ui","momentjs"]
        }
    }

and jquery-ui depends on jquery at 10th string:

和jquery-ui依赖于第10个字符串的jquery：

define(["jquery"], factory);

then you can include only "jquery-ui" as dependency for daterangepicker. So the result will be:

那么你只能包含“jquery-ui”作为daterangepicker的依赖项。结果将是：

require.config({
    paths: {
        jquery: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery',
        'jquery-ui': 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui',
        momentjs: "//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment",
        //shim
        daterangepicker: "//tamble.github.io/jquery-ui-  daterangepicker/daterangepicker-master/jquery.comiseo.daterangepicker"
    },
    shim: {
        daterangepicker: {
            deps: ["jquery-ui", "momentjs"]
        }
    }
});

require(['jquery','daterangepicker','momentjs'], function    ($,dateRangePicker,momentjs) {
    //dateRangePicker will be undefined, but it's ok.
    window.moment = momentjs; //include momentjs in global scope because plugin wants it globally.
    $("#e2").daterangepicker({
        datepickerOptions: {
            numberOfMonths: 2
        }
    });
});

index.html:

index.html的：

<html>
    <head>
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css"/>
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" />
       <link rel="stylesheet" href="//tamble.github.io/jquery-ui-daterangepicker/daterangepicker-master/jquery.comiseo.daterangepicker.css" />
    </head>
<body>
    <script data-main="app.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js">  </script>
    <input id="e2"></input>
</body>

I did test of it and it works:

我做了它的测试，它的工作原理：

1 个解决方案

#1

更多相关文章

随机推荐