无缘无故，有时 jQuery 不会加载 require.js

Question

我创建了一个 app.js 文件，其中包含我所有的 JS 文件，用于管理依赖项和与其他模块的内容。

通常，它运行良好，但有时会崩溃。这是我的 app.js 文件。我所有的 "modules" 文件都将 jQuery 作为 "define" 函数的依赖项。

require.config({
    baseUrl: 'js/', // '../Style%20Library/js/' pour Sharepoint
    paths: {
        jquery: 'vendor/jquery-1.11.2.min',
        jqueryui: 'vendor/jquery-ui',
        jrespond: 'vendor/jrespond-0.10',
        transit: 'vendor/jquery.transit.min',
        easing: 'vendor/jquery.easing.1.3',
        mainMenu: 'modules/main-menu',
        resBreakpoints: 'modules/resBreakpoints'
        [...]
    }
});

require(['jquery','resBreakpoints', 'transit'], function($, resBreakpoints, transit) {
    // Support aux vieux browser pour ne pas utiliser le plugin transition
    if(!Modernizr.csstransitions){ 
        $.fn.transition = $.fn.animate; 
    }
});

什么会导致崩溃？当它工作时，控制台中没有错误，但当它崩溃时，它会为许多模块显示此错误。

未捕获的引用错误：jQuery 未定义

未定义jQuery时，jQuery等文件全部加载完毕，网络选项卡上无错误。

感谢您的帮助！

Answer 1

jQuery 和许多其他库——有些旧，有些只是坚决避免现代约定（咳嗽Backbone cough) -- 不支持任何类型的模块加载器。要使用 require 加载那些，您需要使用 the shims feature and explicitly list the symbols which the module exports. You can see an example here, in my front-end template project 并在下面隔离：

require.config({
    shim: {
      jquery: {
        exports: '$'
      }
    }
  });

添加 shim 告诉 require 加载模块，然后将全局符号视为模块的默认导出。

当使用 jQuery 来自您的其他代码时，请绝对确保您：

需要其他模块或
在加载任何内容之前需要它

为了干净，我更喜欢前者。使用给定的垫片，您需要在每个模块的开头 require('jquery')， 而不是 require('$') 或类似的东西。 shim 的名称（键）是从那里开始的模块名称，执行 var $ = require('jquery') 将 return 您需要的符号。

为了可读性和自我记录，我更喜欢使用库名称作为 shim 名称（jquery、underscore、lodash）并使用符号（$ 或 _），而不是具有单个非数字字符的模块名称。我相信这是个人喜好，但很清楚什么

import $ from 'jquery';

会。

如果您有 jQuery 插件或使用 Twitter 的 Bootstrap，您可能需要定义其他依赖于您的新 jQuery "module." 的 shim 这些强制 jQuery 在插件之前加载，本质上列出了独立于模块本身的依赖树。 My Bootstrap example 也适用于 jQuery 插件：

shim: {
  bootstrap: {
    deps: ['jquery']
  }
}

这会强制模块之间的依赖关系，允许您 require 插件并确保父模块之前已加载。由于 jQuery 等将它们的符号放入全局范围，因此您不需要设置任何对插件的导入，只需确保在之前需要库插件开始加载。

无缘无故，有时 jQuery 不会加载 require.js

For no reasons, sometimes, jQuery won't load with require.js

javascript

jquery

requirejs

requirejs-define