Vite/ES6：如何避免重复导入已加载的jQuery等外部脚本

核心结论 #

rollupOptions.external 完全可以阻止jQuery被打包进你的插件文件，这是解决体积冗余问题的最优方案，配合全局变量映射就能正常使用WordPress内置的jQuery。

具体配置步骤 #

在你的vite.config.js中添加如下配置，明确把jQuery标记为外部依赖，并映射到WordPress提供的全局变量：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      // 声明jquery为外部依赖，打包时忽略它
      external: ['jquery'],
      output: {
        // 将导入的'jquery'映射到全局的jQuery对象（WordPress里全局变量是jQuery或$）
        globals: {
          jquery: 'jQuery'
        }
      }
    },
    // 建议打包成UMD格式，适配WordPress的脚本加载环境
    lib: {
      entry: 'src/main.js',
      name: 'YourPluginNamespace',
      formats: ['umd'],
      fileName: (format) => `your-plugin.${format}.js`
    }
  }
});

代码中如何导入使用 #

配置完成后，直接在你的ES6代码里正常导入即可，打包时Vite会自动把这个导入替换为全局变量引用，不会把jQuery代码打包进来：

// src/main.js
import $ from 'jquery';

// 正常使用jQuery
$('.some-element').on('click', function() {
  // 你的业务逻辑
});

关于import和import()的打包区别 #

• 静态import：就是上面用的import $ from 'jquery'，打包阶段就会被处理，结合external配置后，直接替换为全局变量引用，完全不会增加包体积，是最推荐的方式。
• 动态import()：比如import('jquery').then($ => { ... })，这是代码分割的语法，即使配置了external，打包时会生成一个异步引用，但不会打包jQuery代码。不过这种方式没必要用在jQuery这种全局已存在的依赖上，只会增加额外的异步逻辑，静态import更简洁。

WordPress端的额外注意 #

注册插件脚本时，记得声明依赖为jquery，这样WordPress会确保先加载内置的jQuery，再加载你的插件脚本，避免找不到全局变量的错误：

// 插件主PHP文件中的注册代码
wp_enqueue_script(
  'your-plugin-script',
  plugins_url('dist/your-plugin.umd.js', __FILE__),
  array('jquery'), // 声明依赖jQuery
  '1.0.0',
  true // 放在footer加载，和WordPress默认的jQuery加载位置一致
);

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