Question

我正在尝试使用RequireJS添加对我的jQuery验证脚本文件的引用。我有3个脚本文件而不是通常的1：

jquery.validate - jquery验证库
jquery.validate.unobtrusive - 这为jquery验证库添加了不显眼的验证（因此您可以使用数据属性并自动连接它们）。这取决于jquery.validate
jquery.validate.custom - 这会添加我自己的自定义不显眼验证方法，并依赖于jquery.validate.unobtrusive

我已设置以下配置：

require.config({
    paths: {
        'jquery': 'Scripts/jquery-1.8.3.min',
        'jquery.validate': 'Scripts/jquery.validate.custom'
    },
    shim: {
        'Scripts/jquery.validate': ['jquery'],
        'Scripts/jquery.validate.unobtrusive': ['jquery', 'Scripts/jquery.validate'],
        'Scripts/jquery.validate.custom': ['jquery', 'Scripts/jquery.validate.unobtrusive']
    }
});

现在我有以下模块：

define(['jquery', 'jquery.validate'], function($) {
    alert('Yey!');
});

然而，jquery.validate.custom文件中抛出了一个错误，告诉我没有注入不显眼的依赖项。在使用浏览器工具进行一些调试并查看网络选项卡后，我可以看到它成功下载了jquery.validate.custom.js和jquery.validate.js文件，但它甚至没有尝试下载jquery.validate.unobtrusive。 js文件。

如果有人能告诉我我做错了什么，我会很感激。感谢

修改

我现在尝试过：

require.config({
    paths: {
        'jquery': 'Scripts/jquery-1.8.3.min',
        'jquery.validate': 'Scripts/jquery.validate.custom'
    },
    shim: {
        'Scripts/jquery.validate': ['jquery'],
        'Scripts/jquery.validate.unobtrusive': ['jquery', 'Scripts/jquery.validate'],
        'jquery.validate': ['jquery', 'Scripts/jquery.validate.unobtrusive']
    }
});

它运作正常。我也尝试了以下内容，因为我觉得它看起来更好：

require.config({
    paths: {
        'jquery': 'Scripts/jquery-1.8.3.min',
        'jquery.validate': 'Scripts/jquery.validate.custom',
        'jquery.validate.core': 'Scripts/jquery.validate',
        'jquery.validate.unobtrusive': 'Scripts/jquery.validate.unobtrusive'
    },
    shim: {
        'jquery.validate.core': ['jquery'],
        'jquery.validate.unobtrusive': ['jquery', 'jquery.validate.core'],
        'jquery.validate': ['jquery', 'jquery.validate.unobtrusive']
    }
});

但这会产生超时错误。

如果有人能够解释为什么第二种解决方案不起作用那就太好了。感谢

Answer 1

我相信垫片中的键应该与模块中需要的名称相匹配。此外，我认为它使用名称jquery.validate混淆问题，但然后将其映射到自定义。

对我来说，以下结构更直观：

require.config({
    paths: {
        jquery: 'Scripts/jquery-1.8.3.min',
        jquery_validate: 'Scripts/jquery.validate'
        jquery_validate_unobtrusive: 'Scripts/jquery.validate.unobtrusive'
        jquery_validate_custom: 'Scripts/jquery.validate.custom'
    },
    shim: {
        jquery: {
           exports: ['jQuery', '$']
        },
        jquery_validate: ['jquery'],
        jquery_validate_unobtrusive: ['jquery_validate'],
        jquery_validate_custom: ['jquery_validate_unobtrusive']
    }
});

然后在您的模块中，请求自定义文件：

define(['jquery', 'jquery_validate_custom'], function($) {
    alert('Yey!');
});

编辑：更多地考虑原始配置以及它为什么不起作用：您遇到的问题是您试图在填充部分中散布使用带有模块别名的完整路径。 RequireJS似乎不是这样工作的。这似乎是一种单向解决方案：

请求的模块名称 - ＆gt;从shim config扩展到任何其他模块 - ＆gt;根据路径映射加载实际文件

你要做的是：

请求的模块名称（jquery.validate） - ＆gt;根据路径映射解析实际文件（jquery.validate.custom） - ＆gt;从shim config扩展到任何其他模块 - ＆gt;再次解决路径

例如，这很好用：

require.config({
  paths: {
    module1: 'module1file',
    module2: 'module2file',
    module3: 'module3file'
  },
  shim: {
    module3: ['module2'],
    module2: ['module1']
  }
});

require(['module3'], function( ) {
});

但这不是：

require.config({
  paths: {
    module1: 'module1file',
    module2: 'module2file',
    module3: 'module3file'
  },
  shim: {
    module3: ['module2'],
    module2file: ['module1']
  }
});

require(['module3'], function( ) {
});

Answer 2

您只需在配置中修复一个密钥即可。改变这一行：

'Scripts/jquery.validate.custom': ['jquery', 'Scripts/jquery.validate.unobtrusive']

以下：

'jquery.validate': ['jquery', 'Scripts/jquery.validate.unobtrusive']

一切都会奏效。这是因为如果您使用jquery.validate作为路径，则需要在shim配置中使用相同的名称，以使所有依赖项正常工作。

RequireJS with jQuery Validation

2 个答案: