是否可以像下面这样在多页面设置中使用almond呢?
common.js被加载到所有页面&含有杏仁,bootstrap &jquery
main1.js只加载在第1页&包含almond和需要jquery的app/main1.js。当我运行main1.js的构建时,我排除了bootstrap &Jquery,因为它是通用的
on page1 common.js &main1.js加载,但是,我得到一个错误:Uncaught Error: app/main1 missing jquery
.
有可能用杏仁做这个还是我做错了什么?
更新:我正在使用django-require,它将python对象转换为r.js的命令行条目,此外,它将提供的模块重命名为"almond",并将命名模块添加到包含(这可能是导致我错误的原因?)。还需要注意的是,django-require不允许包含/排除REQUIRE_STANDALONE_MODULES,所以我添加了这个功能:
REQUIRE_STANDALONE_MODULES = {
"common": {
"out": "common.js",
"include": ["bootstrap", "jquery"],
"build_profile": "module.build.js"
},
"main1": {
"out": "main1.js",
"exclude": ["bootstrap", "jquery"],
"build_profile": "module.build.js"
}
}
Main1.js
require(['app/main1']);
转换成这样的构建文件条目:
modules = {
"almond": {
"out": "common.js",
"include": ["common", "bootstrap", "jquery"],
"build_profile": "module.build.js"
},
"almond": {
"out": "main1.js",
"include:"main1",
"exclude": ["bootstrap", "jquery"],
"build_profile": "module.build.js"
}
}
这是可能的。你只需要明确你的包括和排除。在下面的设置中,所有模块都存储在js
子目录中,优化的输出输出到build
。为了简单起见,jQuery存储为js/jquery.js
,因此不需要调用require.config
。
js
中的文件为:almond.js
、jquery.js
、main1.js
、main2.js
.
({
baseUrl: "js",
optimize: "none", // So that we can see what is going on in the bundles.
dir: "build",
removeCombined: true,
skipDirOptimize: true,
modules: [
{
name: "common",
create: true,
include: ["almond", "jquery"]
},
{
name: "main1",
exclude: ["jquery"],
insertRequire: ["main1"]
},
{
name: "main2",
exclude: ["jquery"],
insertRequire: ["main2"]
}
]
})
需要公共模块的create: true
选项,以便优化器创建它。据推测,对require.config
的调用将放在js/common.js
中,然后您将删除此选项。
这个优化的结果加载到第1页:
<script type="text/javascript" src="build/common.js"></script>
<script type="text/javascript" src="build/main1.js"></script>
Page 2将加载build/main2.js
。
加载Bootstrap需要一个RequireJS配置,这与一般情况相同,否则在上面的代码中就完全像jQuery一样处理。