-1

我创建了一个 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; 
    }
});

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

未捕获的 ReferenceError：未定义 jQuery

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

感谢您的帮助！

4

1 回答 1

1

jQuery 和许多其他库——有些是旧的，有些只是为了避免现代惯例（咳骨干咳）——不支持任何类型的模块加载器。要使用 require 加载那些，您需要使用shims 功能并明确列出模块导出的符号。您可以在我的前端模板项目中看到一个示例，并在下面隔离：

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

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

从您的其他代码中使用jQuery 时，请绝对确保您：

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

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

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

import $ from 'jquery';

做。

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

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

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

于 2015-06-09T14:07:25.127 回答