我目前正在学习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/

Since this project is not a single-page app, I have a separate main file for each page (although some pages use the same main file).

My questions are:

1. Is RequireJS even practical for projects that are not single-page?

2. Without using the optimizer, each of my main files start with essentially the same config options:

   requirejs.config({
     paths: {
       'jquery': 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min'
     },
     baseUrl: '/media/js/',
     // etc...
   });
   require(['deps'], function() { /* main code */ });
   

   
   有办法避免这种情况吗？就像让每个主文件都包含相同的构建配置文件而无需实际构建它一样？
3. r.js是否应该进入httpdocs_siteroot的父目录？
4. 我的应用程序目录结构或使用RequireJS是否存在明显错误？

最佳答案

首先，这不是一个独特解决方案的问题。我将说明使用对我有用的RequireJS的方法，并且可能对您有用:)

其次，英语不是我的母语。有关该语言的更正和提示将不胜感激。随意，伙计们:)

1) Is require js even practical for projects that are not single-page?

2) Without using the optimizer, each of my main files start with essentially the same config options. Is there a way to avoid this? Like having each main file include the same build profile without having to actually build it?

3) Should r.js go in httpdocs_siteroot's parent directory?

4) Is there something glaringly wrong with my app dir structure or my use of requirejs?

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

//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"]
   }
]

关于javascript - 如何在多页项目中使用RequireJS构建配置文件+ r.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11674824/