如何用Vite和Rollup打包含模块的Service Worker适配Firefox？

核心思路 #

Firefox暂不支持Service Worker使用ES模块，因此需要将Service Worker打包为单文件非模块格式（如IIFE），同时关闭Rollup的代码分割功能——因为IIFE格式本身不支持代码分割，这也是你之前报错的根源。

具体配置步骤 #

1. 调整Vite的Worker打包配置 #

在vite.config.js中，针对Service Worker文件单独配置Rollup规则，禁用代码分割并指定输出格式：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      // 指定Service Worker入口文件
      input: {
        sw: './src/sw.js',
      },
      output: {
        // 禁用代码分割，强制所有代码打包到单个文件
        manualChunks: null,
        // 输出格式设为IIFE，适配非模块环境
        format: 'iife',
        // 自定义输出文件名（可选，保持原文件名更易维护）
        entryFileNames: '[name].js',
        // 可选：指定IIFE的全局变量名，避免作用域冲突
        name: 'ServiceWorkerBundle'
      }
    }
  }
});

2. 修改Service Worker注册逻辑 #

打包后的SW为非模块格式，注册时必须移除type: 'module'参数：

// 原模块格式注册代码（需废弃）
// navigator.serviceWorker.register('/sw.js', { type: 'module' });

// 修改后的非模块注册代码
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/sw.js');
      console.log('Service Worker注册成功:', registration.scope);
    } catch (err) {
      console.error('Service Worker注册失败:', err);
    }
  });
}

3. 处理SW中的模块依赖 #

如果你的Service Worker原本使用了import导入模块，Rollup会自动将所有依赖打包进最终的IIFE文件中，无需手动修改导入语法，确保所有逻辑都被包含在单文件内。

4. 验证打包结果 #

执行npm run build后，检查dist/sw.js是否为单个完整文件，无额外chunk分割。在Firefox中打开项目，通过开发者工具的「Application」标签页确认Service Worker是否正常注册生效。

注意事项 #

• 若项目中存在其他Web Worker文件，可通过Rollup的input配置单独区分，避免影响其他Worker的打包规则。
• Service Worker中使用的self等全局对象，IIFE格式会自动适配，无需额外调整作用域。

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