如何使用Require JS配置帶有第三方js依賴項的日期選擇器？

Question

我正在嘗試在應用程序中使用以下“ 日期范圍選擇器” ：通過將腳本放置在頁面的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依賴項。

這是有關JSFiddle的完整工作示例：

如何使用Require JS進行設置？

Answer 1

您應該查看每個庫中是否都包含“ amd”一詞。 例如，在第9個字符串的momentjs中，您可以看到：

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

這意味着您可以將其包含在requirejs配置的路徑部分中。 但是，如果您查看庫中的內容而該詞不存在，則應在配置中使用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 個解決方案

解決方案1
1 已采納 2015-12-12 21:07:13

如何使用Require JS配置帶有第三方js依賴項的日期選擇器？

問題描述

1 個解決方案

解決方案1 1 已采納 2015-12-12 21:07:13

解決方案1
1 已采納 2015-12-12 21:07:13