requirejs config給出ReferenceError：無法找到變量$

也許我從根本上誤解了requirejs config的工作方式，但我認爲我的配置使得一些庫是全局的，所以我可以在其他文件中使用它們，而只需要和定義文件我需要在個人腳本中使用。然而，我不能在我的應用程序代碼中引用$（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和骨幹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來啓動應用程序代碼。這是TestApp.js作爲data-main傳遞的。該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文件並調用暴露的運行函數。該MainApp.js看起來是這樣的：

define(function(require) { 

    var run = function() { 

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

    return { 
      run: run 
      }; 
    });

至於我明白我不應該需要要求我已經在需要配置提到的文件，我認爲他們應該被加載並提供此代碼。這是我誤解了正在發生的事情或錯過了一步的地方。暴露run函數被調用，但調用$第一行引發錯誤：

ReferenceError: Can't find variable: $

所以我的問題是：

我有什麼錯我的思想？
（或）我做錯了什麼？
我應該爲了預先加載並提供經常引用的庫可以這樣做，我並不需要要求和在每一個文件我已經定義呢？

來源

2016-02-26 JavaDevGuy

您需要在其中使用'$'，而不只是在代碼的另一部分中......您可以將它們作爲參數傳遞給'MainApp.run（$，global2，...）' – dandavis

@Louis讓我意識到我在上面做的事情中的錯誤。在TestApp.js更換墊片，這樣是寫着：

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

更正的問題，現在骨幹，$和_都是提供給我的應用程序代碼的其餘部分不會搞亂每個文件需要。即我並不需要開始的每一個文件與：

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

考慮到我的實際應用程序共同DEPS列表是相當大的，這意味着我只需要定義本地使用的資源，可以從一個位置控制的路徑。

來源

2016-02-26 17:16:42 JavaDevGuy

As far as I understood I should not need to require the files I already mentioned in the require config, I thought they should be loaded and available to this code.

您誤會了RequireJS的工作原理。您應該從頭到尾閱讀documentation。現在，這裏是你應該改變的事情。

如果您需要jquery您MainApp模塊：

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

您應該刪除您shim是你們等有jquery，underscore和backbone，因爲他們所有的呼叫define和shim僅供代碼不調用define。我不知道TestApp是什麼，但如果它是你自己的代碼，你真的應該把它變成一個適當的AMD模塊，並刪除shim。

來源

2016-02-26 00:51:18 Louis

您的問題是什麼TestApp是什麼觸發了一分錢下降，我已經意識到我在上面的錯誤。回答你的問題TestApp是包含require配置的文件。 MainApp是包含代碼的文件（稍後啓動整個應用程序）。更改墊片的最後一位狀態： 'MainApp：{deps：['backbone']}'' 解決了這個問題，我不需要在隨後的應用程序代碼中需要jQuery，它可以在全球範圍內使用並且真正清理我的應用程序代碼。 – JavaDevGuy

我已經添加了一個完整的答案，誰打這個問題，然後他們可以看到錯誤是什麼。 – JavaDevGuy

requirejs config給出ReferenceError：無法找到變量$

回答

相關問題