Question

我试图在应用程序中使用以下Date Range Picker：通过将脚本放在页面的head部分中，我能够成功地使其工作：但是，我不确定如何使用Require JS和第三方依赖项来设置它。

例如：要使用JQuery UI Date Picker我只需执行以下操作：

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'

    }

});

然后像这样实例化：

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

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

});

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

具体来说，我正在努力解决moment.js和daterangepicker-master/jquery.comiseo.daterangepicker.js个依赖关系。

这是一个完整的working example on JSFiddle：

如何使用Require JS进行设置？

Answer 1

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

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

这意味着您可以将其包含在requirejs config的路径部分中。但是如果您查看库中并且这个词不在那里，那么您应该在配置中使用shim。对于你的情况，它将：

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"]
        }
    }
}

}）;

因为daterangepicker将 jquery-ui 作为依赖项：

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

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

define(["jquery"], factory);

然后您可以将仅“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：

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

我对它进行了测试并且有效：

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

1 个答案: