Question

我正在尝试为客户组装一个录音机应用程序。其中两个要求是它需要使用VUE运行并以无损格式记录，因此我将采用FLAC方法。我在Github上找到了speech-to-flac library，并试图将其移植到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的上下文中运行，因此很有可能会包含通常的浏览器上下文所不具有的依赖性。不会理解的。

出于完整性考虑，我还尝试将工作程序代码作为URL而不是Blob提供给工作程序：

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

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

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

Answer 1

如果您使用vue-webpack-boilerplate初始化项目（即通过Vue CLI inline_label_html: {class: "inline_label_class"}），则应该在项目的根目录下有一个static文件夹。

这是您应放置$ vue init webpack my-project文件并在Worker初始化中引用的地方：

flac-encoder.js

如果该工作程序依赖于其他文件（即使用importScripts），请将这些文件也放在new Worker('./static/flac-encoder.js');文件夹中。

在CodeSandbox上的示例：https://codesandbox.io/s/o5qwl43k7y

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

从Vue的build / webpack阶段中排除工作程序代码

1 个答案: