javascript - 带 Backbone 的 SPA 的 Require.js 优化器

Question

我构建了一个大型 Backbone 应用程序(大量 View 、模型、集合)并使用 require.js 进行模块加载。一切都按预期顺利进行。

现在我想将此应用程序发送到网络，但我想通过将所有内容压缩到一个(单个？)文件中来优化网络请求。我已经阅读了 Require.JS Optimizer、安装了 node.js 并创建了一个构建文件。 这些是我的测试:

1. 创建一个构建文件而不在模块部分指定单个模块 --> 我获得了源应用程序的副本，其中所有 js 文件都丑陋了。应用程序可以运行，但从网络请求的 Angular 来看似乎没有任何变化。

2. 使用单个模块(即我的 main.js 文件)创建一个构建文件 --> 我获得了源应用程序的副本，其中所有 js 文件都丑陋了，还有一个巨大的新 main.js 文件，我认为它包含其所有依赖项(即所有使用的文件)。这将解决网络请求问题，但应用程序根本无法启动，开始出现奇怪的错误。

使用 Require.JS 优化器的正确方法是什么？我想#2，但你的意见是什么？如果这是正确的方法，我应该找出如何解决这些错误......

谢谢

编辑

这是我的应用程序文件夹结构:

app
 |
  --- scripts
         |
         --- libs
         --- collections
         --- views
         --- models
         --- main.js
  --- styles
  --- templates
  --- index.htm

在“app”文件夹的同一级别我创建了一个包含r.js和build.js的build文件夹，其内容是这样的:

({
    //Directory relativa a questo file dove si trova l'app
    appDir: '../app',

    //Directory relativa ad appDir di dove si trovano i moduli
    baseUrl: 'scripts',

    //Percorso verso il file main
    mainConfigFile: '../app/scripts/main.js',

    paths:
    {
        jquery: 'libs/jquery/jquery-min',
        jqueryui: 'libs/jqueryui/jquery-ui-1.10.2.min',
        underscore: 'libs/underscore/underscore-min',
        backbone: 'libs/backbone/backbone-min',
        kendo: 'libs/kendo/kendo.web.min',
        kendo_it: 'libs/kendo/amd/kendo.culture.it.min',
        relational: 'libs/relational/backbone-relational',
        nested: 'libs/nested/backbone-nested-v1.1.2.min',
        rivets: 'libs/rivets/rivets.min',
        i18n: 'libs/i18next/i18next.amd.withJQuery-1.6.3',
        jvalid: 'libs/jqueryvalidate/jquery.validate.min',
        chartjs: 'libs/chartjs/chart.min',
        toastr: 'libs/toastr/toastr.min',
        templates: '../templates'
    },

    //Where to save the output
    dir: '../app-build',

    modules:
    [
        {
            name: 'main'
        }
    ]


})

我使用以下命令启动构建过程:

node r.js -o build.js

如果我运行“编译的”main.js，我会收到此错误:

Uncaught Error: Mismatched anonymous define() module

有什么想法吗？

Answer 1

根据您的应用程序的要求，您可以选择

• 将所有文件连接成单个文件
• 按模块连接

将所有内容连接到单个文件对于小型应用程序来说效果很好，但它无法扩展到更大的应用程序。 requirejs 有这方面的详细文档。如果一切正确，无论您采用什么方法，都不会引发错误。请提供有关您遇到的错误的更多信息，这可能有助于人们正确回答您的问题。