Question

我有一个网站，技术上由许多独立的SPA组成。

App/Admin
App/Signup
App/MainApp

我应该如何组织App文件夹和gulp构建，使其成为需要时加载的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 - 所有SPA共享的文件

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 - 使用路由器，执行子菜单或其他任何内容的渲染。这是最低限度：

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

应用/管理/ index.js


与MainApp.js相同，但fromParent设置为true且moduleId设置为SPA名称除外。

这在调试模式下应该可以正常工作。

gulp设置变为：

<强> 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中的原因是捆绑包仅用于编译版本。

为多个SPA配置durandal

1 个答案: