RequireJS 正在加载并非所有页面都需要的脚本

Question

Require.js 在每个页面上加载每个模块，所以我在不需要加载脚本的页面上出现 JavaScript 错误。具体来说，news-filter.js 正在我的搜索页面上加载，并导致错误： jquery-1.12.3.min.js:2 Uncaught Error: Syntax error, unrecognized expression: "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

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"

但是您在 require 调用中将其称为 modules/news-filter 而不是 news-filters。您应该使用 news-filter 或删除您在 paths 中设置的映射。 RequireJS 现在允许在同一上下文中通过两个不同的模块名称引用同一个 JavaScript 文件。如果您在一个地方将模块加载为 modules/news-filter 而在其他地方加载为 news-filter，那么您将运行遇到问题。

如果您需要使用两个不同的名称来访问同一个 JavaScript 文件，请使用 map。 map 所做的是告诉 RequireJS "when you get a request for module X, load module Y instead"。所以 RequireJS 将请求的模块名称替换为不同的名称。

Answer 2

我喜欢非常模块化的方法，RequireJS 有很多不同的使用方法。我将分享我通常如何设置它来完成您正在寻找的东西，简化并使其易于实施和理解。

我完全避免在我的主 js 中有任何要求。首先，我将创建一个包含基础 require.js 和我创建的名为 config.js 的 JS 文件的包。我会将这个包加载到我的布局页面中，以便它始终可用。如果您不使用 MVC，这个想法只是为了确保 Require 和我的自定义配置文件始终一起加载并且始终可用，因此请执行您需要的操作。

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

就是这样。我倾向于将所有 javascript 文件与每个 HTML 页面分开，因此在设置的路径部分中，我将具有视图名称，然后是相应源代码中的位置javascript 文件。然后在我的 HTML 页面中添加脚本时，我将简单地说明

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

这将获取我在我的视图的 require 变量中定义的脚本文件。然后在每个脚本文件中，例如 sign-in.js 这个，我会把所有的 scrip 包在一个 define 语句中，所以在每个 JS 文件的顶部你可以清楚地看到你将加载和使用哪些依赖项在那个页面。它很干净，它是一个框架，它工作得非常好，它可以防止你加载你不需要的东西。

在独立的 JS 文件中你会做：

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

我的所有库都需要先定义一个选择器，然后再定义其他所有内容。就是这样，希望一个真实的例子能帮助到你。

RequireJS 正在加载并非所有页面都需要的脚本

RequireJS is loading scripts that are not needed on all pages

javascript

requirejs