使用GeoTiff.js与Web Worker时Rollup/Vite构建报错问题

问题场景 #

在Web Worker中处理GeoTiff文件：通过CalculateRidge.ts的getRidgePoints函数创建Worker、发送消息并等待结果，Worker通过addEventListener执行getRidgePoints_Init加载并处理GeoTiff。开发环境运行正常，但生产构建时出现如下错误：

Error [RollupError]: Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.

排查结论 #

仅满足以下条件时触发报错：

• Web Worker中同时调用GeoTiff.js的fromArrayBuffer()和.getImage()方法
• 跳过Web Worker在主线程执行逻辑，或Worker中不调用上述两个GeoTiff方法时，构建均正常

解决方案 #

1. 为Web Worker单独配置Rollup输出格式 #

Vite的主构建配置和Worker构建配置是分离的，需要单独为Worker指定ESM格式及相关配置。修改vite.config.ts：

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import path from 'path';

export default defineConfig({
  base: "/solar-analysis-faroe-island/",
  plugins: [svelte()],

  build: {
    // 主构建配置
    rollupOptions: {
      output: {
        format: "esm",
        inlineDynamicImports: true,
      }
    },
    // 新增Web Worker专属构建配置
    worker: {
      rollupOptions: {
        output: {
          format: "esm",
          inlineDynamicImports: true
        }
      }
    }
  },

  resolve: {
    alias: {
      src: path.resolve('src/'),
    }
  },
})

2. 确保GeoTiff.js采用ES模块导入 #

在CalculateRidgeWorker.ts顶部添加正确的ES模块导入语句，避免CommonJS格式导致Rollup自动切换到IIFE：

import { fromArrayBuffer } from 'geotiff';

addEventListener('message', async (e:MessageEvent<Pos>) => {
  // ... 原有逻辑
})

3. 禁用Worker的代码分割（备选方案） #

如果上述配置仍未解决问题，可直接禁用Worker的代码分割，避免格式冲突：

worker: {
  rollupOptions: {
    output: {
      format: "esm"
    },
    codeSplit: false
  }
}

原因说明 #

当Worker中调用GeoTiff.js的fromArrayBuffer和getImage方法时，会触发依赖的动态导入或代码分割逻辑。Vite默认对Worker的构建可能采用IIFE格式，而IIFE不支持代码分割，因此出现格式不兼容的报错。通过单独为Worker指定ESM格式并配置内联动态导入/禁用代码分割，即可解决该冲突。

内容的提问来源于stack exchange，提问作者Ólavur Nún