Gulp 和 Gulp-Durandal 的 Durandal 优化不起作用

Question

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

我正在使用带有 Gulp-Durandal 扩展的 Gulp。这是我们的 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 文件的 sn-p

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，无论它最后是否比 almond 大。这就是它看起来要刹车的地方。运行命令来构建 main-built.js 文件需要一些时间，但最后我得到了包含所有内容的文件。

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

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

如果我在构建项目时将 almond 选项设置为 true，则一切正常，但如果我关闭 almound 以告诉 gulp 使用 RequireJs，我会得到与我们的应用程序相同的行为。您卡在加载屏幕上，没有任何错误。

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

谢谢！

Answer 1

我有同样的要求和问题。似乎 require.js 没有调用将启动 Durandal 应用程序的主模块，这就是它卡在加载屏幕中的原因。我能够通过隐式调用主模块来解决它：

gulp.task("durandal", function() {
    return durandal({
        baseDir: "app",
        main: "main.js",
        output: "main-built.js",
        almond: false,
        minify: true,
        rjsConfigAdapter: function(config) {
            //Tell requirejs to load the "main" module
            config.insertRequire = ["main"];
            return config;
        }
    })
    .pipe(gulp.dest("dist"));
});

Answer 2

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

 TypeError: Cannot read property 'normalize' of undefined

这是 rjs 的文本插件的问题，您可以通过将以下内容添加到您的 gulp 文件（在 almond、minify、output... 属性旁边）来解决此问题：

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

一旦我这样做了，构建就完成了，我可以使用或不使用 minify、almond 和 require 进行构建，并且应用程序工作正常。