从Webpack迁移至Vite后JS Worker代码执行失败求助

背景 #

此前使用Webpack配置构建独立JS Worker打包文件（单独文件），运行一切正常，Webpack配置如下：

const path = require('path');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    entry: {
        worker: {
            import: './assets/scripts/worker.ts',
            filename: './worker_bundle.js',
        }
    },
    output: {
        'path': path.resolve(__dirname, 'static', 'js')
    },
    plugins: [
        new webpack.ProvidePlugin({
            Buffer: ['buffer', 'Buffer'],
            process: 'process/browser',
        })
    ],
    resolve: {
        fallback: {
            "assert": require.resolve('assert'),
            "fs": false,
            "util": require.resolve("util"),
            "path": require.resolve("path-browserify")
        },
        extensions: ['.ts', '.js', '.json']
    },
    module: {
        rules: [
            {
                test: RegExp('\\.ts$'),
                use: 'ts-loader',
                exclude: RegExp('node_modules')
            }
        ]
    },
    externals: {
        jquery: 'jQuery',
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                extractComments: false,
                terserOptions: {
                    format: {
                        comments: false,
                    },
                },
            }),
        ],
    },
}

改用编译速度更快的Vite后，无论如何配置，打包后的文件在浏览器中都无法执行，Vite配置如下：

import path from 'path';
import commonjs from '@rollup/plugin-commonjs';
import topLevelAwait from "vite-plugin-top-level-await";
import {nodePolyfills} from "vite-plugin-node-polyfills";


module.exports = {
    plugins: [
        nodePolyfills({
            overrides: {
                fs: 'memfs'
            }
        }),
    ],
    build: {
        minify: false,
        rollupOptions: {
            input: {
                regexes_worker: path.resolve(__dirname, "./assets/scripts/worker.ts"),
            },
            output: [
                {
                    dir: path.resolve(__dirname, 'static/js'),
                    entryFileNames: 'worker_bundle.js',
                    globals: {
                        jquery: '$'
                    },

                    esModule: true
                }
            ],
            plugins: [
                commonjs({
                    filter(id) {
                        if (id.includes('node_modules')) {
                            return true
                        }
                    }
                }),
                topLevelAwait(),
            ]
        },
        emptyOutDir: false
    },
}

报错信息 #

浏览器控制台报错：

Uncaught (in promise) TypeError: Function has non-object prototype 'undefined' in instanceof check

Vite打包代码中报错位置片段：

function getAugmentedNamespace(n) {
    if (n.__esModule) return n;
    var f = n.default;
    if (typeof f == "function") {
        var a = function a2() {
            if (this instanceof a2 /* !! The execution fails here !! */ ) {
                return Reflect.construct(f, arguments, this.constructor);
            }
            return f.apply(this, arguments);
        };
        a.prototype = f.prototype;
    } else a = {};
    Object.defineProperty(a, "__esModule", {
        value: true
    });
    Object.keys(n).forEach(function (k) {
        var d = Object.getOwnPropertyDescriptor(n, k);
        Object.defineProperty(a, k, d.get ? d : {
            enumerable: true,
            get: function () {
                return n[k];
            }
        });
    });
    return a;
}

已尝试方案 #

• 使用不同JS版本编译打包文件
• 尝试各类Vite插件模拟Webpack功能
• 开启与Webpack一致的Terser编译器

以上方案均未解决问题，寻求技术帮助。

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