2
項目結構requirejs回調不確定
root
wwwroot <-- files under this location are static files public to the site
css
lib
bootstrap/js/bootstrap.js
jquery/js/jquery.js
knockout/knockout.js
requires/require.js
scripts
modules ┌───────────────┐
global.js <--│ Built modules │
dropdown.js └───────────────┘
modules
global.js ┌────────────────┐
dropdown <--│ Source modules │
dropdown.js └────────────────┘
gruntfile.js
global.cs內容（預編譯的版本在〜/模塊/ global.js）
require.config({
baseUrl: "scripts/modules",
paths: {
jquery: "../../lib/jquery/js/jquery",
bootstrap: "../../lib/bootstrap/js/bootstrap",
knockout: "../../lib/knockout/knockout"
},
shims: {
bootstrap: {
deps: ['jquery']
}
},
});
define(function (require) {
var $ = require('jquery');
var ko = require('knockout');
var bootstrap = require('bootstrap');
});
dropdown.js內容 （〜/ modules/dropdown.js預建版）
define(function() {
console.log('dropdown initialized');
return 'foo';
});
HTML頁面
包含在加載頁面的<head>這個腳本標籤需要配置：
<script src="~/lib/requirejs/require.js" data-main="scripts/modules/global"></script>
在HTML頁面的主體，我有以下幾點：
<script>
require(['global'], function() {
require(['dropdown'], function (dropdown) {
console.log(dropdown);
});
});
</script>
Issue
dropdown回調是undefined而不是我從定義的模塊返回的預期「foo」字符串。
事實上，控制檯不包含「下拉初始化」的日誌項目。這讓我相信模塊沒有被調用？然而，很奇怪dropdown.js作爲加載到頁面中的腳本存在於F12調試器中。因此，要求確實調用了加載它，但沒有運行定義的內容？
值得注意提到
- 我使用r.js優化和建設。 global.js和dropdown.js都經過處理。
- 由r.js處理分配給下拉模塊的名稱是「modules/dropdown/dropdown.js」。我不確定我是否應該以某種方式使用它，或者如果我正確地將模塊稱爲
dropdown並依靠我的baseUrl配置具有正確的路徑。
編輯＃1
我已經添加了r.js建立與每評議請求咕嚕使用的配置。結合起來，我更新了文件結構以包含整個項目結構，而不僅僅是運行時公共wwwroot結構。
r.js過程將彙總來自源位置~/modules的~/wwwroot/scripts/modules中編譯的global.js +其他模塊的內置形式。
function getRequireJsConfiguration() {
var baseUrl = './';
var paths = {
jquery: "wwwroot/lib/jquery/js/jquery",
bootstrap: "wwwroot/lib/bootstrap/js/bootstrap",
knockout: "wwwroot/lib/knockout/knockout"
};
var shims = {
bootstrap: {
deps: ['jquery']
}
};
var optimize = 'none';
var configuration = {};
var jsFilePaths = grunt.file.expand('modules/**/*.js');
jsFilePaths.forEach(function (jsFilePath) {
var fileName = jsFilePath.split('/').pop();
if (configuration[fileName]) {
throw 'Duplicate module name conflict: ' + fileName;
}
configuration[fileName] = {
options: {
baseUrl: './',
name: jsFilePath,
out: 'wwwroot/scripts/modules/' + fileName,
paths: paths,
shims: shims,
optimize: optimize,
exclude: ['jquery', 'knockout', 'bootstrap']
}
};
});
configuration['global'] = {
options: {
baseUrl: './',
name: 'modules/global.js',
out: 'wwwroot/scripts/modules/global.js',
paths: paths,
shims: shims,
optimize: optimize,
}
};
return configuration;
}
編輯＃2
以爲它會是一個好主意，包括requirejs包的版本我使用的是：
requirejs: 2.1.15
grunt-contrib-requirejs: 0.4.4
感謝。
請將您的'r.js'構建配置添加到您的問題中。 – Louis
我已經根據你的請求添加了這個，並且更新了文件結構以包含相關的項目結構（這樣你就可以瞭解r.js的輸入和輸出）。謝謝。 –