带有 jQ​​uery 验证的 RequireJS

Question

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

1. jquery.validate - jquery 验证库
2. jquery.validate.unobtrusive - 这为 jquery 验证库添加了不显眼的验证（因此您可以使用数据属性并自动将它们连接起来）。这取决于 jquery.validate
3. 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

我相信 shim 中的键应该与您在模块中需要的名称相匹配。另外我认为使用名称 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!');
});

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

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

而你正在尝试做的是：

请求的模块名称 (jquery.validate) --> 根据路径映射解析为实际文件 (jquery.validate.custom) --> 从 shim config 扩展到任何其他模块 --> 再次解析路径

例如，这很好用：

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 配置中使用相同的名称以使所有依赖项正常工作。