RequireJS正在加載所有頁面上不需要的腳本

Question

Require.js加載每個頁面上的每個模塊，因此我在不需要加載腳本的頁面上收到JavaScript錯誤。具體來說，news-filter.js正在加載我的搜索頁面，導致錯誤： jquery-1.12.3.min.js：2未捕獲錯誤：語法錯誤，無法識別的表達式：「li」。從該行的新聞filter.js

$("ul.mediaListing").children("li."+chosenYear).filter("."+chosenCategory).each(function(c) { 

我失去了約reqire.js決定了需要什麼樣的腳本在每個頁面上的財產以後？ 我main.js文件是：

requirejs.config({ 

    baseUrl: [system-view:internal]"/render/file.act?path=/assets/scripts/"[/system-view:internal] [system-view:external]"/assets/scripts/"[/system-view:external], 

    paths: { 
     "jquery": "libs/jquery/jquery-1.12.3.min", 
     "velocity": "libs/velocity/velocity", 
     "bgstretch": "plugins/background-stretch/background-stretch", 
     "campus-map": "modules/campus-map", 
     "velocity-ui": "libs/velocity/velocity.ui", 
     "slick": "plugins/slick/slick", 
     "iscroll": "plugins/iscroll/iscroll", 
     "dotdotdot": "plugins/dotdotdot/jquery.dotdotdot.min.umd", 
     "select": "plugins/select/select", 
     "accordion": "modules/accordion", 
     "news-filter": "modules/news-filter", 
     "codebird": "modules/codebird", 
     "social-feed": "modules/social-feed" 
    }, 

    shim: { 

     "slick": ["jquery"], 
     "select": ["jquery"], 
     "bgstretch": { 
      deps: ["jquery"] 
     }, 
     "accordion": ["jquery"], 
     "codebird": ["jquery"], 
     "social-feed": { 
      dep: ["jquery", "codebird"], 
      exports: "displayFeed" 
     }, 
     "campus-map": { 
      deps: [ "jquery" ] 
     }, 
     "velocity": { 
      deps: [ "jquery" ] 
     }, 
     "velocity-ui": { 
      deps: [ "velocity" ] 
     } 
     }, 
     map: { 
      '*': { 
       'jQuery': 'jquery' 
      } 
     } 

}); 

requirejs(

    ['jquery', 'modules/utils', 'modules/custom.ui', 'libs/jquery/paginga.jquery', "modules/social-feed", "modules/news-filter"], 
    function ($, utils, ui, paga, social, news) { 

     ui();  

     $(".paginate").paginga({ 
      // use default options 
     }); 
}); 

Answer 1

我喜歡非常模塊化的方法，RequireJS有很多不同的方式來使用它。我將分享我通常如何建立完成您要查找的內容，簡化流程並使其易於實施和理解。

我完全避免在我的主js中有任何需求。首先，我將創建一個包含基礎require.js和我創建的名爲config.js的JS文件的包。我將把這個包加載到我的佈局頁面中，以便始終可用。如果你不使用MVC，這個想法只是爲了確保需求和我的自定義配置文件總是一起加載並始終可用，所以做你需要的。

Config。JS是很簡單的，你的情況只是把你的代碼，它看起來就像這樣：

var require = { 
baseUrl: [system-view:internal]"/render/file.act?path=/assets/scripts/" 
[/system-view:internal] [system-view:external]"/assets/scripts/"[/system- 
view:external], 

paths: { 
    "jquery": "libs/jquery/jquery-1.12.3.min", 
    "velocity": "libs/velocity/velocity", 
    "bgstretch": "plugins/background-stretch/background-stretch", 
    "campus-map": "modules/campus-map", 
    "velocity-ui": "libs/velocity/velocity.ui", 
    "slick": "plugins/slick/slick", 
    "iscroll": "plugins/iscroll/iscroll", 
    "dotdotdot": "plugins/dotdotdot/jquery.dotdotdot.min.umd", 
    "select": "plugins/select/select", 
    "accordion": "modules/accordion", 
    "news-filter": "modules/news-filter", 
    "codebird": "modules/codebird", 
    "social-feed": "modules/social-feed" 
}, 

shim: { 

    "slick": ["jquery"], 
    "select": ["jquery"], 
    "bgstretch": { 
     deps: ["jquery"] 
    }, 
    "accordion": ["jquery"], 
    "codebird": ["jquery"], 
    "social-feed": { 
     dep: ["jquery", "codebird"], 
     exports: "displayFeed" 
    }, 
    "campus-map": { 
     deps: [ "jquery" ] 
    }, 
    "velocity": { 
     deps: [ "jquery" ] 
    }, 
    "velocity-ui": { 
     deps: [ "velocity" ] 
    } 
    }, 
    map: { 
     '*': { 
      'jQuery': 'jquery' 
     } 
    } 
}; 

就是這樣。我傾向於將所有與每個HTML頁面關聯的JavaScript文件分開，因此在設置的路徑部分中，我將獲得視圖名稱以及相應javascript文件源代碼中的位置。然後，在我在我的腳本中加入我的HTML頁面，我會簡單地陳述

<script> require(['sign-in']); </script> 

這會搶我已經在我看來，需要變量定義的腳本文件。然後在每個腳本文件中，例如這個sign-in.js，我會將所有腳本包裝在一個define語句中，因此在每個JS文件的頂部，您可以清楚地看到將要加載和使用的依賴關係頁。它很乾淨，它是一個框架，它的功能非常好，它可以防止你加載不需要的東西。

在自包含js文件，你會怎麼做：

define(['jquery', 'lodash', 'bootstrap'], function ($, _) { 
    //All JS code here 
}): 

我將我所有的庫，需要選擇定義，然後再之後一切。就是這樣，希望一個真實的例子能夠幫助你。

Answer 2

Am I missing somthing about how reqire.js determines what scripts are needed on each page?

當然看起來，你是。告訴你一個main.js文件有這個（重新格式化，以提高可讀性）：

requirejs(['jquery', 'modules/utils', 'modules/custom.ui', 
      'libs/jquery/paginga.jquery', "modules/social-feed", 
      "modules/news-filter"], 

如果你使用這個main.js的所有網頁，則所有的模塊你列出有將要被加載，這意味着modules/news-filter是將被加載到所有頁面上。這個，不管是否有任何代碼實際使用它。

RequireJS的工作方式，調用require調用中列出的任何依賴項。對於每個加載的模塊，還會加載它們在您的配置中爲其設置的define調用或shim中列出的任何依賴項。如果列出了一些內容，但不是實際上是在代碼中使用並不重要。

---

關於您的配置的切線註釋。在你paths您有：

"news-filter": "modules/news-filter" 

但是你把它稱爲modules/news-filter在require通話，而不是news-filters。您應該使用news-filter或刪除您在paths中設置的映射。 RequireJS現在允許在同一個上下文中通過兩個不同的模塊名稱引用相同的JavaScript文件。如果您將模塊作爲modules/news-filter加載到一個地方，並將news-filter加載到其他地方，則會遇到問題。

如果您需要使用兩個不同的名稱訪問相同的JavaScript文件，請使用map。 map所做的是告訴RequireJS「當你得到模塊X的請求時，改爲加載模塊Y」。所以RequireJS用另一個替換請求的模塊名稱。