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

How to get the r.js build script working

本文关键字：常工作 工作 脚本 js 构建      更新时间：2023-09-26

我已经通读了文档和示例 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

配置.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"]);

主.js看起来像这样：

require(["module1", "module2", "module3"], function(Module1, Module2, Module3) {
    return [
        Module1.init(),
        Module2.init(),
        Module3.init(),
        Module4.init()
    ];
});

然后构建.js是我迷路的地方。 我想我应该加载一个主配置文件，因为我正在使用填充程序，但我不确定。 如果我确实加载了该配置文件，它将使用该配置文件中的 baseUrl。 我不确定name:应该确切地指什么，以及我是否缺少一些必要的配置选项。

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

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

错误：ENOENT，没有这样的文件或目录 '/Users/davidpaul/Sites/require/src/js/module1.js' 在模块树中： 应用/主

我不太确定当它说"模块树"时指的是什么。 我一直在更改构建文件中的路径，但没有取得进展，所以希望有人向我解释一下。

生成器分析相对于生成文件位置的所有路径(除非通过 baseUrl 属性进行更改(。如果你看相对于src/js/build.js，你的主.js在./app/，模块1/2/3.js在./lib/。模块内的所有路径都必须相对于公共根目录指定，因此为了使您的示例正常工作，将 main.js 的签名更改为：

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

请注意，config.js 不参与构建过程，您可能还需要更改它以使应用程序既"原始"又

优化。
相关文章：