Question

我从一个使用Bootstrap 3和Require.js构建的大型合作客户端获得了一个设计库。它非常强大，并且使用Require.js加载jQuery的各种脚本构建良好。问题是，Drupal已经加载了jQuery并且双重负载导致一些项目失败。如果我删除所有Require.js调用，Drupal jQuery的东西效果很好。如果我删除基本的Drupal jQuery文件，使用Require.js的所有东西都很有效。这是我考虑过的选项：

停止使用Drupal加载jQuery，使用require在每个页面上加载jQuery - 我还没有尝试过这个，但它似乎错了。我想我可以在我的主题中用hook_library_alter（）删除jQuery？想知道是否有人试过这个...我的前端和管理员屏幕实际上使用了2个不同的主题，所以我想我必须修改它们。
使用Require.js加载来阻止jQuery - 我试过这个并且如果没有加载Require.js，那么加载require.js的其他库都找不到查询，所以我不认为这个选项有效。这是我第一次使用require.js所以也许有一些有趣的解决方法，我还没弄明白？
使用Drupal将所有库添加到站点 - 这似乎是很麻烦的工作，因为我必须删除库中的所有require.js依赖项，并且期望我们不要修改库/框架所以实施新版本很容易。

还有其他建议吗？

根据Nikos Paraskevopoulos的回复更新：

我已经将Drupal配置为加载了require.js包附带的jQuery版本，Drupal很满意。所以现在在每个页面上我按以下顺序加载：

/components/jquery/jquery.js
/misc/jquery.once.js
/misc/drupal.js
/components/requirejs/require.js
/js/require.config.js

我的requires.config如下所示：

requirejs.config({
    baseUrl: "./",
    paths: {
        .....
        jquery:
        "components/jquery/jquery", "jquery-csv": "components/jquery-csv/src/jquery.csv",
        "jqueryui-sortable-amd": "components/jqueryui-sortable-amd/js/jquery-ui-1.10.2.custom",
        .....
    },
    shim: {
        "jquery-backstretch": [
            "jquery"
        ],
        masonry: [
            "jquery"
        ],
        OpenLayers: {
            exports: "OpenLayers"
        },
        "jquery-csv": [
            "jquery"
        ]
    }
});

如果我从路径中删除了jquery条目，并添加：

    jquery: {
        exports: 'jQuery' // NOTE THE CASE OF 'Q', THIS IS THE GLOBAL NAME
    }

我立即收到错误：

未捕获错误：脚本错误：jqueryui-sortable-amd

这是有道理的，因为他们都被宣布在一起。 uggg。

Answer 1

关于选项2：

我不知道究竟是怎么加载的，但我猜Drupal会加载jQuery +其他需要的东西，然后还加载了RequireJS，后者又加载了自己版本的jQuery +其他需要的东西

首先，您应该确保Drupal和RequireJS应用程序都可以使用相同版本的jQuery。然后在您的RequireJS配置 shim jQuery中，而不是正常加载它，例如而不是：

require.config({
    ...
    paths: {
        // REMOVE THIS IF USED (PROBABLY IS)
        jquery: 'lib/jquery-x.y.z'
        ...

执行：

require.config({
    ...
    shim: {
        jquery: {
            exports: 'jQuery' // NOTE THE CASE OF 'Q', THIS IS THE GLOBAL NAME
        }
        ...

说明：如果在RequireJS之后加载jQuery，它将自己定义为jquery（小写Q）。这是其他模块依赖于jQuery的名称。另一方面，如果它在RequireJS之前加载，它不会定义itdelf，而是留下jQuery（可能还有$）全局变量。上面的垫片指示RequireJS在模块依赖于jQuery模块时使用全局jquery变量，该模块有望实现您想要的，即仅通过Drupal加载jQuery。

Drupal和Require.js打得不好 - 双重加载jQuery

1 个答案: