Question

我正在与requirejs合作，我有一个旧的 Asp.net Webform 应用程序，我正在尝试使用{{{strong> javascript 模块加载3}}。在这个应用程序中，我使用名为requirejs的jquery插件，但如果我使用Time Entry则无法正常工作，只有在我以旧方式添加引用时才有效。这是我的requirejs配置和声明。在aspx文件中：

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

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

/**
 * 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();
    });
});

在我的 incident-type-init.js 中我只调用插件：

new DatabaseWriter();

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

我检查了chrome中的网络标签，并且加载了两个文件， jquery.plugin.js 和 jquery.timeentry.js

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

最有趣的部分是有时工作，有时不工作。

有任何线索吗？

Answer 1

模块jqueryplugin需要为它加载jQuery。它不是AMD模块，因为它不会调用define。因此，您需要shim中的其他条目：

jqueryplugin: ["jquery"]

上述内容简称：

jqueryplugin: {
    deps: ["jquery"]
}

Answer 2

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

试试这个：

1。您的script应该引用require.config中的data-main。

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

如何使用RequireJS包含Jquery TimeEntry插件

2 个答案: