我研究了构建教程,发现了Web构建(仅限1.7.2),并测试了几个示例 - 但是,我找不到构建系统的简单解释.
假设我的应用是一个网页:
<script src="./js/App/other_non_amd_stuff_working_independently.js">
<script src="./js/lib/dojo/dojo.js" data-dojo-config="async: true"></script>
<script src="./js/App/Main.js">
Run Code Online (Sandbox Code Playgroud)
Dojo SDK位于./lib/,Main.js包含Dojo config + app boot:
require({
packages:[{
name:"App",
location:"../../App"
}]
},
[ "dojo/query",
"dijit/layout/BorderContainer",
"App/Foo",
"dojo/domReady!"], function(query, BorderContainer, Foo) { ... });
Run Code Online (Sandbox Code Playgroud)
我现在的问题就像这样简单:如何从我所有的Dojo/AMD东西中创建一个单独的脚本文件?我只是想替换
<script src="./js/lib/dojo/dojo.js" data-dojo-config="async: true"></script>
<script src="./js/App/Main.js">
Run Code Online (Sandbox Code Playgroud)
一个人
<script src="./js/Main.minified.js">
Run Code Online (Sandbox Code Playgroud)
让构建系统在这方面工作似乎有点不重要.它试图将./App/中的所有文件转换为AMD模块(这不是我想要的......)或者无法找到App/Main.我尝试构建一个构建配置文件(app.profile.js),但我不明白这一点,只是它增加了(IMO不必要的)复杂性.如何使构建系统只连接我的App/Main.js包含.依赖?
任何有关理解构建系统的更好教程的提示也值得赞赏.
请参阅此问题解答,了解如何将层构建到 dojo.js 文件中。我不妨分享我的经验,因为我经历了一些尝试和错误才让我的引导程序正常工作。实际上,答案很容易在“dojosdk/util/buildscripts/profiles/baseplus.profile.js”文件中找到。
Dojo Custom Build 1.6 到单个文件中(与新构建系统相同的设置,但对于 2.0 可能仍会进行一些更改)
dependencies ={
layers: [
{
name: "dojo.js", // overwrites regular dojo.js and ++'s your layer
dependencies: [
"app.main"
]
}
}
Run Code Online (Sandbox Code Playgroud)
请记住正确添加位置前缀
由于您将“App”模块放置在 dojo SDK 根目录之外,因此需要packages在dojoConfig. 不过,属性键是针对prefixes图层配置文件的。
prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ],
[ "App", "../../App" ]
]
Run Code Online (Sandbox Code Playgroud)
您可能想要构建应用程序的子模块,以便例如弹出对话框需要额外的额外内容 - 它们可以在运行时在单独的包中下载。为了确保通过主模块层加载的依赖项不包含在子模块层中,您要查找的属性键是layerDependencies。
综合结果如下所示:
dependencies ={
layers: [
{
name: "../dojo/dojo.js", // overwrites regular dojo.js and ++'s your layer
dependencies: [
"app.Main"
]
}, {
name: "../../App/JITModule.js",
layerDependencies: [
"../../App/Main" // tells this layer that the dependencychain in Main is allready loaded (programmer must make sure this is true ofc)
]
dependencies: [
"App.JustInTimeDialog"
]
}
]
prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ],
[ "App", "../../App" ]
]
}
Run Code Online (Sandbox Code Playgroud)
这应该会产生两个优化的图层文件,其中一个包含标准的 one-line-dojo.js和一个 dojo.cache 条目,其中包含应用程序中的文件。示例用法如下。请注意,您仍然需要调用require任何缓存的模块,否则它们只会保留在缓存中。
注意将 dojoConfig 放入 ./js/App/Main.js 文件中将无法按预期工作,dojo.js 常规内容会加载到各层之上。
<head>
<script>
function JITDialog() {
require([ "App.JITDialog" ], function(dialoglayer) {
var dialog = new App.JustInTimeDialog();
dialog.show();
});
}
var dojoConfig = {
async: true,
packages:[{
name:"App",
location:"../../App"
}]
}
</script>
<script src="./js/lib/dojo/dojo.js"></script>
<script>
require("App.Main", function() {
// loads the layer, depending on the structure of App.Main class,
// you can call your initializations here
var app = new App.Main();
app.run();
});
</script>
</head>
<body>
<button onclick="JITDialog();">
Download sub-module-layer and show a dialog on user interaction
</button>
</body>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
1859 次 |
| 最近记录: |