javascript - BreezeJS 和 RequireJS 没有按预期工作

Question

我正在将 breezeJS 集成到一个已经使用 knockoutJS 的现有 requireJS 项目中。我遇到了几个问题。

首先是 breeze 无法加载 Q 库，除非我将它作为 <script> 包含在我的 html 包装器中。标记，而不是加载的 AMD 依赖项。在我的项目中，我试图将我的代码简化为单个脚本标记，因此这并不理想。

第二个问题是breezeJS无法加载knockout。在我的 main.js 中，我为 knockout 定义了一条路径:

knockout: '../libs/knockout/knockout-2.2.0',

(我这样做是因为我喜欢确定我没有访问全局 ko)

但是，当我将 breeze 添加到我的项目时，breeze 无法加载我的 knockout 库。查看 Breeze 代码，我可以看到它已被硬编码为将 knockout 库加载为 ko .

不想更改我的所有代码，我发现我可以将我的 AMD 加载的 knockout 库添加到全局窗口对象中，作为 window['ko'] .但这感觉像是一个障碍。同样奇怪地以这种方式添加 Q 并删除 <script>标签不起作用，因为我认为在应用程序的生命周期中太早需要 Q，甚至在我开始污染全局之前 - 我确实嵌套了我的 require()在 main.js 中调用，但它在构建过程中隐藏了我的大部分应用程序文件，所以我放弃了这种方法。

如何在我的项目中包含 Q 和 knockout 以及 breeze 并且仍然使用单行 <script>标签，目前我不得不将 Q 作为一个单独的 <script> 包含在内标记并污染全局以获得 Breeze 和 knockout 以发挥出色。

我在我的项目中使用了很多其他库，但没有一个库如此难以集成。

非常感谢任何帮助

干杯

加夫

编辑:这是我的完整要求配置:

require.config({
    /**
    * shims are for 3rd party libraries that have not been written in AMD format.
    * shims define AMD modules definitions that get created at runtime.
    */
    shim: {
        'jqueryUI': { deps: ['jquery'] },
        'jqueryAnimateEnhanced': { deps: ['jqueryUI'] },
        'jqueryScrollTo': { deps: ['jquery'] },
        'touchPunch': { deps: ['jquery'] },
        //'Q': { exports: 'Q' },
        //'breeze': { deps: ['Q', 'knockout'], exports: 'breeze' },
        'path': { exports: 'Path' },
        //'signalR': { deps: ['jquery'] },
    },

    paths: {
        //jquery
        jquery: '../libs/jquery/jquery-1.7.2.min',
        'jquery.adapter': '../libs/jquery/jquery.adapter',

        //jquery plugins
        horizontalNav: '../libs/jquery/plugins/horizontalNav/jquery.horizontalNav',
        jqueryUI: '../libs/jquery/plugins/jquery-ui/jquery-ui-1.9.2.custom',
        jqueryAnimateEnhanced: '../libs/jquery/plugins/animate-enhanced/jquery.animate-enhanced',
        touchPunch: '../libs/jquery/plugins/touch-punch/jquery.ui.touch-punch.min',
        //jqueryScrollTo: '../libs/jquery/plugins/jquery-scrollTo/jquery.scrollTo.min',
        //reveal: '../libs/jquery/plugins/reveal/jquery.reveal',
        //opentip: '../libs/jquery/plugins/opentip/opentip-jquery',

        //RequireJS
        domReady: '../libs/require/plugins/domReady',
        text: '../libs/require/plugins/text',
        async: '../libs/require/plugins/async',
        depend: '../libs/require/plugins/depend',
        json: '../libs/require/plugins/json',
        noext: '../libs/require/plugins/noext',

        //coffee-script
        'coffee-script': '../libs/coffee/coffee-script',
        cs: '../libs/require/plugins/cs',

        //Path
        path: '../libs/path/path.min',

        //Knockout
        knockout: '../libs/knockout/knockout-2.2.0',
        knockoutTemplateSource: '../libs/knockout/ko.templateSource',
        knockoutValidation: '../libs/knockout/ko.validation',

        //breeze
        Q: '../libs/breeze/q',
        breeze: '../libs/breeze/breeze.debug',

        //Signals (Observer pattern)
        signals: '../libs/signals/signals',

        //SignalR - Push notifications
        signalR: '../libs/signalR/jquery.signalR-0.5.2.min',

        //utils
        logger: 'common/logging/logger',
        tinycolor: '../libs/tinycolor/tinycolor',
        composing: 'common/composition/composing',

        //app specific
        BaseWidgetViewModel: 'app/view/core/BaseWidgetViewModel',

    }
});

Answer 1

很抱歉(假期)延迟回答您的问题。

我理解并感谢您消除除 RequireJS 之外的所有脚本标记的目标。根据我的经验，这个目标并不容易实现。

您确实发现了 Breeze 缺陷。 Breeze 在内部引用了与您的应用程序的“要求”功能不同的“要求”功能。它不知道应用程序的“要求”功能或其配置。因此，当您省略 Q 脚本标记时，Breeze 无法找到 Q ... 无论您如何配置应用程序“require”。

我们必须解决这个问题。当我们这样做时，我会在这里添加评论。

同时，您必须为“Q”和“KO”使用脚本标签，并且必须将这些标签放在 RequireJs 的脚本标签之上。请继续为您的应用程序脚本使用 require。

不幸的是，您还有其他与双需求函数问题无关的问题。

首先，我认为您总是难以将 KO 排除在全局命名空间之外……而这与 Breeze 无关。

在 KO 的 AMD 实现中(至少在我上次查看时)，KO 要么在全局命名空间中，要么在 require 容器中；从来没有。 不幸的是，许多有用的插件(bindingHandlers、debug.helpers)假定它在全局命名空间中；如果您使用 require 加载 KO，您将无法使用它们。

您可以在 Require 之前的脚本标记中加载 Knockout，然后在配置期间将 KO 填充到 Require 容器中。您的配置可能如下所示:

define('knockout', [], function () { return window.ko; });

jQuery 开发人员意识到这将是一个问题。太多好的插件假定 jQuery 在全局命名空间中。 jQuery 维护者(在我看来是正确的)不是纯粹主义者，而是将 jQuery 放在全局命名空间中的 Require 容器和中。

其次，许多其他有用的库不支持 Require。您的代码可以像这些脚本是为 require 设计的一样编写。我仍然认为处理这个问题的最简单、最清晰的方法是在脚本标签中指定它们。然后，您可以通过使用 define 调用定义它们来将它们添加到容器中，如上所示。通过这种填充，您自己的模块可以在依赖 Require 进行服务定位和这些库的依赖注入(inject)方面保持一致。

第三，我认为你的配置有问题。出于我没有想到的原因，您决定在您的 Require 世界中将 Knockout 模块称为“knockout”。

很好……但是当我们修复它以使用应用程序的 require 容器时，您不应该期望 Breeze 预测到该模块名称。 Breeze 将以其标准名称“ko”寻找 KnockoutJs。 Breeze 不会在您喜欢的名称“knockout”下找到它。

这没什么大不了的。如果您执着于“knockout”名称，则可以使同一个实例在两个名称下都可用。我很确定将以下填充行添加到您的配置代码后会起作用:

define('ko', ['knockout'], function (ko) { return ko; });

同样...这只有在我们修复了 Breeze 要求错误后才会生效。

John Papa 不得不解决许多类似的问题 in Code Camper ;您可能会看看他在那里做了什么，尤其是 main.js。