[英]How Can I Place RequireJS Config in Separate File and Make the r.js Optimizer Work?
Most examples for RequireJS setup, place the configuration object in the main.js entry point, something like this: 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*/});
I prefer to place the configuration object in a separate file, because as it grows, it's difficult to maintain in the same file. 我更喜欢将配置对象放在一个单独的文件中,因为随着它的增长,很难在同一个文件中维护。
The following setup works when I run it in the browser, but for some reason I get an error when running the r.js optimizer: 当我在浏览器中运行它时,以下设置有效,但由于某种原因,我在运行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
});
When I run r.js, I get the following error: 当我运行r.js时,我收到以下错误:
*Tracing dependencies for: main
*跟踪:main的依赖关系
Error: ENOENT, no such file or directory 'C:\\Work\\project\\target\\app.js*
错误:ENOENT,没有这样的文件或目录'C:\\ Work \\ project \\ target \\ app.js *
So it seems that r.js doesn't get the configuration settings, because it's looking for app.js as a relative script, not as a module with a defined path. 所以似乎r.js没有得到配置设置,因为它正在寻找app.js作为相对脚本,而不是具有已定义路径的模块。
Here is my build.js file (appDir, dir and mainConfigFile are relative to the build.js file): 这是我的build.js文件(appDir,dir和mainConfigFile是相对于build.js文件):
({
appDir: "../src",
baseUrl: ".",
dir: "../target",
mainConfigFile: "../src/main.js",
findNestedDependencies: true,
modules: [
{
name: "main"
}
]
})
This is how I am doing it. 这就是我这样做的方式。 I like having the configuration file separate because I am reusing it in the tests.
我喜欢将配置文件分开,因为我在测试中重复使用它。
Folder structure: 文件夹结构:
PROJECT
|
+- build (build output directory)
|
+- build-scripts (contains r.js, build.js)
|
+- WebContent
|
+- index.html (application main file)
|
+- scripts
|
+- require-cfg.js
|
+- main.js
|
+- ...
The configuration file ( require-cfg.js
- showing only the relevant stuff): 配置文件(
require-cfg.js
- 仅显示相关内容):
var require = {
baseUrl: "scripts",
paths: ...
...
};
The build file ( build.js
): 构建文件(
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"
})
Bootstraping code ( index.html
): 引导代码(
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>
I execute r.js
with the build.js
configuration inside the build-scripts
folder. 我在
build-scripts
文件夹中使用build.js
配置执行r.js
Optimized and combined output goes to the build
folder. 优化和组合输出转到
build
文件夹。 You can adapt the paths to suit your needs. 您可以根据自己的需要调整路径。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.