How to import open-im-sdk-wasm in webpack4.x

[unicycle-master]

What would you like to share?

How to use openIM3. x without upgrading to webpack5, the webpack ^ 4.4.2 used in Vue2

Additional information

No response

[Bloomingg]

1. add patch-package

npm i patch-package

2. update package.josn scripts

"scripts": {
+  "postinstall": "patch-package"
 }

3. update open-im-sdk-wasm

node_modules->open-im-sdk-wasm->lib->index.js(index.es.js)

function initWorker() {
    if (typeof window === 'undefined') {
        return;
    }
    // use for webpack 4
    const IMWorker = require('worker-loader!./worker.js');
    worker = new IMWorker.default();
    // use for webpack5+ or vite
    // const isViteEnvironment = import.meta.url.includes('.vite/deps');
    // const isSupportModuleWorker = supportsModuleWorkers();
    // const getWorkerUrl = (url) => url.href.replace('.vite/deps', 'open-im-sdk-wasm/lib');
    // const workerUrl = isSupportModuleWorker
    //     ? new URL('worker.js', import.meta.url)
    //     : new URL('worker-legacy.js', import.meta.url);
    // worker = new Worker(isViteEnvironment ? getWorkerUrl(workerUrl) : workerUrl, {
    //     type: isSupportModuleWorker ? 'module' : 'classic',
    // });
    // This is only required because Safari doesn't support nested
    // workers. This installs a handler that will proxy creating web
    // workers through the main thread
    initBackend(worker);
    rpc = new RPC({
        event: new RPCMessageEvent({
            currentEndpoint: worker,
            targetEndpoint: worker,
        }),
    });
}

4. patch change

npx patch-package open-im-sdk-wasm

5. add web worker loader

npm i worker-loader worker-plugin -D

6. update webpack config

const WorkerPlugin = require("worker-plugin");

...
plugins: [new WorkerPlugin()]
...

7. import and use

import { getSDK } from 'open-im-sdk-wasm';

const IMSDK = getSDK();