Requirejs -通过不同的模块共享相同的依赖关系

Question

想象一下这个项目脚手架：

• utils.js
• 模组1/控制器
• 模块1/services.js
• 模组2/控制员
• 模块2/services.js

utils.js

define([], function(){  /* My utils functions */ });

模组1/控制器

define(['../utils'], function(utils){  /* Module1 stuff */ });

模组2/控制员

define(['../utils'], function(utils){  /* Module2 stuff */ });

这在非优化上下文中非常有效，因为utils.js只下载一次，无论是从module1还是module2下载。但是，我需要优化每个模块并将其打包到一个JS文件中。

为了获得这个结果，我在每个模块中添加了一个main.js文件，例如：

module1 1/main.js

define(['./controllers', './services.js'], function(){});

现在我开始使用优化工具，这是我的app.build.js

...
modules: [
        { name: "module1/main" },
        { name: "module2/main" },
    ]
...

好的，我得到了我想要的行为，但是我看到这两个模块都包含utils.js代码。这种行为是正确的，因为你不能保证装货顺序。

以下是我的问题：

1. 有什么聪明的解决方案吗？
2. 如果不能跳过这一点，有人知道需求是如何在引擎盖下工作的吗？这种策略会产生什么问题吗？

Answer 1

最后，我使用构建脚本中的排除选项获得了答案：

...
modules:[
  { name: 'utils' },
  { name: 'module1/main', exclude: ['utils'] }
  { name: 'module2/main', exclude: ['utils'] }
]
...

通过这种方式，我为utils创建了一个分离的模块，并避免使用"exclude“选项将其包含在其他模块代码中。此方法迫使您手动编写这种“全局”依赖项，但它有效:)

Answer 2

不确定如何使用优化工具，但是当我拥有一个基本库(就像我所有的主干扩展)，然后有一两个视图时，下面是如何处理它的方法：

基库:类似于“base.js”的东西

define([
'foo',
'bar',
'baz'
]);

第x页的代码:让我们说“x.js”

define([
    'foo',
    'bar'
], function () {

});

酌情设置一个'libraryBuild.js‘文件和一个' build.js’文件--两者之间的区别是在build.js中，您将在'base.js‘中定义的所有文件设置为’base.js‘。

libraryBuild.js

({
    baseUrl: ".",
    name: "base",
    out: "base-built.js"
})

build.js

({
    baseUrl: ".",
    paths: {
        foo: "empty:",
        bar: "empty:",
        baz: "empty:"
    }
})

现在，运行优化两次(我需要通过npm作为全局包安装as，所以我只需调用r.js -否则将是node ../path/to/r.js)。

r.js -o libraryBuild.js

r.js -o build.js name=x out=x-optimized.js (请注意，您可以将其应用于整个项目，而不仅仅是单个文件。)但这是目前一个更好的例子)

您应该注意到，"x-optimized.js“文件不包含在base-built.js中设置的代码。

那么在你们的页面里..。

<script>
require.config({
    paths: {
        base: "base-built"
    }
});
require(['base'], function () {
    require(['x'], function (x) {
        //The stuff you'd normally do when X is included
    })
});
</script>

我确信有更好的方法可以做到这一点，但至少这样做是可行的，并且可以降低文件的大小。