如何将 requireJS 配置放在单独的文件中并使 r.js 优化器工作

How Can I Place RequireJS Config in Separate File and Make the r.js Optimizer Work?

本文关键字：js 工作 优化 文件 requireJS 配置 单独      更新时间：2023-09-26
大多数

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 时，出现以下错误：

*跟踪依赖项：主

错误：ENOENT，没有这样的文件或目录"C：''工作''项目''目标''应用.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"
        }
    ]
})

这就是我的做法。我喜欢将配置文件分开，因为我在测试中重用它。

文件夹结构：

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>

我使用 build-scripts 文件夹中的build.js配置执行r.js。优化和组合输出将转到build文件夹。您可以调整路径以满足您的需求。

相关文章：