여러 SPA에 대해 durandal 구성

Question

기술적으로 여러 개의 별도 SPA로 구성된 사이트가 있습니다. 나는 응용 프로그램 폴더 및 필요시로드 3-4 별도의 파일/모듈로이을 할 수있는 꿀꺽 빌드를 구성하는 방법을

App/Admin 
App/Signup 
App/MainApp 

.

Answer 1

나는이 일을 하루 종일 보내야했기 때문에, 나는 내 자신의 질문에 대답 할 것이다.

먼저 loader 사이트를 준비하십시오. 이것은 다른 모든 사이트를로드하는 책임이있는 실제로로드되는 기본 사이트입니다.

응용 프로그램이/main.js - 우리는 app.setRoot('shell', 'entrance');

앱/shell.js를 실행하는 것이에서 requirejs 설정

을 포함은 - 라우터 설정을 포함

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(); 

응용 프로그램은/shell.html - 모든 SPA를 공유 파일 -. 라우터의 사용 및 공통 머리글/바닥 글 /로드 실드

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

앱/* JS을 포함

App/MainApp/index.js - 해당 SPA에 대한 보조 라우터가 포함됩니다.

이 앱은 MainApp/index.html을은/- 라우터를 사용하고, submenues이든의 렌더링을 수행한다. 여기에 최소한의 :

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

앱/관리 /하는 index.js

은 SPA를에 true로 fromParent 세트와 moduleId 세트를 제외하고는 MainApp.js 동일 이름.

이제 디버그 모드에서 정상적으로 작동합니다.

꿀꺽 설정이된다 :

gulpfile.

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')); 
}); 

JS이 지금에

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> 

을

main.js이 아닌 html 파일에서이 이유는 번들이 compi에서만 사용된다는 것입니다 led 버전.