3

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

  • 实用程序.js
  • 模块1/controllers.js
  • 模块1/services.js
  • 模块2/controllers.js
  • 模块2/services.js

实用程序.js

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

模块1/controllers.js

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

模块2/controllers.js

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

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

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

模块1/main.js

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

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

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

好的，我得到了我想要的行为，但我看到这两个模块都包含 utils.js 代码。这种行为是正确的，因为您无法保证加载顺序。

所以，这些是我的问题：

  1. 是否存在任何智能解决方案？
  2. 如果不能跳过，有人知道 requirejs 是如何工作的吗？这种策略会产生任何问题吗？
4

2 回答 2

4

最后，我使用构建脚本中的 exclude 选项得到了答案：

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

这样，我为 utils 创建了一个单独的模块，并避免使用“排除”选项将其包含在其他模块代码中。此方法强制您手动编写这种“全局”依赖项，但它有效:)

于 2013-06-06T21:23:16.963 回答
1

不知道你是如何“玩”优化工具的，但是当我有一个基本库（就像我所有的主干扩展一样）时，我是这样处理它的，然后是一两个视图：

基础库：类似“base.js”的东西

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

第 x 页的代码：假设是“x.js”

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

});

根据需要设置一个“libraryBuild.js”文件和一个“build.js”文件 - 两者之间的区别在于 build.js，您需要将“base.js”中定义的所有文件设置为“空” .

libraryBuild.js

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

构建.js

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

现在，运行两次优化（我通过 npm 安装了 requirejs 作为全局包，所以我可以调用 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>

我确信有更好的方法可以做到这一点，但这至少确实有效并且可以减小文件大小。

于 2013-06-06T16:52:27.573 回答