Drupal 8登录后出现jQuery冲突问题如何解决？

这个问题太常见了，本质就是登录后Drupal会加载核心自带的jQuery（默认处于noConflict模式，不会暴露$全局变量），而你的Foundation代码依赖$，直接调用就会触发"$ is not a function"报错。下面给你几个靠谱的解决方案，按推荐程度排序：

1. 用jQuery noConflict模式兼容代码 #

这是改动最小、最安全的方案，不需要调整Drupal的库加载逻辑，只需要修改你的Foundation相关JS代码：

方法A：直接将代码中的$替换为jQuery #

把所有依赖$的代码换成jQuery，比如初始化Foundation的代码：

jQuery(document).ready(function() {
  jQuery(document).foundation();
  // 其他需要$的代码也都换成jQuery
});

方法B：用自执行匿名函数包裹代码，保留$的使用 #

如果不想大面积替换$，可以把你的JS代码放在自执行函数里，将jQuery作为参数传入并映射为$：

(function($) {
  // 这里面可以正常用$代替jQuery
  $(document).ready(function() {
    $(document).foundation();
    // 你的其他Foundation交互代码
  });
})(jQuery);

这个方法的好处是不用修改原有代码的写法，只需要加一层包裹就能兼容。

2. 统一使用Drupal的jQuery，避免重复加载 #

如果你的主题自己加载了一份jQuery，而登录后Drupal又加载了核心的jQuery，就会导致两次加载引发冲突。这种情况下，应该去掉主题中自己加载的jQuery，改用Drupal核心的版本：

1. 打开主题的[your-theme].libraries.yml文件，找到加载Foundation的库定义。
2. 删除自己引入的jQuery文件（比如js/vendor/jquery.js），然后添加对Drupal核心jQuery的依赖：

your-theme-foundation:
  version: 1.x
  js:
    js/foundation.min.js: {}
    # 删掉自己的jquery.js引用
  css:
    theme:
      css/foundation.css: {}
  dependencies:
    - core/jquery  # 添加这一行，依赖Drupal核心的jQuery

这样主题会复用Drupal的jQuery，不会重复加载，再配合上面的noConflict代码，就能彻底解决冲突。

3. 动态排除Drupal前台的核心jQuery（谨慎使用） #

如果Foundation需要的jQuery版本和Drupal核心的版本不兼容，你可以在前台排除Drupal的jQuery，只保留主题自己的版本。但注意：后台绝对不能排除，否则会导致Drupal后台功能完全异常。

在主题的[your-theme].theme文件中添加以下代码：

function your_theme_name_page_attachments_alter(array &$attachments) {
  // 判断当前是否是后台路由，如果是则不修改
  if (\Drupal::service('router.admin_context')->isAdminRoute()) {
    return;
  }
  // 遍历所有加载的库，移除Drupal核心的jQuery
  foreach ($attachments['#attached']['library'] as $key => $library) {
    if ($library === 'core/jquery') {
      unset($attachments['#attached']['library'][$key]);
    }
  }
}

替换your_theme_name为你的主题机器名，这样前台就只会加载你主题中的jQuery，后台保留Drupal的核心jQuery，兼顾前台功能和后台正常使用。

内容的提问来源于stack exchange，提问作者ciaobetty