如何在 RequireJS 中包含 Jquery TimeEntry 插件

Question

我是 requirejs 的新手，我有一个旧的 Asp.net Webform 应用程序，我正在尝试使用 requirejs 应用一些 javascript 模块加载。在这个应用程序中，我使用了一个名为Time Entry 的jquery 插件，但如果我使用requirejs 则不起作用，只有在我以旧方式添加引用时才起作用。这是我的requirejs 配置和声明。 在aspx文件中：

<script src="../../scripts/require.js"></script>
<script>
    require(["../../app/shared/require.config"],
        function (config) {
            require(["appIncidentTracking/incident-type-init"]);
        });

</script>

我的 require.config 文件是这样的：

    require.config({
    baseUrl: '../../scripts',
    paths: {
        app: '../../app/utilization-management',
        appIncidentTracking: '../../app/incident-tracking',
        jquery: 'jquery-3.1.1.min',
        jqueryui: 'jquery-ui-1.12.1.min',
        jqueryplugin: '../../js/jquery.plugin.min',
        timeentry:'../../js/jquery.timeentry.min',
        handlebars: 'handlebars.amd.min',
        text: 'text',
        moment: 'moment.min',
        datatable: 'DataTables/jquery.dataTables.min',
        blockUI: 'jquery.blockUI.min',
        shared: '../../app/shared',
        bootstrap: 'bootstrap.min',
        'bootstrap-datepicker': 'bootstrap-datepicker.min',
        'bootstrap-multiselect': '../js/bootstrap-multiselect/bootstrap-multiselect'
    },
    shim: {
        bootstrap: {
            deps: ['jquery']
        },
        'bootstrap-multiselect': {
            deps: ['bootstrap']
        },
        timeentry: {
            deps:['jquery', 'jqueryplugin']
        }
    }
});

在我的 incident-type-in​​it.js 中，我只调用插件：

/**
 * Incident Type Init page 
 * @module incident-type-init
 */
define(function (require) {
    var $ = require('jquery'),
        jqueryplugin = require('jqueryplugin'),
        timeentry = require('timeentry'),
        bootstrap = require('bootstrap');

    /**
     * Jquery ready function
     */
    $(function () {
        $('.js-timeentry').timeEntry();
    });
});

但是当应用程序运行时我得到了这个错误： $.JQPlugin.createPlugin 不是函数，就好像找不到jquery.plugin.js

我检查了 chrome 中的网络选项卡并加载了两个文件，jquery.plugin.js 和 jquery.timeentry.js

更新：在我们的应用程序中，我们使用的是 Asp.net MasterPages，我们正在加载一个旧的 jquery 版本，1.5.1，我在我的页面中使用该 MasterPage，但是当我检查 chrome 中的网络选项卡时，首先加载 MasterPage 脚本，然后是所有 requirejs 的东西。

最有趣的部分是有时有效，有时无效。

有什么线索吗？

Answer 1

模块jqueryplugin 需要已经为它加载了jQuery。它不是 AMD 模块，因为它不调用 define。因此，您需要在shim 中添加一个额外的条目：

jqueryplugin: ["jquery"]

以上简称：

jqueryplugin: {
    deps: ["jquery"]
}

Answer 2

我认为您的代码在语法上不正确。

试试这个：

1.您的script 应指data-main 中的require.config。

<script data-main="PATH_TO_CONFIG_FILE" src="../../scripts/require.js"></script>

2. 配置文件的路径中缺少引号。相反应该是这样的

require.config({
    baseUrl: '../../scripts',
    paths: {
        "app": '../../app/utilization-management',
        "appIncidentTracking": '../../app/incident-tracking',
        "jquery": 'jquery-3.1.1.min',
        "jqueryui": 'jquery-ui-1.12.1.min',
        "jqueryplugin": '../../js/jquery.plugin.min',
        "timeentry":'../../js/jquery.timeentry.min',
        "handlebars": 'handlebars.amd.min',
        "text": 'text',
        "moment": 'moment.min',
        "datatable": 'DataTables/jquery.dataTables.min',
        "blockUI": 'jquery.blockUI.min',
        "shared": '../../app/shared',
        "bootstrap": 'bootstrap.min',
        "bootstrap-datepicker": 'bootstrap-datepicker.min',
        "bootstrap-multiselect": '../js/bootstrap-multiselect/bootstrap-multiselect'
    },
    shim: {
        "bootstrap": {
            deps: ["jquery"]
        },
        "bootstrap-multiselect": {
            deps: ["bootstrap"]
        },
        "timeentry": {
            deps:["jquery", "jqueryplugin"],
            exports:"timeentry"
        }
    }
});

3.由于您的模块具有依赖项，因此请按如下方式列出它们：

define(["jqueryplugin","timeentry","bootstrap"],function(jqueryplugin,timeentry,bootstrap) {

    $(function () {
        $('.js-timeentry').timeentry();
    });
});