使用Svelte引入transformers.js库报错的原因及解决方法

报错原因 #

SvelteKit依赖Vite作为构建工具，Vite默认会将模块中的HTTP/HTTPS URL导入视为本地模块路径处理，而非直接请求CDN资源。所以你写的顶层静态导入import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.3.0'会被Vite解析成本地文件查找，导致找不到模块的错误。

解决方法 #

方法1：使用动态await import（推荐） #

动态导入是运行时加载，Vite不会在构建阶段解析CDN URL，而是由浏览器直接请求资源，这也是你看到的svelte-qrcode示例可行的原因。适配你的需求的代码如下：

<script>
  import { onMount } from 'svelte';
  let pipeline;

  async function initTransformer() {
    // 动态导入CDN模块
    const transformerModule = await import('https://cdn.jsdelivr.net/npm/@xenova/transformers@2.3.0');
    pipeline = transformerModule.pipeline;
    
    // 这里可以初始化你的任务，比如文本分类
    // const classifier = await pipeline('text-classification');
  }

  // 组件挂载后加载模块
  onMount(async () => {
    await initTransformer();
  });
</script>

方法2：配置Vite允许顶层CDN导入 #

如果你坚持使用顶层静态导入，可以修改Vite配置，告诉它不要处理这个CDN模块：

在项目根目录的vite.config.js（或vite.config.ts）中添加optimizeDeps.exclude配置：

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

export default defineConfig({
  plugins: [sveltekit()],
  optimizeDeps: {
    // 排除transformers模块，让Vite保留原CDN导入
    exclude: ['@xenova/transformers']
  }
});

之后就可以在组件中使用顶层导入：

<script>
  import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.3.0';
  
  async function init() {
    const classifier = await pipeline('text-classification');
    // 后续逻辑
  }
</script>

注意：transformers.js依赖WebAssembly，动态导入的方式更适合处理加载过程中的异步逻辑，避免阻塞组件渲染，推荐优先使用方法1。

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