我的 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 加载，但它没有被视为模块，并且我从控制台看到内部回调永远不会被执行。 main.js 中的 console.log 行中的断点显示，作为 moduleA 返回的不是我期望的模块，而是一个Interchange(element, options) 的实例，而返回的 foundation 对象是 Abide(element, options) 的实例。这些似乎是基金会组件，但我不明白为什么它们被返回到这里。
但是，假设我随后通过将 main.js 中的 require 语句更改为以下内容来删除 Foundation 依赖项:
require(["moduleA"], function(moduleA) {
console.log("main.js loaded dependencies");
});
运行使一切按预期工作 - 我现在在控制台中看到“内部 moduleA 回调”消息，并且断点显示我的 moduleA 对象按预期包含 Blah 成员。
这是怎么回事？ Foundation 如何拦截此 require() 调用并返回不需要的内容？我是否应该通过其他方式将 Foundation 纳入该项目？
最佳答案
首先你应该弄清楚基础库是AMD模块。您应该打开foundation.js并尝试在开头找到此代码:
if (typeof define === 'function' && define['amd']) {
// [1] AMD anonymous module
define(['exports', 'require'], factory);
}
所以foundation.js不是AMD模块。 RequireJS 有shim非 AMD 模块的选项。接下来您应该检查哪些变量基础返回到全局范围。在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:如果您能纠正我的语法错误，我将不胜感激。
关于javascript - 为什么 Foundation 似乎废弃了 RequireJS 模块？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35721445/