Swup多插件使用问题：Scripts与Body Class插件无法同时生效

嘿，我太懂你遇到的这个问题了——这种“只有最后调用的插件生效”的情况，大概率是初始化Swup的方式出了问题，导致插件被互相覆盖了。下面给你说两种靠谱的解决办法，保证Scripts和Body Class插件能同时正常工作：

方法一：初始化时一次性传入所有插件 #

这是最推荐的标准用法，把所有需要的插件放进同一个数组，直接传给Swup的初始化配置就行：

如果你的项目用ES模块导入：

import Swup from 'swup';
import SwupScriptsPlugin from '@swup/scripts-plugin';
import SwupBodyClassPlugin from '@swup/body-class-plugin';

// 核心：所有插件都放在plugins数组里
const swup = new Swup({
  plugins: [
    new SwupScriptsPlugin(),
    new SwupBodyClassPlugin()
  ]
});

如果是用CDN直接引入的场景：

<script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>
<script src="https://unpkg.com/@swup/scripts-plugin@latest/dist/SwupScriptsPlugin.min.js"></script>
<script src="https://unpkg.com/@swup/body-class-plugin@latest/dist/SwupBodyClassPlugin.min.js"></script>

<script>
  const swup = new Swup({
    plugins: [
      new SwupScriptsPlugin(),
      new SwupBodyClassPlugin()
    ]
  });
</script>

方法二：用use()方法逐个添加插件 #

要是你需要动态添加插件（比如根据条件加载），也可以先初始化Swup，再给同一个实例逐个调用use()方法添加插件：

// 先创建一个干净的Swup实例
const swup = new Swup();

// 给同一个实例依次添加插件
swup.use(new SwupScriptsPlugin());
swup.use(new SwupBodyClassPlugin());

为什么之前的方式会失效？ #

你之前的问题大概率是这两种情况之一：

1. 创建了多个Swup实例：比如先初始化一个带Scripts插件的Swup，又初始化了一个带Body Class插件的Swup——后面的实例会直接覆盖前面的，自然只有最后一个插件能生效。
2. 错误拆分了配置：比如把两个插件分别放在不同的初始化配置里，而不是合并到同一个plugins数组中。

最后提个小细节：记得确认插件版本和Swup主库的版本兼容，版本不匹配也可能导致奇怪的冲突哦。

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