javascript - 如何让 r.js 构建脚本正常工作

Question

我已通读文档和示例 app.build.js 文件，但无法将我的 js 文件连接并缩小为一个文件。我想我只是不明白构建脚本中需要哪些设置，并希望获得一些帮助。

我的应用程序设置如下:

src >
    js >
        build.js
        r.js
        config.js
        app >
            main.js
        lib >
            module1.js
            module2.js
            module3.js
        vendor >
            require.js
            jquery.js
            jquery.validation.js

build >
    // Where concat and minified file would go

config.js 看起来像这样:

requirejs.config({
    "baseUrl" : "src/js/lib", // Used because when setting dependencies in modules, this is used
    "paths" : {
        "app" : "../app",
        "jquery" : [
            "https://code.jquery.com/jquery-1.11.1.min",
            "../vendor/jquery"
        ],
        "validate" : "../vendor/jquery.validate.min"
    },
    "shim" : {
        // Allow plugins with dependencies to load asynchronously
        validate : ["jquery"]
    }
});

// Load the main app module to start the app
requirejs(["app/main"]);

ma​​in.js 看起来像这样:

require(["module1", "module2", "module3"], function(Module1, Module2, Module3) {

    return [
        Module1.init(),
        Module2.init(),
        Module3.init(),
        Module4.init()
    ];

});

然后 build.js 就是我迷失的地方。我认为我应该加载 mainConfigFile 因为我正在使用垫片，但我不确定。如果我加载该配置文件，它将使用该配置文件中的 baseUrl。我不确定 name: 应该准确指代什么，以及我是否缺少一些必要的配置选项。

({
    //baseUrl: ".",
    paths: {
        jquery: "empty:",
        //main: "../app/main",
        //app: "app"
    },
    name: "app/main",
    out: "../build/main.js",
    //mainConfigFile: "config"
})

如果我按原样运行该构建文件(这些行被注释掉)，我会得到:

Error: ENOENT, no such file or directory '/Users/davidpaul/Sites/require/src/js/module1.js' In module tree: app/main

我不太确定当它说“模块树”时指的是什么。我不断对构建文件中的路径进行更改，但没有取得进展，因此希望有人向我解释一下。

Answer 1

构建器解析相对于构建文件位置的所有路径(除非 changed via the baseUrl property )。如果您相对于 src/js/build.js 进行查找，您的 ma​​in.js 位于 ./app/ 和 module1/中2/3.js 位于 ./lib/ 中。模块内的所有路径都必须相对于公共(public)根来指定，因此为了使您的示例正常工作，只需将 ma​​in.js 的签名更改为:

require(["lib/module1", "lib/module2", "lib/module3"], function(M1, M2, M3) {
   // (...)
})

<小时/>

请注意，config.js 不参与构建过程，您可能还需要更改它以使您的应用程序既可以“原始”运行又可以优化运行。