Question

我的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成员。

这里发生了什么？基金会如何拦截这个需要（）调用并返回不需要的东西？我应该以不同的方式将基金会纳入这个项目吗？

Answer 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：如果你解决我的语法错误，我将不胜感激。

为什么Foundation似乎在废弃RequireJS模块？

1 个答案: