首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >为多个SPA配置工期

为多个SPA配置工期
EN

Stack Overflow用户
提问于 2016-10-26 02:42:07
回答 1查看 118关注 0票数 0

我有一个网站,技术上是由多个独立的水疗中心组成。

代码语言:javascript
运行
复制
App/Admin
App/Signup
App/MainApp

我应该如何组织App文件夹和gulp构建,使其成为3-4个单独的文件/模块,这些文件/模块在需要时加载。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-10-26 02:42:07

因为我得花一整天的时间来完成这个任务,所以我会回答我自己的问题。

首先,准备一个loader站点。这将是实际加载的主站点,负责加载所有其他站点。

App/main.js --包含所需的设置 在这里,我们将运行app.setRoot('shell', 'entrance'); App/shell.js. we -包含路由器配置

代码语言:javascript
运行
复制
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 -包含路由器的使用和通用的页眉/页脚/加载屏蔽

代码语言:javascript
运行
复制
<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的子路由器。

代码语言:javascript
运行
复制
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 --使用路由器,并执行任何子实体的呈现或其他任何操作。在这里,最低限度:

代码语言:javascript
运行
复制
<div data-bind="router: { }"></div>

App/Admin/index.jsMainApp.js相同,但fromParent设置为true,moduleId设置为SPAs名称。

现在,在调试模式下,这应该可以很好地工作。

“吞咽”设置变成:

gulpfile.js

代码语言:javascript
运行
复制
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'));
});

现在这将导致

代码语言:javascript
运行
复制
dist/main.js
dist/Admin.js
dist/MainApp.js
dist/Signup.js

在您的default.html (或您所称的)中,您需要告诉它如何加载这些文件:

代码语言:javascript
运行
复制
<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中,因为包只用于编译版本。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/40252852

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档