requirejs config 给出 ReferenceError: can't find variable $答案

【问题标题】：requirejs config gives ReferenceError: can't find variable $requirejs config 给出 ReferenceError: can't find variable $
【发布时间】：2016-03-03 14:54:17
【问题描述】：

也许我从根本上误解了 requirejs 配置的工作原理，但我认为我下面的配置使一些库全局化，因此我可以在其他文件中使用它们，而只需要在单个脚本中要求和定义我需要使用的文件。但是，我无法在我的应用程序代码中引用 $ (jQuery)，而不会收到指示它不可全局访问的引用错误。我已将问题隔离到下面的简单示例中。

我的文件设置如下：

test
  |
  |-index.html
  |-TestApp.js
  |-MainApp.js
  |-lib
  |  |-require.js
  |  |-jquery.js
  |  |-loadash.js
  |  |-backbone.js
  |-css
     |-test.css

库文件版本为 RequireJS 2.1.22、jQuery 2.0.3、Loadash 3.10.1 和 Backbone 1.2.1。我只是想设置我的环境，我正在采取的方法是将我的 TestApp.js 文件传递给 require.js 以加载所需的文件并在 MainApp.js 中引导应用程序代码。 index.html中的脚本如下：

<!DOCTYPE html>
<html>
  <head>
    <link rel='stylesheet' type='text/css' href='css/test.css'/>
  </head>
  <body>
      <div></div>
      <script src="./lib/require.js" type="text/javascript" data-main="./TestApp.js"></script>
  </body>
</html>

引用的 css 脚本文件只是确保 div 显示为橙色方块。见下文：

div {
    height: 100px;
    width: 100px;
    background-color: #FA6900;
    border-radius: 5px;
    }

这是 index.html 中的脚本行，然后通过将我的配置文件传递给 requirejs 来启动应用程序代码。这是作为 data-main 传递的 TestApp.js。 TestApp.js 在这里：

require.config({
    paths:  {
            'jquery':   'lib/jquery',
            'lodash':   'lib/lodash',
            'backbone': 'lib/backbone'
            },

    map:    {
            '*':    {
                    // Backbone requires underscore. This forces requireJS to load lodash instead:
                    'underscore':   'lodash'
                    }
            },

    shim:   {
            jquery:         {exports:   '$'},
            underscore:     {
                            deps:       ['jquery'],
                            exports:    '_'
                            },
            backbone:       {
                            deps:       ['underscore'],
                            exports:    'Backbone'
                            },

            TestApp:        {
                            deps:       ['backbone'],
                            exports:    'TestApp'
                            }
            }
    });

require(['MainApp'], function(MainApp) {
    MainApp.run();
    });

上面的文件引用了我想要使用的库文件的路径，然后我重新映射 loadash 以在需要下划线时加载（我需要一些额外的 loadash 功能），然后我使用 shim 来确保依赖项是加载文件时正确。将此配置文件传递给 index.html 中的 require.js 似乎正在工作，因为所有文件都显示为在我的浏览器中加载。然而，问题似乎是它们似乎不像我想象的那样可以在全球范围内访问。

在配置部分之后，最后一个 require 调用加载 MainApp.js 文件并调用公开的 run 函数。 MainApp.js 看起来像这样：

define(function(require) {

    var run = function() {

                $(document).ready(function() {
                    $('div').click(function() {
                        $('div').fadeOut('slow');
                        });
                    });
                };

    return  {
            run:    run
            };
    });

据我所知，我不需要 require 我在 require 配置中已经提到的文件，我认为它们应该被加载并可供此代码使用。这是我误解正在发生的事情或错过了一步的地方。正在调用暴露的 run 函数，但调用 $ 的第一行抛出错误：

ReferenceError: Can't find variable: $

所以我的问题是：

我的想法有什么问题？
（或）我做错了什么？
我应该怎么做才能预加载并使其可用经常引用的库，所以我不需要要求和在我拥有的每个文件中定义它们？

【问题讨论】：

您需要在使用它的地方要求$，而不仅仅是在代码的另一部分中...您可以将它们作为参数传递给MainApp.run($, global2, ...)

标签： javascript requirejs

【解决方案1】：

据我所知，我不需要 require 我在 require 配置中已经提到的文件，我认为它们应该被加载并可供此代码使用。

您误解了 RequireJS 的工作原理。您应该从头到尾阅读documentation。目前，您应该更改以下内容。

您应该在 MainApp 模块中要求 jquery：

define(function(require) {
    var $ = require("jquery");

您应该删除jquery、underscore 和backbone 的shims，因为它们都调用define 和shim 仅适用于不调用define 的代码。我不知道TestApp 是什么，但如果是你自己的代码，你真的应该把它变成一个适当的AMD 模块并删除shim。

【讨论】：

您关于 TestApp 是什么的问题导致一分钱下跌，我已经意识到我在上面做错了什么。回答您的问题 TestApp 是包含要求配置的文件。 MainApp 是包含代码的文件（稍后启动整个应用程序）。将 shim 的最后一位更改为状态：'MainApp: {deps: ['backbone']}' 解决了问题，我不需要在后续应用程序代码中使用 jQuery，它在全球范围内可用，真正清理了我的应用代码。
我已经为遇到此问题的任何人添加了完整答案，然后他们可以看到错误是什么。

【解决方案2】：

@Louis 让我意识到我上面所做的错误。更改 TestApp.js 中的 shim，如下所示：

MainApp: {
         deps:       ['backbone'],
         exports:    'MainApp'
         }

更正了问题，现在 Backbone、$ 和 _ 都可用于我的应用程序代码的其余部分，而不会弄乱所需的每个文件。即我不需要在每个文件的开头：

define (['lib/jquery', 'lib/loadash', 'lib/backbone'], function($, _ , Backbone) {

鉴于在我的实际应用中，常见的 deps 列表非常大，这意味着我只需要定义本地使用的资源，并且可以从单个位置控制路径。

【讨论】：