Search code examples
javascriptwebpackvue.jsweb-worker

Excluding worker code from Vue's build/webpack phase

I'm trying to put together a voice recorder app for a client. Two of the requirements is that it needs to run using VUE and record in a lossless format, so I'm going for the FLAC approach. I found a speech-to-flac library on Github and am trying to port it to Vue, but I am getting an issue with getting Vue to compile while the worker code is referenced at any point.

One approach is trying to import it the same was as a working example of a WAV encoder I had using the import functionality:

import EncoderWav from './encoder-wav-worker.js'

...

createWorker (fn) {
    var js = fn
        .toString()
        .replace(/^function\s*\(\)\s*{/, '')
        .replace(/}$/, '')
    var blob = new Blob([js])
    return new Worker(URL.createObjectURL(blob))
}

(Not my code, I just know that it works for the WAV encoder.)

If I try this with the FLAC encoder, I get this message:

This dependency was not found:

* fs in ./src/Recording/flac-encoder.js

To install it, you can run: npm install --save fs

Running the install script and then rebuilding results in the same error. My guess is that Vue's WebPack module is trying to resolve the dependency of the FLAC library's code, but that code is supposed to run within the context of a WebWorker, so there's a good chance that it's going to include dependencies that the usual browser context isn't going to understand.

For completeness's sake, I also tried supplying the worker code to the worker as a URL rather than a Blob:

createWorker (fn) {
    return new Worker('./flac-encoder.js');
}

Doing it this way, I get a 404 error when trying to create the worker. This happens whether flac-encoder.js is in the same directory as the recorder utility script executing that code, in the root directory of the entire project, or anywhere in between.

Is there a way that I can tell Vue/WebPack to ignore these files for the dependency walk but still include them?

Solution

  • If you have used the vue-webpack-boilerplate to initialize your project (i.e. through Vue CLI $ vue init webpack my-project), you should have a static folder at the root of your project.

    This is where you should put your flac-encoder.js file and reference it in your Worker initialization:

    new Worker('./static/flac-encoder.js');

    If that worker depends on other files (i.e. uses importScripts), put those files also in the static folder.

    Example on CodeSandbox: https://codesandbox.io/s/o5qwl43k7y

    (but note that CodeSandbox configuration seems to put the static files directly on the built root instead of inside a static target folder).