RequireJS 优化构建仍在尝试加载外部 jQuery 文件答案

【问题标题】：RequireJS optimized build still trying to load external jQuery fileRequireJS 优化构建仍在尝试加载外部 jQuery 文件
【发布时间】：2014-02-22 00:34:23
【问题描述】：

我一直在开发一个使用 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 是一个空模块，它只需要所有使用的第 3 方库，以确保它们已加载并使优化更清晰（我最终得到一个包含我的应用程序代码的 main.js 文件和供应商.js 文件，包含所有第 3 方代码。）controllers 文件是相同的，只是包含大多数应用程序模块。

我遇到的问题是，在编译并运行优化后的应用程序后，require 仍在尝试从 requirjs.config 块中列出的路径中加载 hbs、jquery 和 underscore，即使我可以看到它们正在被编译成vendor.js。

if ( typeof define === "function" && define.amd ) {
    define( "jquery", [], function() {
        return jQuery;
    });
}

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

【问题讨论】：

您可以将vendor 模块的内容添加到问题中吗？尽管它可能很简单，但在这个模块中仍然可能会出错。

标签： jquery backbone.js optimization requirejs r.js

【解决方案1】：

您在寻找empy: directive吗？

在您的构建配置中，

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

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

【讨论】：

不幸的是，没有。如果我只是尝试加载 jQuery，那会起作用，但问题确实出在所有 3rd 方库上。 Require 正在尝试使用 main.js 中的“路径”配置来加载所有内容，而不是依赖于 vendor.js 中内联的已注册模块。顺便说一句，如果库的 CDN 版本是优化构建中填充模块的依赖项，则您不能使用它，这是我今天刚刚学到的新知识：Important optimizer notes for "shim" config
@ken.dunnington 啊，我明白了，我误解了你的问题。

【解决方案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 版本，因为它的 shim 不起作用，并将 Marionette shim 上的 exports 切换为 Backbone.Marionette，因为 Marionette 不是'不显示为全局变量。

我发现this article 对实现大部分目标非常有帮助。

【讨论】：