Vite/Rollup外部依赖配置异常：未识别全局依赖及模块解析失败

1. Vite配置层级错误 #

SvelteKit的Vite配置中，Rollup的external和output.globals必须嵌套在build.rollupOptions下，直接在顶层配置不会生效。正确配置示例：

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  build: {
    rollupOptions: {
      external: ['radash', '@leeoniya/ufuzzy'],
      output: {
        globals: {
          radash: 'radash',
          '@leeoniya/ufuzzy': 'ufuzzy'
        }
      }
    }
  }
});

注意：需匹配库的UMD包实际暴露的全局变量名——radash对应radash，@leeoniya/ufuzzy对应ufuzzy。

2. 补充全局依赖的前置加载 #

浏览器报错是因为页面未提前加载这两个库的UMD资源，需在src/app.html中通过CDN引入：

<!-- src/app.html -->
<body>
  <script src="https://cdn.jsdelivr.net/npm/radash@latest/dist/radash.umd.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@leeoniya/ufuzzy@latest/dist/ufuzzy.umd.js"></script>
  %sveltekit.body%
</body>

3. vite-plugin-externals的正确用法（可选） #

若使用该插件，需确保配置正确映射模块到全局变量：

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import viteExternals from 'vite-plugin-externals';

export default defineConfig({
  plugins: [
    sveltekit(),
    viteExternals({
      radash: 'radash',
      '@leeoniya/ufuzzy': 'ufuzzy'
    })
  ]
});

同样需要在app.html中引入CDN资源。

结论 #

这是配置错误，并非Bug。核心问题在于Rollup配置层级不正确，且缺少全局依赖的前置加载步骤，按上述调整即可解决。

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