Конфигурирование дюрандаля для нескольких SPA

Question

У меня есть сайт, который технически состоит из нескольких отдельных SPA.

App/Admin 
App/Signup 
App/MainApp 

Как следует организовать папку App и глотком сборки, чтобы сделать это в 3-4 отдельных файлов/модулей, которые загружаются при необходимости.

Answer 1

Поскольку я должен был провести целый день, чтобы это работало, я отвечу на свой вопрос.

Сначала подготовьте сайт loader. Это будет основной загружаемый сайт, который отвечает за загрузку всех других сайтов.

App/main.js - Содержит настройки requirejs

В этом мы бы запустить app.setRoot('shell', 'entrance');

App/shell.js - содержит маршрутизатор конфигурации

return router.map([ 
    { route: 'Admin/*all', moduleId: "Admin/index", nav: true }, 
    { route: 'Signup/*all', moduleId: "Signup/index", nav: true }, 
    { route: '*all', moduleId: "MainApp/index", nav: true } 
]) 
    .buildNavigationModel() 
    .activate(); 

App/shell.html - содержит использование маршрутизатора и общего верхнего/нижнего колонтитула/загрузки щит

<div style="height: 100%" data-bind="css: { loading: isLoading }"> 
<!-- ko compose: 'loading.html'--><!-- /ko --> 
<div class="header">...</div> 
<!-- ko router: { transition:'entrance' } --><!-- /ko --> 
</div> 

App/* JS. - Файлы общего среди всех ООТ

App/MainApp/index.js - содержит вспомогательный маршрутизатор для этого SPA

define(["require", "exports", "plugins/router"], function (require, exports, router) { 
    "use strict"; 
    var childRouter = router.createChildRouter() 
     .makeRelative({ 
     moduleId: 'MainApp', 
     fromParent: false //<!----- FALSE for MainApp, TRUE for other SPA 
    }) 
     .map([ 
     { route: '', moduleId: "viewmodels/test", nav: true }, 
    ]) 
     .mapUnknownRoutes("viewmodels/err", 'err') 
     .buildNavigationModel(); 
    return (function() { 
     function class_1() { 
      this.router = childRouter; 
     } 
     return class_1; 
    }()); 
}); 

App/MainApp/index.html - Использует маршрутизатор и выполняет любую визуализацию submenues или любой другой. Здесь голый минимум:

<div data-bind="router: { }"></div> 

App/Admin/index.js

идентичен MainApp.js, для fromParent множества к истинному и moduleId множества к ОРУ, кроме имя.

Это должно отлично работать в режиме отладки.

Установка глотком становится:

gulpfile.JS

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

gulp.task('build', [], function() { 
return gulp.start(['build-admin', 'build-signup', 'build-mainapp', 'build-base']); 
}); 

function buildModule(name) { 
var path = name + '/'; 
return durandal({ 
    baseDir: 'App', 
    output: name + '.js', 
    minify: true, 
    almond: false, 
    verbose: false, 
    moduleFilter: function (moduleName) { 
    return moduleName.indexOf(path) > -1; 
    }, 

    rjsConfigAdapter: function (config) { 
    config.stubModules = config.exclude; 
    config.exclude = ["main"]; 
    config.stubModules.push('text'); 
    return config; 
    } 
}) 
    .pipe(gulp.dest('dist')); 
} 

gulp.task('build-admin', [], function() { 
return buildModule('Admin'); 
}); 
gulp.task('build-signup', [], function() { 
return buildModule('Signup'); 
}); 
gulp.task('build-mainapp', [], function() { 
return buildModule('MainApp'); 
}); 
gulp.task('build-base', [], function() { 
return durandal({ 
    baseDir: 'App', 
    output: 'main.js', 
    minify: true, 
    verbose: false, 
    moduleFilter: function (moduleName) { 
    return moduleName.indexOf('Admin/') === -1 && moduleName.indexOf('MainApp/') === -1 && moduleName.indexOf('Signup/') === -1; 
    }, 
    rjsConfigAdapter: function (config) { 
    config.stubModules = config.exclude; 
    config.exclude = []; 
    return config; 
    } 
}) 
    .pipe(gulp.dest('dist')); 
}); 

Это теперь будет приводить к

dist/main.js 
dist/Admin.js 
dist/MainApp.js 
dist/Signup.js 

в вашем default.html (или что вы называете это), вы должны сказать ему, как загрузить эти файлы:

<script>window.require = { 
    bundles: { 'MainApp': ['MainApp/index'],'Signup': ['Signup/index'], 'Admin': ['Admin/index'] } 
};</script> 
<script type="text/javascript" data-main="main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script> 

Причина этого нахождения в файлах html, а не main.js, заключается в том, что пучки используются только для compi во главе.