Gulp 和 Gulp 的 Durandal 优化不工作

Question

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

我正在使用 Gulp 和 Gulp-Durandal 扩展。这是我们的 gulp 文件：

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__;

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

问题是当我尝试加载应用程序时，它卡在加载屏幕上。它不会再往前走，浏览器控制台中也没有任何错误。

我在旁边新建了一个项目来测试我们的代码是不是有点问题，结果发现可能没有。您可以在这里找到该项目： https://github.com/maroy1986/DurandalGulpBundling

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

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

谢谢！

Answer 1

我下载了您的项目并尝试使用最新版本的 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 进行构建，应用程序工作正常。

Answer 2

我有同样的要求和问题。似乎 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"));
});

Gulp 和 Gulp 的 Durandal 优化不工作

Durandal optimization with Gulp and Gulp-Durandal not working

requirejs

bundling-and-minification

durandal

gulp