由于项目中有一个FUBAR目录组织,我花了一些时间重新组织该项目的JS脚本。该项目使用requirejs,在重组之前运行良好。然而,现在调用或编译(我们使用r.js优化器)时不会加载任何内容——尽管编译完成时没有任何抱怨。我已经检查过,反复检查过,三次检查过,现在屈服于要求在Stack Overflow上再看一眼。
使用RequireJS:2.1.4和r.js 2.1.4
以下是我的配置:
build-js.js(用于优化器)
var requirejs = require('requirejs');
var config = {
baseUrl: './public/js',
mainConfigFile: './public/js/config/config.js',
paths: {
'requireLib': 'library/require'
},
out: ".public/js/minified/main.js",
name: "minified/main",
wrap: false,
preserveLicenseComments: false,
deps: ["app/main","modules/movie","modules/theatre"]
};
requirejs.optimize(config);
config.js
// Set the require.js configuration for your application.
require.config({
paths: {
// JavaScript folders
libs: "library",
plugins: "plugin",
app: "app",
adminlibs: "../adminassets/js/plugins/ui",
// Libraries
jquery: "library/jquery",
jqcookie: "library/jquery.cookie",
jqui: "../adminassets/js/plugins/ui/jquery-ui-1.10.0.custom.min",
jqezmark: "library/jquery.ezmark",
jqcolor: "library/jquery.color",
underscore: "library/underscore-amdjs",
backbone: "library/backbone-amdjs",
chosen: "library/chosen.jquery",
moment: "library/moment",
// Site Components
site: "app/site",
sitediscussion: "app/site-discussion",
namespace: "app/namespace",
// Plugins
text: "plugin/text",
async: "plugin/async",
use: "plugin/use",
datetimepicker: "../adminassets/js/plugins/ui/jquery.datetimepicker",
ajaxfileupload: "../adminassets/js/plugins/uploader/jquery.ajaxfileupload"
},
shim: {
'chosen': ['jquery'],
'jqcookie': ['jquery'],
'jqui': ['jquery'],
'jqezmark': ['jquery'],
'jqcolor': ['jquery'],
'site': {
deps: ['jquery','jqezmark','chosen','underscore','namespace','jqui','jqcookie'],
exports: 'site'
},
'sitediscussion': {
deps: ['jquery', 'underscore'],
exports: 'sitediscussion'
},
'jquifull' : ['jquery'],
'datetimepicker' : ['jqui'],
'ajaxfileupload' : ['jquery'],
'backbone': ['underscore','jquery']
},
// Initialize the application with the main application file
deps: ["app/main"]
});
文件结构如下:
{site-root}/public/js
其中包含目录:
应用程序配置图书馆缩小的模块插件模板
上面在build-js和config.js中列出的所有文件都被确认在预期的文件夹中。
requirejs的调用如下:
在开发机器上(我目前正在测试安装程序):
data main="/js/config/config"src="/js/library/request.js"
在生产中(目前甚至没有创建缩小的/主文件,尽管应该创建)
data main="/js/minimied/main"src="/js/library/request.js"
有人能看出我做错了什么吗?同样,除了上面列出的两个文件(build-js.js和config.js)之外,站点本身、javascript等没有任何更改。唯一的变化是文件在目录结构中进行了物理移动。因此,我几乎肯定我在某个地方遇到了路径问题,但我似乎找不到。有什么帮助吗?
已找到分辨率。我通过位于"/js/config/config"的requirejs-include脚本标记中的data-main属性引用了我的配置文件。尽管我声明了/public/js的基本路径,但系统仍试图使用/js/config/作为我的基本路径(正如requirejs文档中所述,如果没有以其他方式声明基本路径,它将基于您的data-main属性作为基本路径)。我将config.js文件移到了/js,并将data-main更改为/js/config,现在所有路径都正常工作,引用了基本路径/js。
附带说明的是,由于我使用了Zend框架和错误处理,我没有注意到文件加载失败。没有404错误,我的开发工具的"网络"选项卡显示成功加载了所有.js文件。。。只有当我查看这些文件的响应内容时,我才发现它们吐出的是PHP错误日志,而不是.js内容。