RequireJS优化成多个模块

Question

我正在尝试使用 RequireJS 将我们的 JS 模块化为几个更大的 JS 文件，以便可以按需加载依赖项，而无需在加载页面时加载大型单个 JS。

例如，JS 文件为：

js/main.js
js/views/category1/js1.js
js/views/category1/js2.js
js/views/category2/js1.js
js/views/category2/js2.js

应用程序的某些部分（例如类别 1 中的所有内容）仅供某些类型的用户使用，类别 2 也类似，因此为每个用户都加载它没有意义。

我正在尝试 r.js 的构建配置来创建两个动态加载的模块（category1.js 和 category2.js），它们包含各自 js1.js 中的所有代码和 js2.js 个文件。

({
appDir: './',
baseUrl: './js',
dir: './dist',
modules: [
    {
        name: 'main',
        exclude: [
            "category1",
            "category2"
        ]
    },
    {
        name: "category1",
        include: [
            "views/category1/js1",
            "views/category1/js2"
        ],
        create: true
    },
    {
        name: "category2",
        include: [
            "views/category2/js1",
            "views/category2/js2"
        ],
        create: true
    }
],
fileExclusionRegExp: /^(r|build)\.js$/,
writeBuildTxt: false,
optimizeCss: 'standard',
removeCombined: true,
paths: {
    jquery: 'lib/jquery',
    underscore: 'lib/underscore',
    backbone: 'lib/backbone/backbone'
},
shim: {
    underscore: {
        exports: '_'
    },
    backbone: {
        deps: [
            'underscore',
            'jquery'
        ],
        exports: 'Backbone'
    }
}
})

然而，当加载编译后的输出时，浏览器抱怨找不到views/category1/js1、views/category1/js2等。

我什至不确定是否可以在 RequireJS 中从多个较小的 JS 文件创建一些高级模块。有没有人有这方面的经验？

编辑

main.js:

require.config({
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: [
                'underscore',
                'jquery'
            ],
            exports: 'Backbone'
        }
    },
    paths: {
        jquery: 'lib/jquery',
        underscore: 'lib/underscore',
        backbone: 'lib/backbone/backbone'
    }
});

require([
    'views/app',
    'router'
], function(AppView, Router) {
    new Router();
    Backbone.history.start();
});

index.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script data-main="js/main" src="js/lib/require/require.js"></script>
</head>
<body></body>
</html>

正在从路由r.js引用 JS1、JS2 等文件。

Answer 1

当你执行 require(['A'], ...) 或你有一个 define(['A'], ... 时，RequireJS 检查其配置以解析名称 A，并构建一个用于加载的 URL模块 A。它可能会尝试加载如下内容：

http://localhost/js/A.js

如果您优化模块，使 A、B、C 包含在名为 category1 的包中，您有以下可能性：

加载包 category1，然后请求 A。这很好，因为在加载 category1 时找到了 A。
捆绑包尚未加载，但已请求 A。这是一个问题，因为它将以与未优化相同的方式解析 A。但是你在这里遇到了一个问题，因为如果你优化了你的模块，那么 A 在 category1 之外就不再可用了（因为 removeCombined 是 true）。

解决方案是在您的运行时间配置中告诉 RequireJS 包中包含您要加载的模块。您为此使用 bundles 选项。例如：

bundles: {
  category1: ['A', 'B', 'C']
}

这告诉 RequireJS，"when you want to load module A, load category1 and you'll find it in there"。

请注意，您不必列出捆绑包中的每个模块。例如，如果你有一个模块 X，并且你知道唯一想要加载它的模块是同一个包的一部分，那么你不需要将它列为 [=30= 中的模块].

RequireJS优化成多个模块

RequireJS optimization into multiple modules

requirejs

r.js

requirejs-optimizer