如何将RequireJS配置放在一个单独的文件中,并让r.js优化器正常工作?

8
大多数 RequireJS 的设置示例,将配置对象放置在 main.js 入口点中,类似于以下内容:
//main.js
require.config({
"paths": {
    //libs
    "lib1": "assets/js/lib/lib1",
    "lib2": "assets/js/lib/lib2",
    "lib3": "assets/js/lib/lib3",
    "lib4": "assets/js/lib/lib4"
    }
});
//start the app
define(["lib1"], function(lib1){/*start the app*/});

我建议将配置对象放在独立的文件中,因为随着它的增长,在同一个文件中维护将变得困难。
当我在浏览器中运行下面的设置时,它可以工作,但是当我运行r.js优化器时,出现了错误。
//config.js
define({/*all configuration here*/});

//main.js
define(["config", "require"], function(config, require){
    requirejs.config(config); //set configuration
    require(["app"]); //launch app, where "app" path is defined in config.js
});

当我运行r.js时,出现以下错误:
“追踪main的依赖关系 错误: ENOENT,“C:\Work\project\target\app.js”文件或目录不存在。”
看起来r.js没有获取配置设置,因为它将app.js作为相对脚本而不是具有定义路径的模块进行查找。
这是我的build.js文件(appDir、dir和mainConfigFile都是相对于build.js文件的):
({
    appDir: "../src",
    baseUrl: ".",
    dir: "../target",
    mainConfigFile: "../src/main.js",
    findNestedDependencies: true,
    modules: [
        {
            name: "main"
        }
    ]
})
1个回答

7
这是我的做法。我喜欢将配置文件单独放置,因为在测试中可以重复使用。
文件夹结构:
PROJECT
|
+- build (build output directory)
|
+- build-scripts (contains r.js, build.js)
|
+- WebContent
   |
   +- index.html (application main file)
   |
   +- scripts
      |
      +- require-cfg.js
      |
      +- main.js
      |
      +- ...

配置文件(require-cfg.js - 只显示相关内容):
var require = {
    baseUrl: "scripts",
    paths: ...
    ...
};

构建文件(build.js):
({
    appDir: "../WebContent/",
    baseUrl: "scripts/",
    mainConfigFile: "../WebContent/scripts/require-cfg.js",
    paths: {
        /* repeated from require-cfg.js */
    },
    dir: "../build",
    optimize: "uglify2",
    inlineText: true,
    removeCombined: true,

    name: "main"
})

引导程序代码(index.html):

<script src="scripts/require-cfg.js"></script>
<script src="scripts/lib/require-2.0.2-jquery-1.10.2.js"></script>
<script src="scripts/main.js"></script>

我使用r.jsbuild.js配置在build-scripts文件夹内执行。最优化和合并的输出将放在build文件夹中。您可以根据自己的需要调整路径。


谢谢,看起来不错。基本上和我做的一样,但是我想在我的index.html中只保留一个脚本标签,即require.js。我看到你没有使用data-main,而是分别加载所有脚本。有没有办法使用require从main.js中加载require-config?这样你仍然可以将其与测试分开。 - elanh
我认为使用 require 加载 require-cfg 是一个先有鸡还是先有蛋的问题。我喜欢在单独的步骤中加载 require-cfg,因为它允许我在原地自定义它(例如 i18n)。是的,3 个脚本比 1 个脚本更丑陋,但对我来说,这是可以接受的。 - Nikos Paraskevopoulos
奇怪的是,当我在浏览器中本地运行时,它可以工作。但是当我运行r.js时,它就不行了。我似乎无法理解为什么会这样。我仍然可以使用require加载模块,而不需要定义路径,这就是我期望它能够工作的原因。 - elanh
1
使用共享的 require 配置的各种方法在 https://github.com/jrburke/requirejs/issues/354#issuecomment-6631063 中有描述。 - Nathan

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接