Question

我一直致力于使用RequireJS进行模块化的Backbone应用程序。我觉得我已经很好地处理了这个问题，但是现在我们已经准备好部署了，我整天都在与r.js作战，而且我真的被卡住了。我设法让应用程序构建没有任何错误，但是当我尝试运行优化的构建时，它忽略了几个已经内置到我的输出文件中的文件。这是我正在使用的（为简洁而编辑）build.js文件：

({
    appDir: "main-app",
    baseUrl: "js",
    mainConfigFile: "main-app/js/main.js",
    dir: "build",
    optimize: "none", // for debugging this issue
    findNestedDepencencies: false, // 'true' isn't needed, and didn't fix the issue anyway
    removeCombined: true,
    modules: [
        { name: "main", exclude: ["vendor"] },
        { name: "vendor" }
    ],
    wrap: true
})

main.js文件已在非优化模式下工作数周。这是该文件的简化版本：

requirejs.config({
    shim: {
        handlebars: { exports: 'Handlebars' },
        underscore: { exports: '_' },
        backbone: { deps: ['underscore', 'jquery'], exports: 'Backbone' },
        marionette: { deps: ['backbone'], exports: 'Marionette' }
    },
    paths: {
        jquery: "vendor/jquery/jquery",
        handlebars: "vendor/handlebars/handlebars",
        backbone: "vendor/backbone/backbone",
        underscore: "vendor/underscore/underscore",
        marionette: "vendor/marionette/backbone.marionette",
        hbs: "vendor/require-handlebars-plugin/hbs"
    },
    hbs: {
        helperDirectory: "common/templates/helpers/"
    }
});

requirejs(['vendor', 'app', 'controllers'], function(Vendor, Application) {
    Application.start();
});

其中vendor是一个空模块，只需要使用所有第三方库，以确保它们被加载并使优化更清晰（我最终得到一个带有我的应用程序代码的main.js文件，以及带有所有第三方代码的vendor.js文件。）controllers文件是相同的，只是对大多数应用程序模块而言。

我遇到的问题是，在编译并运行优化的应用程序后，require仍在尝试从hbs，jquery和underscore加载requirjs.config，vendor.js和if ( typeof define === "function" && define.amd ) { define( "jquery", [], function() { return jQuery; }); } {1}}阻止，即使我可以看到它们被编译为hbs。

{{1}}

我花了很多时间试图进行{{1}}编译，所以我仍然在尝试确定这是否会导致问题，但我不知道它会如何。

Answer 1

您在寻找empy: directive吗？

在构建配置中，

({
...
 paths : {
    'jquery' : 'empty:'
 },
})

将路径指定为空告诉r.js它是外部加载的。

Answer 2

我终于开始工作了。核心问题与包容的顺序有关。在main.js中，我将初始化调用切换为：

requirejs(['vendor'], function() {
    requirejs(['app'], function(Application) {
        Application.start();
    });
});

然后，在app.js（这是一个木偶应用程序）：

Application.on("initialize:after", function() {
    require(['controllers'], function() {
        ... history, setup, etc...
    });
});

基本上，我需要确保没有循环依赖关系，这在生产过程中没有出现。

除此之外，我还改用了AMD包装版的Handlebars，因为垫片不起作用，并将木偶垫片上的exports切换为Backbone.Marionette，因为Marionette并未显示为全局变量。

我发现this article对于完成大部分工作非常有帮助。

RequireJS优化版本仍在尝试加载外部jQuery文件

2 个答案: