如何在Worker中初始化fast-png模块？Factory函数结合import问题求助

我正尝试将Node.js中的图像解码器适配至浏览器环境，目前代码已可正常运行，但我的目标是在Worker中使用该解码器。我了解到另一个可在Worker中运行的解码器通过Factory函数集成，但它仅支持8位图像，而我需要能读取16位图像的fast-png。

不过我对在Factory函数中结合import使用并不熟悉，因此有以下问题：Factory函数能否与import结合使用？若可以，显然我的实现存在问题，希望有人能提供正确的实现示例。

如需帮助，我也可以创建GitHub仓库。

当前代码 #

(function(global, factory){
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.png = {}));
})(function (exports) {


import {IOBuffer} from '../resources/libs/fast-png/IOBuffer.js';
import { inflate, Inflate as Inflator } from '../resources/libs/fast-png/pako.js';
import {pngSignature, crc} from '../resources/libs/fast-png/common.js';
import {ColorType, CompressionMethod, FilterMethod, InterlaceMethod} from '../resources/libs/fast-png/internalTypes.js';

class PngDecoder extends IOBuffer {
    constructor(data, options = {}) {
        super(data);    

        //many parameters, I have deleted them here so that 
        //there are not hundreds of lines of code here and the essentials are not lost
    }//end constructor
    
    //... many methods, i deleted them to keep track
}//end class

//...
//... many functions, i deleted them to keep track
//...


function decodePng(data, options) {
    const decoder = new PngDecoder(data, options);
    return decoder.decode();
}


exports.decodePng = decodePng;

}));//end of factory function



async function imageLoader() {
    
    const arrayBuffer = await(await fetch('./resources/textures/depth1.png')).arrayBuffer();
    
    const imageData = await png.decodePng(arrayBuffer);
    const data = imageData.data;

    postMessage(data);
}

//will call when the worker is called
imageLoader();

解决方案 #

核心问题：Factory函数与ES模块import冲突 #

你当前的代码混用了UMD风格的Factory包裹函数和ES模块的import语法，这在浏览器Worker环境中会直接报错——Worker不支持在IIFE/UMD包裹内使用顶层import，两种模块系统不能混用。

正确实现方式：改用纯ES模块 #

1. 重构解码器为ES模块文件（例：png-decoder.js）

去掉UMD的Factory包裹，直接用ES模块导出：

import {IOBuffer} from '../resources/libs/fast-png/IOBuffer.js';
import { inflate, Inflate as Inflator } from '../resources/libs/fast-png/pako.js';
import {pngSignature, crc} from '../resources/libs/fast-png/common.js';
import {ColorType, CompressionMethod, FilterMethod, InterlaceMethod} from '../resources/libs/fast-png/internalTypes.js';

class PngDecoder extends IOBuffer {
    constructor(data, options = {}) {
        super(data);    
        // 保留你的构造逻辑
    }
    
    // 保留原解码方法
    decode() {
        // 原解码逻辑
    }
}

export function decodePng(data, options) {
    const decoder = new PngDecoder(data, options);
    return decoder.decode();
}

2. 改造Worker文件（例：image-worker.js）

直接导入ES模块的解码器，无需全局变量：

import { decodePng } from './png-decoder.js';

async function imageLoader() {
    const arrayBuffer = await (await fetch('./resources/textures/depth1.png')).arrayBuffer();
    const imageData = decodePng(arrayBuffer); // 注意：fast-png的decodePng是同步方法，不需要await
    const data = imageData.data;
    postMessage(data);
}

imageLoader();

3. 主线程加载Worker时指定模块类型

创建Worker必须加上type: 'module'参数：

const worker = new Worker('./image-worker.js', { type: 'module' });
worker.onmessage = (e) => {
    // 处理解码后的数据
    console.log(e.data);
};

关键注意事项 #

• 确保所有依赖文件（IOBuffer.js、pako.js等）均为ES模块格式（使用export导出内容）
• Worker中ES模块的路径必须是相对路径或绝对URL，不能省略文件扩展名
• fast-png的decodePng是同步方法，无需添加await

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