如何使用import而非require导入jvectormap-next模块？

问题核心 #

你遇到的问题是jvectormap-next模块的CommonJS导出被代码中的第二个IIFE覆盖，导致默认导入的factory函数并非定义$.fn.vectorMap的那个，调用后自然无法找到该方法。

解决方案一（推荐）：修改Vite配置让模块自动执行插件初始化 #

通过配置Vite，让jvectormap-next在处理时模拟全局环境，触发定义插件的factory自动执行：

1. 编辑vite.config.js，添加以下配置：

export default {
  optimizeDeps: {
    include: ['jvectormap-next'],
    esbuildOptions: {
      define: {
        exports: 'false',
      },
    },
  },
}

2. 修改你的导入代码，直接导入模块而非factory函数：

import $ from 'jquery';
import 'jvectormap-next'; // 模块会自动执行初始化逻辑，给jQuery挂载vectorMap方法
import US_Merc from 'jvectormap-content/us-merc';  

$.fn.vectorMap('addMap', 'us-merc', US_Merc);

解决方案二：手动调用正确的factory函数（不推荐，稳定性差） #

如果无法修改Vite配置，你可以尝试直接导入模块的核心文件（依赖模块结构，版本更新可能失效）：

import $ from 'jquery';
import jvnext from 'jvectormap-next/dist/jquery-jvectormap'; // 导入核心模块文件
jvnext($);
import US_Merc from 'jvectormap-content/us-merc';  

$.fn.vectorMap('addMap', 'us-merc', US_Merc);

原因解释 #

jvectormap-next源码中存在两个IIFE：

• 第一个IIFE的factory负责定义$.fn.vectorMap，但在CommonJS/ES模块环境下仅将factory赋值给module.exports
• 第二个IIFE的factory无插件定义逻辑，但会覆盖module.exports
  导致你通过import jvnext from 'jvectormap-next'获取到的是第二个factory，调用后无法初始化插件。修改Vite配置后，模块会进入全局环境分支，自动执行第一个factory，完成jQuery插件的挂载。

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