Question

我刚学习Require.js。可以说我有以下几页：

将pageA.html
pageB.html

对于第A页，我需要加载以下脚本：

taco.js
hamburger.js

对于第B页，我需要加载以下脚本：

taco.js
salad.js
superman.js

为了使用基本的require.js加载来执行此操作，我想我会这样做：

<!-- pageA.html contains:
<script data-main="/scripts/pageAScripts" src="/scripts/require.js"></script>

是：

// pageAScripts.js
require(["/scripts/taco", "/scripts/hamburger"]);

以及

<!-- pageB.html contains:
<script data-main="/scripts/pageBScripts" src="/scripts/require.js"></script>

是：

// pageBScripts.js
require(["/scripts/taco", "/scripts/salad", "/scripts/superman"]);

所以现在每个页面都有一个主入口点。但我担心的是在多个地方使用taco.js。因为当我在构建脚本中使用require.js的优化解决方案时，它会创建pageAScripts.js（包含taco.js，hamburger.js）和pageBScripts.js（包含taco.js，{ {1}}和salad.js）。

现在，superman.js的代码通过“优化”过程为用户加载两次。就我而言，taco.js是一个非常大的文件，并且用户最终将数据下载两次是不可取的。

我在这里缺少什么工作流程？我对taco.js还很陌生，所以我确信有一些东西。

Answer 1

您可以使用multipage project的示例。将RequireJS构建配置调整到您的：

{
    baseUrl: '.',
    dir: '../build', // This is where the output will go.
    modules: [
        {
            name: 'scripts/taco'
        },
        {
            name: 'scripts/pageAscripts',
            exclude: ['scripts/taco']
        },
        {
            name: 'scripts/pageBscripts',
            exclude: ['scripts/taco']
        }
    ]
}

这是多页面项目示例提供的最小调整。在构建结束时，您将拥有3个捆绑包：build/scripts/pageAscripts，其中包含仅适用于第A页的代码，build/scripts/pageBscripts仅包含针对第B页的代码，以及build/scripts/taco仅包含taco模块及其所有依赖项。

Answer 2

您可以将taco.js作为单独的文件加载，并在构建文件中告诉requirejs不要将taco.js包含在构建文件中。在您需要配置时，请指定taco.js -

的路径

requirejs.config({
  paths: {
    'taco': 'path/to/taco'
  }
});

并在taco.js和pageAScript.js中要求pageBScript.js，如下所示 -

require(['taco'], function (taco) {
});

在你的构建文件中告诉requirejs不要使用empty:

将taco作为构建文件的一部分包含在内

({
   baseUrl: ".",
   name: "page(A/B)Script",
   out: "page(A/B)Script.js",
   paths: {
     taco: "empty:"
   }
})

您可以找到有关此here的更多信息。

现在，您可以使用脚本代码在taco.js和pageA.html上加载pageB.html。

<script type="text/javascript" src="path/to/taco/js"></script>

这里将为第一页加载taaco.js，第二页加载它将从浏览器缓存中加载。

Require.js在多个页面上加载相同的脚本

2 个答案: