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

r.js, almond: Is it possible for two .js files containing almond to share dependencies?

本文关键字：almond js 是否 文件 依赖 关系 共享 两个 包含      更新时间：2023-09-26

是否可以像下面这样在多页面设置中使用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一样处理。

相关文章：