从VUE的构建/WebPack阶段排除工作代码

Question

我正试着为一个客户做一个录音应用程序。其中的两个要求是，它需要使用VUE运行并以无损格式记录，所以我将使用FLAC方法。我在Github上找到了一个Speech to-FLAC库，并试图将其移植到Vue中，但在任何时候都要引用工作代码时，我都无法编译Vue。

一种方法是尝试导入它，这与我使用import功能的WAV编码器的工作示例相同：

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))
}

（不是我的代码，我只是知道它适用于WAV编码器。）

如果我尝试使用FLAC编码器，我会得到这样的消息：

未找到此依赖项：

*./src/recording/flac-encoder.js中的fs

要安装它，可以运行：npm install--save fs

运行安装脚本然后重新生成会导致相同的错误。我的猜测是，Vue的WebPack模块试图解决FLAC库代码的依赖关系，但该代码应该在WebWorker的上下文中运行，因此很有可能会包含通常浏览器上下文无法理解的依赖关系。

为了完整起见,我还尝试将worker代码作为URL而不是blob提供给worker：

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

这样做，我得到一个404错误时，试图创建工作者。无论flac-encoder.js与执行该代码的记录器实用程序脚本在同一个目录中，还是在整个项目的根目录中，或者在两者之间的任何位置，都将发生这种情况。

有没有一种方法可以让VUE/WebPack在依赖项遍历中忽略这些文件，但仍然包含它们？

Answer 1

如果您已使用vue-webpack-boilerplate初始化项目（即通过Vue CLI$Vue init webpack my-project)，则应该在项目的根目录处有一个static文件夹。

这是您应该将flac-encoder.js文件放在的位置，并在Worker初始化中引用它：

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

如果该工作者依赖于其他文件（即使用importscripts)，请将这些文件也放在static文件夹中。

CodeSandBox示例:https://codeSandBox.io/S/O5QWL43K7Y

（但请注意，CodeSandbox配置似乎将静态文件直接放在构建的根目录中，而不是放在static目标文件夹中）。