Javascript 如何使用RequireJS构建概要文件&x2B；r、 多页项目中的js

我目前正在学习RequireJS基础知识，对构建概要文件、主文件以及在多页面项目中使用RequireJS有一些疑问

我的项目的目录结构如下：

httpdocs_siteroot/ app/ php files... media/ css/ css files... js/ libs/ jquery.js require.js mustache.js mains/ main.page1.js main.page2.js main.page3.js plugins/ jquery.plugin1.js jquery.plugin2.js jquery.plugin3.js utils/ util1.js util2.js images/ 有没有办法避免这种情况？就像让每个主文件包含相同的构建概要文件而不必实际构建它一样

r.js应该进入httpdocs\u siteroot的父目录吗

我的app dir结构或我对RequireJS的使用是否有明显的问题

---

首先，这不是一个有独特解决方案的问题。我将解释我使用RequireJS的方式，它对我有效，也可能对你有效：）

第二，英语不是我的母语。有关该语言的更正和提示将不胜感激。自由吧，伙计们：）

1） 对于非单页的项目，需要js是否实用

视情况而定。例如，如果您的项目没有页面之间的共享代码，那么RequireJS帮助将是适度的。RequireJS的主要思想是将应用程序模块化为可重用代码块。如果您的应用程序只使用特定于页面的代码，那么使用RequireJS可能不是一个好主意

2） 在不使用优化器的情况下，我的每个主文件都以基本相同的配置选项开始。有没有办法避免这种情况？就像让每个主文件包含相同的构建概要文件而不必实际构建它一样

我看到的唯一方法是在主文件上进行配置，或者创建一个模块来配置RequireJS，然后将该模块用作main.js上的第一个依赖项。但这可能很棘手。在我的应用程序中，我没有使用很多main.js文件；我只使用一个作为加载程序（见下文）

3） r.js应该进入httpdocs\u siteroot的父目录吗

不一定。您可以将它放在/media目录中，因为您所有的客户端内容都在那里

4） 我的app dir结构或我对requirejs的使用是否有明显的问题

我不会这么说。另一方面，结构可能有点过于零碎。例如，您可以将所有“第三方资料”放在/vendor目录中。但这只是糖；您的结构将运行良好，并且看起来是正确的。我认为主要的问题是在多个主文件中调用requirejs.config（）

我遇到的问题与您现在遇到的问题相同，我最终得到了以下解决方案：

1） 请勿使用define包装不符合AMD的文件。尽管它可以工作，但使用requirejs.config中的“shim”属性可以获得相同的结果（见下文）

2） 在多页面应用程序中，我的解决方案是不需要优化main.js文件中的页面特定模块。相反，我需要主文件中的所有共享代码（第三方和我自己的），将页面特定的代码保留在每个页面上加载。主文件最后只是一个加载程序，它在加载所有共享/lib文件后启动特定于页面的代码

这是我用来用requirejs构建多页应用程序的样板文件

目录结构：

/src-我将所有客户端内容放在一个src目录中，这样我就可以在这个目录中运行优化器（这是您的媒体目录）

/src/vendor-在这里我放置了所有第三方文件和插件，包括require.js

/src/lib—在这里，我放置了所有由整个应用程序或某些页面共享的代码。换句话说，不是特定于页面的模块

/src/page模块xx-然后，我为我拥有的每个页面创建一个目录。这不是一条严格的规定

/src/main.js：这是整个应用程序的唯一主文件。它将：

• 配置RequireJS，包括垫片
• 加载共享库/模块
• 加载特定于页面的主模块

这是requirejs.config调用的一个示例：

requirejs.config({
        baseUrl: ".",
        paths: {
            // libraries path
            "json": "vendor/json2",
            "jquery": "vendor/jquery",
            "somejqueryplugion": "vendor/jquery.somejqueryplufin",
            "hogan": "vendor/hogan",

            // require plugins
            "templ": "vendor/require.hogan",
            "text": "vendor/require.text"
        },
        // The shim section allows you to specify 
        // dependencies between non AMD compliant files.
        // For example, "somejqueryplugin" must be loaded after "jquery".
        // The 'exports' attribute tells RequireJS what global variable
        // it must assign as the module value for each shim.
        // For example: By using the configutation below for jquery, 
        // when you request the "jquery" module, RequireJS will 
        // give the value of global "$" (this value will be cached, so it is
        // ok to modify/delete the global '$' after all plugins are loaded.
        shim: {
            "jquery": { exports: "$" },
            "util": { exports: "_" },
            "json": { exports: "JSON" },
            "somejqueryplugin": { exports: "$", deps: ["jquery"] }
        }
    });

然后，在配置之后，我们可以发出第一个require（）请求 对于所有这些库，以及之后对“页面主”模块的请求

编辑

下面是一个示例，说明如何使用构建概要文件优化具有多个文件的页面特定模块

例如，假设我们有以下页面模块：

/第1页/main.js

/第1页/dep1.js

/第1页/dep2.js

如果我们不优化此模块，那么浏览器将发出3个请求，每个脚本一个请求。 我们可以通过指示r.js创建一个包并包含这3个文件来避免这种情况

在构建配置文件的“模块”属性上：

...
"modules": [
   { 
      name: "main"  // this is our main file
   },
   {
        // create a module for page1/main and include in it
        // all its dependencies (dep1, dep2...)
        name: "page1/main",
        // excluding any dependency that is already included on main module
        // i.e. all our shared stuff, like jquery and plugins should not
        // be included in this module again.
        exclude: ["main"]
   }
]

通过这样做，我们创建了另一个每页的主文件及其所有依赖项。但是，因为我们已经有了一个主文件，可以加载所有共享的内容，所以我们不需要在page1/main模块中再次包含它们。 配置有点冗长，因为您必须为每个页面模块（其中有多个脚本文件）执行此操作

我在GitHub中上传了样板代码：。 这是一个工作样板，只需为node安装node和r.js模块，并执行build.cmd（在/build目录中，否则它将失败，因为它使用相对路径）

我希望我已经说清楚了。如果有什么奇怪的声音，请告诉我；）

问候

//文件：js/main
需要（['./global.config']，函数（）{
需要（['./视图/主视图']，函数（）{
//做点什么
});
});

---

这就是我在我的项目中使用的内容。

我有一个简短而冗长的答案，但我需要一些细节：有多少页？特定于每个页面的代码很少或很多（假设每个页面有10kb的代码）？您使用的是requirejs插件吗？什么插件？通常感谢您的回答！我还需要再读几遍，看看你的github样板文件才能真正理解它，但我相信我很快就会有一些问题！您是否使用$（document）.ready（）

//libs
require([
    "templ",     //require plugins
    "text",
    "json",      //3rd libraries
    "jquery",
    "hogan", 
    "lib/util"  // app lib modules
 ],
    function () {
        var $ = require("jquery"),
            // the start module is defined on the same script tag of data-main.
            // example: <script data-main="main.js" data-start="pagemodule/main" src="vendor/require.js"/>
            startModuleName = $("script[data-main][data-start]").attr("data-start");

        if (startModuleName) {
            require([startModuleName], function (startModule) {
                $(function(){
                    var fn = $.isFunction(startModule) ? startModule : startModule.init;
                    if (fn) { fn(); }
                });
            });
        }
    });

<script data-main="main" data-start="pagemodule/main" src="vendor/require.js"></script>

define(function(require, exports, module) {
    var util = require("lib/util");

    return function() {
        console.log("initializing page xyz module");
    };
});

...
"modules": [
   { 
      name: "main"  // this is our main file
   },
   {
        // create a module for page1/main and include in it
        // all its dependencies (dep1, dep2...)
        name: "page1/main",
        // excluding any dependency that is already included on main module
        // i.e. all our shared stuff, like jquery and plugins should not
        // be included in this module again.
        exclude: ["main"]
   }
]