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

Question

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

通常，它工作得很好，但有时，它会崩溃。这是我的 app.js 文件。我所有的“模块”文件在“定义”函数中都有 jQuery 作为依赖项。

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; 
    }
});

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

Uncaught ReferenceError: jQuery is not defined

当没有定义 jQuery 时，jQuery 和其他文件都是完全加载的，网络选项卡上没有错误。

感谢您的帮助！

Answer 1

jQuery 和许多其他库——有些是旧的，有些只是为了避免现代约定（coughBackbonecough）——不支持任何模块加载器种类。要使用 require 加载那些，您需要使用 the shims feature 并明确列出模块导出的符号。您可以在下面看到一个示例 here, in my front-end template project 并隔离：

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

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

当您在其他代码中使用 jQuery 时，请确保您：

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

为了清洁，我更喜欢前者。给定垫片后，您需要在每个模块的开头require('jquery')，不是 require('$') 或类似的东西。 shim 的名称（键）是模块名称，执行 var $ = require('jquery') 将返回您需要的符号。

为了可读性和自文档化，我更喜欢使用库名称作为 shim 名称（jquery、underscore、lodash）并使用符号（$ 或 @987654333）将其导入范围@)，而不是具有单个非 alnum 字符的模块名称。这是个人喜好，我相信，但很清楚是什么

import $ from 'jquery';

会。

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

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

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