Javascript requirejs优化后jQuery.ui未定义

我的web应用程序中有几个JavaScript文件，它们以前是通过

标记加载的，顺序是相对依赖关系。现在我通过require.js重新组织它们，以便为生产积累和缩小它们

首先，我想简单地将所有文件加载到全局（窗口）上下文中，而不进行AMD封装：

require([
    'jquery'], function() {
    require([
        'jquery-ui'], function() {
        require([
            'jquery-ui.touch-punch',
            // [...]
        ]);
    });
});

这里的想法是

'jquery'

定义一个全局（窗口上下文）

jquery

变量，

'jquery-ui'

设置

jquery.ui

和

'jquery-ui.touch-punch'

更改

jquery.ui

（以获得更好的触摸支持）

这在按原样运行（即不进行优化）时效果良好。但是，在编译成一个文件并使用缩小后，会发生以下错误：

Uncaught TypeError: Cannot read property 'mouse' of undefined

这发生在试图访问

jQuery.ui.mouse

的行上

在浏览器控制台中，在窗口上下文中正确设置了

jQuery

，但未定义

jQuery.ui

。 但是，手动执行

require（['jquery-ui']）

会按预期设置

jquery.ui

在优化之后，jQueryUI的行为似乎有所不同，但我看不出具体的方式和原因。我做错了什么？

独家新闻 使用

shim

而不是通过嵌套的

require

调用（实际上不设置依赖项）设置非AMD模块之间的依赖项。还要确保在您提供的配置

r.js

中使用

wrapshem:true

解释 您试图加载的一个或多个模块不是AMD模块，但实际上您并没有定义非AMD模块之间的依赖关系

当您像这样嵌套

require

调用时，您强制执行一些模块在运行时的加载顺序，但这实际上并没有在模块之间建立依赖关系。因此，只要模块未优化，该策略就可以工作，但优化后可能会失败

只有两种方法可以建立依赖关系：

通过将依赖项数组传递给

define

调用。此方法用于实际为AMD规范编写的模块（RequireJS也支持使用CommonJS方式要求模块，但在幕后，它被转换为具有一系列依赖项的

define

调用。因此它不构成第三种方式。）

通过设置列出依赖项的

垫片

。此方法适用于非AMD模块

如果您没有设置

垫片

，那么优化器可以按照它想要的顺序自由订购非AMD模块

jquery ui.touch punch

可能会出现在优化文件中

jquery ui

和

jquery

之前，因为没有理由不显示，然后您会遇到麻烦。如果你看一下这个插件的代码，你会发现它并不了解AMD。它只希望jQuery和jQueryUI存在，如果它们不存在，就会失败

如果设置了

垫片

，则强制优化文件中非AMD模块的顺序

---

您需要

wrapshem

，因为在使用支持AMD的jquery ui版本时，

jquery ui.touch punch

。否则，jQuery UI的工厂将无法在插件需要之前运行。

非常感谢。我尝试了以下垫片配置：

shim:{'jquery-ui'：{deps:['jquery']}，'jquery-ui.touch-punch'：{deps:['jquery-ui']}}

，但仍然存在相同的问题。调试表明，jquery ui的

工厂

将设置

$。即使运行了
define（'jquery-ui'，[“jquery”]，工厂）
，优化后，ui

也不会执行。您是否确保运行时配置和生成配置中都存在

垫片

？将包含对

require.config

的调用的文件作为构建的一部分是不够的。您需要在构建配置中显式地设置

shim

，或者（更好的做法是，IMO）设置

maincigfile

选项以指向具有

require.config

的文件。是的，我之前已经保证过这一点。但是缺少了另一个配置：

wrapShim:false

。另外，这是因为jQueryUI AMD需要jQuery，但依赖于非AMD touch punch。上述设置显然将触控冲头包裹在AMD模块中，以确保正确的加载顺序（）。为了完整起见，也许您可以将此添加到您的答案中，我接受。您最初是否在配置中使用了

wrapshem:true

？如果没有，那么添加

wrapshem:false

应该没有什么区别，因为如果您没有设置

wrapshem

，则默认设置为

false

。哦，对不起，这是一个输入错误。我现在使用的是

wrapshem:true

，以前没有（即默认为

false

）。