r.js,almond:包含杏仁的两个.js文件是否有可能共享依赖关系?

时间:2014-03-18 21:32:35

标签: javascript requirejs r.js almond

是否可以使用具有多页设置的杏仁,如下所示:

common.js加载在所有页面上包含杏仁,bootstrap& jquery的

main1.js仅在第1页和第1页上加载包含杏仁和需要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'并将命名模块添加到include(这可能是导致我的错误的原因?)。另请注意,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"
    }
}

1 个答案:

答案 0 :(得分:2)

有可能。您只需要明确您的包含和排除。在以下设置中,所有模块都存储在js子目录中,优化输出传递到build。为简单起见,jQuery存储为js/jquery.js,因此无需调用require.config

js中的文件有:almond.jsjquery.jsmain1.jsmain2.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>

第2页会加载build/main2.js

加载Bootstrap需要一个与一般情况相同的RequireJS配置,并且在上面的代码中被视为与jQuery完全相同。