我的HTML是这样的:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script data-main="/static/scripts/main" src="/static/scripts/require.js"></script>
</head>
<body></body>
</html>
static/scripts/main
看起来像这样:
requirejs.config({
paths: {
"foundation": '/static/scripts/foundation-6/js/foundation.min'
}
});
require(["foundation", "moduleA"], function(foundation, moduleA) {
console.log("main.js loaded dependencies");
});
static/scripts/moduleA.js
是:
console.log("ModuleA loaded");
define(function() {
console.log("inside moduleA callback");
return {
Blah: "Blah!"
}
});
我可以看到moduleA.js
脚本被require
加载,但它没有被视为模块,我从控制台看到内部回调从未被执行过。 console.log
中main.js
行中的断点显示,moduleA
返回的内容不是我期望的模块,而是返回Interchange(element, options)
的实例foundation
object是Abide(element, options)
的一个实例。这些似乎是基金会的组成部分,但我不明白为什么他们会被送到这里。
但是,假设我通过将main.js
中的require语句更改为此来删除Foundation依赖项:
require(["moduleA"], function(moduleA) {
console.log("main.js loaded dependencies");
});
运行使一切按预期工作 - 我现在看到&#34;内部模块A回调&#34;控制台中的消息,断点显示我的moduleA
对象按预期包含Blah成员。
这里发生了什么?基金会如何拦截这个需要()调用并返回不需要的东西?我应该以不同的方式将基金会纳入这个项目吗?
答案 0 :(得分:1)
首先你应该弄清楚基础库是AMD模块。你应该打开foundation.js并尝试在开头找到这个代码:
if (typeof define === 'function' && define['amd']) {
// [1] AMD anonymous module
define(['exports', 'require'], factory);
}
所以foundation.js不是AMD模块。 RequireJS对非AMD模块有shim选项。接下来,您应该检查变量基础返回到Global Scope。在302行,您可以看到以下代码:window.Foundation = Foundation;
。全局变量为Foundation
。结果代码应为:
requirejs.config({
paths: {
"foundation": 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.0/foundation',
},
shim:{
"foundation":{
exports:"Foundation"
}
}
});
但遗憾的是,对于foundation.js还不够。在303行,您可以看到foundation.js是jquery插件。所以你应该通过RequireJS包含jquery。 jQuery是AMD模块。你可以在文件里面看到它。你应该在shim中包含jQuery作为foundation.js的依赖。所以结果代码将是:
main.js:
requirejs.config({
paths: {
"foundation": 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.0/foundation',
"jquery": "https://code.jquery.com/jquery-2.2.1"
},
shim:{
"foundation":{
deps: ['jquery'],
exports:"Foundation"
}
}
});
require(["foundation", "moduleA"], function(foundation,moduleA) {
debugger;
console.log("main.js loaded dependencies");
});
的index.html:
<html>
<head>
<script data-main="main.js" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js"> </script>
</head>
<body>
</body>
</html>
moduleA.js是一样的。
ps:如果你解决我的语法错误,我将不胜感激。