requirejs - 使用 Gulp 和 Gulp-Durandal 进行 Durandal 优化不起作用

Question

我们正在使用 Durandal 构建一个目前相当大的应用程序，我们目前正在考虑将位于 App 文件夹中的所有 JS 文件捆绑到一个 main-built.js 文件中。我猜是非常基本和常见的东西。

我将 Gulp 与 Gulp-Durandal 扩展一起使用。这是我们的 gulpfile :

var gulp = require('gulp');
var durandal = require('gulp-durandal');

gulp.task('build-portal', function () {
    durandal({
        baseDir: 'app',
        main: 'main.js',
        output: 'main-built.js',
        almond: false,
        minify: false
    }).pipe(gulp.dest('app'));
});

这是我们的 main.js 文件的片段

require.config({
paths: {
    'text': '../Scripts/text',
    'durandal': '../Scripts/durandal',
    'plugins': '../Scripts/durandal/plugins',
    'transitions': '../Scripts/durandal/transitions'
},
shim: {
},
waitSeconds: 0
});

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

define(
    ["require", "exports", "durandal/app", "durandal/viewLocator", "durandal/system", "plugins/router", "services/logger", "modules/knockout.extensions", "modules/knockout.validation.custom"],
    function (require, exports, __app__, __viewLocator__, __system__, __router__, __logger__, __koExtensions__, __koValidationCustom__) {
        var app = __app__;
        var viewLocator = __viewLocator__;
        var system = __system__;
        var router = __router__;

正如您在 gulpfile 中看到的那样，我们不想使用 Almond，而是使用 RequireJs，出于某些原因，almond 不适用于我们的项目，无论如何，我们更喜欢 RequireJs，无论它最终是否比杏仁大。这就是它要刹车的地方。运行命令来构建 main-built.js 文件需要一些时间，但最后我得到了包含所有内容的文件。

问题是当我尝试加载应用程序时，它卡在加载屏幕上。它不会更进一步，浏览器控制台中根本没有错误。

我在旁边创建了一个新项目来测试我们的代码是否有些错误，并发现它可能没有。您可以在此处找到该项目:
https://github.com/maroy1986/DurandalGulpBundling

如果我使用杏仁选项为 true 构建该项目，则一切正常，但是如果我关闭 almound 以告诉 gulp 使用 RequireJs，我的行为与我们的应用程序相同。你卡在加载屏幕上，没有任何错误。

所以我在这里，我确实阅读了很多关于该主题的内容，但没有找到任何解决此问题的方法。希望这里有人已经遇到这些行为并有解决方案可以分享。

谢谢!

Answer 1

我下载了您的项目并尝试使用最新版本的 gulp 和 durandal 构建它。最初它没有构建并给了我以下错误:

 TypeError: Cannot read property 'normalize' of undefined

这是 rjs 的文本插件的问题，您可以通过将以下内容添加到您的 gulp 文件(杏仁、缩小、输出...属性旁边)来解决此问题:

rjsConfigAdapter : function(rjsConfig){
            rjsConfig.deps = ['text'];
            return rjsConfig;
        }

一旦我这样做了，构建就完成了，我可以使用或不使用缩小、杏仁和要求进行构建，并且应用程序运行良好。