我有一个网站,技术上是由多个独立的水疗中心组成。
App/Admin
App/Signup
App/MainApp
我应该如何组织App文件夹和gulp构建,使其成为3-4个单独的文件/模块,这些文件/模块在需要时加载。
发布于 2016-10-26 02:42:07
因为我得花一整天的时间来完成这个任务,所以我会回答我自己的问题。
首先,准备一个loader
站点。这将是实际加载的主站点,负责加载所有其他站点。
App/main.js --包含所需的设置 在这里,我们将运行
app.setRoot('shell', 'entrance');
App/shell.js. we -包含路由器配置
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>
App/Admin/index.js 与
MainApp.js
相同,但fromParent
设置为true,moduleId
设置为SPAs名称。
现在,在调试模式下,这应该可以很好地工作。
“吞咽”设置变成:
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
中,因为包只用于编译版本。
https://stackoverflow.com/questions/40252852
复制相似问题