如何使用 requirejs 构建 durandal 应用程序?
How to build durandal app using requirejs?
我正在使用 gulp-du运行dal 但它只支持构建到一个文件中。
现在我想使用 requirejs 和 bundles
功能,但还不能让它工作。
这是我使用的 gulp 文件:
var requirejs = require('requirejs');
var gulp = require('gulp');
var requireJsOptimizerConfig = {
out: '../dist/main-built.js',
baseUrl: 'app',
name: 'main',
paths: {
requireLib: '../scripts/require',
},
include: [
"requireLib",
],
insertRequire: ['main'],
bundles: { },
mainConfigFile: 'main.js',
};
gulp.task('build', function () {
requirejs.optimize(requireJsOptimizerConfig);
});
并且 main.js
文件如下所示:
requirejs.config({
paths: {
'text': '../lib/require/text',
'durandal':'../lib/durandal/js',
'plugins' : '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'knockout': '../lib/knockout/knockout-3.4.0',
'bootstrap': '../lib/bootstrap/js/bootstrap',
'jquery': '../lib/jquery/jquery-1.9.1'
},
shim: {
'bootstrap': {
deps: ['jquery'],
exports: 'jQuery'
}
}
});
define([...], function(){ ... });
虽然gulp运行没有任何错误,但是当我访问该站点时,有一个st运行ge HTTP请求:
http://localhost:8080/Scripts/durandal/plugins/widget.js?v=1.0.0.0
我猜测文件夹 durandal/js/plugins
中的插件未正确编译。我该如何解决这个问题?
我尝试明确指定 widget
库,但它仍在寻找 Scripts
文件夹:
paths: {
requireLib: '../scripts/require',
'widget': '../Scripts/durandal/plugins/widget',
},
include: [
"requireLib",
'widget',
],
我一开始也不明白 du运行dal 是如何做到 运行 的。因为,据我所知,你必须定义每个单独的模块,所以这个配置如何工作:
paths: {
plugins' : '../lib/durandal/js/plugins'
}
我找到了解决方案。首先,requirejs
和 rjs
是两个不同的东西。
requirejs
支持 bundles
,但是 rjs
,执行 building/optimization 的工具没有这个选项。
所以我们必须手动构建每个包。然后,通过 bundles
选项,告诉 requirejs
所有这些包,它们里面有什么,通过添加以下代码:
require.config({
bundles: {
bundle1: ['file1', 'file2'],
...
}
});
当需要一个文件时,requirejs
将查看此 "map" 并加载包含该文件的包(如果尚未加载)。
我根据 SteveSanderson 的工作修改了原始 gulp-durandal
:durandal-bundler.js; gulpfile.js
SteveSanderson 的演讲:
我正在使用 gulp-du运行dal 但它只支持构建到一个文件中。
现在我想使用 requirejs 和 bundles
功能,但还不能让它工作。
这是我使用的 gulp 文件:
var requirejs = require('requirejs');
var gulp = require('gulp');
var requireJsOptimizerConfig = {
out: '../dist/main-built.js',
baseUrl: 'app',
name: 'main',
paths: {
requireLib: '../scripts/require',
},
include: [
"requireLib",
],
insertRequire: ['main'],
bundles: { },
mainConfigFile: 'main.js',
};
gulp.task('build', function () {
requirejs.optimize(requireJsOptimizerConfig);
});
并且 main.js
文件如下所示:
requirejs.config({
paths: {
'text': '../lib/require/text',
'durandal':'../lib/durandal/js',
'plugins' : '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'knockout': '../lib/knockout/knockout-3.4.0',
'bootstrap': '../lib/bootstrap/js/bootstrap',
'jquery': '../lib/jquery/jquery-1.9.1'
},
shim: {
'bootstrap': {
deps: ['jquery'],
exports: 'jQuery'
}
}
});
define([...], function(){ ... });
虽然gulp运行没有任何错误,但是当我访问该站点时,有一个st运行ge HTTP请求:
http://localhost:8080/Scripts/durandal/plugins/widget.js?v=1.0.0.0
我猜测文件夹 durandal/js/plugins
中的插件未正确编译。我该如何解决这个问题?
我尝试明确指定 widget
库,但它仍在寻找 Scripts
文件夹:
paths: {
requireLib: '../scripts/require',
'widget': '../Scripts/durandal/plugins/widget',
},
include: [
"requireLib",
'widget',
],
我一开始也不明白 du运行dal 是如何做到 运行 的。因为,据我所知,你必须定义每个单独的模块,所以这个配置如何工作:
paths: {
plugins' : '../lib/durandal/js/plugins'
}
我找到了解决方案。首先,requirejs
和 rjs
是两个不同的东西。
requirejs
支持 bundles
,但是 rjs
,执行 building/optimization 的工具没有这个选项。
所以我们必须手动构建每个包。然后,通过 bundles
选项,告诉 requirejs
所有这些包,它们里面有什么,通过添加以下代码:
require.config({
bundles: {
bundle1: ['file1', 'file2'],
...
}
});
当需要一个文件时,requirejs
将查看此 "map" 并加载包含该文件的包(如果尚未加载)。
我根据 SteveSanderson 的工作修改了原始 gulp-durandal
:durandal-bundler.js; gulpfile.js
SteveSanderson 的演讲: