Question

我正在尝试使用RequireJS将我们的JS模块化为一些较大的JS文件，以便可以按需加载依赖项，但在加载页面时不需要大量的单JS下载。

例如，JS文件为：

JS / main.js
JS /视图/类别1 / js1.js
JS /视图/类别1 / js2.js
JS /视图/类别2 / js1.js
JS /视图/类别2 / js2.js

应用程序的某些部分（例如，类别1中的所有部分）仅供某些类型的用户使用，类似于类别2，因此无需为每个用户加载所有部分。

我正在尝试为r.js构建配置来创建两个动态加载的模块（category1.js＆amp; 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>

从router.js引用JS1，JS2等文件。

Answer 1

执行require(['A'], ...)或define(['A'], ...时，RequireJS会检查其配置以解析名称A，并构建一个用于加载模块的网址{{1} }。它可能会尝试加载类似的内容：

如果您优化模块以使http://localhost/js/A.js，A，B包含在名为C的包中，您将拥有以下可能性：

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

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

true

这告诉RequireJS，“当你想加载模块bundles: { category1: ['A', 'B', 'C'] }时，加载A，你会在那里找到它。”

请注意，您不必列出捆绑包中的每个模块。例如，如果您有一个模块category1，并且您知道要加载它的唯一模块是同一个包的一部分，那么您不需要将其列为{{1}中的模块}。

RequireJS优化到多个模块

1 个答案: