javascript - RequireJS is loading scripts that are not needed on all pages -

require.js loads every module on every page, javascript errors on pages don't need loaded scripts. specifically, news-filter.js loading on search page, , causing error: jquery-1.12.3.min.js:2 uncaught error: syntax error, unrecognized expression: "li." line in news-filter.js

 $("ul.medialisting").children("li."+chosenyear).filter("."+chosencategory).each(function(c) { 

am missing somthing how reqire.js determines scripts needed on each page? main.js file is:

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

i modular approach , requirejs has lot of different ways use it. i'll share how typically have set accomplishes looking for, streamlined , makes easy implement , understand.

i avoid having require in main js completely. first create bundle includes both base require.js , js file create called config.js. have bundle loaded in layout page it's available. if aren't using mvc, idea make sure require , custom config file loaded , available need that.

config.js simple, in case taking code this:

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

that's it. tend have of javascript files associated each html page separated, in paths section of set i'll have view name , location in source of corresponding javascript file. in html page when i'm adding in scripts, i'll state

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

this grab script file have defined in require variable view. in each script file, sign-in.js example one, wrap of scrip in define statement, @ top of each js file can see dependencies load , use in page. it's clean, it's framework, works wonderfully, , keeps loading things don't need.

in self contained js file do:

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

i have libraries need selector defined first , else after. that's it, real example you.