RequireJS with jQuery Validation

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

我相信垫片中的键应该与您在模块中需要的名称相匹配。 此外，我认为它使用名称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似乎不是这样工作的。 这似乎是一种单向解决方案：

请求的模块名称 - >从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 config中使用相同的名称以使所有依赖项正常工作。