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

Question

我正在尝试为客户制作一个录音机应用程序。其中两个要求是它需要运行使用 VUE 并以无损格式录制，所以我选择 FLAC 方法。我在 Github 上发现了一个 speech-to-flac library 并试图将其移植到 Vue，但是在任何时候引用 worker 代码时我都遇到了让 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 编码器尝试此操作，我会收到以下消息：

This dependency was not found:

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

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

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

为了完整起见，我还尝试将工作代码作为 URL 而不是 Blob 提供给工作人员：

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

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

有没有一种方法可以告诉 Vue/WebPack 在依赖遍历时忽略这些文件，但仍然包括它们？

Answer 1

如果您使用了项目根目录下的 vue-webpack-boilerplate to initialize your project (i.e. through Vue CLI $ vue init webpack my-project), you should have a static 文件夹。

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

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

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

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

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

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

Excluding worker code from Vue's build/webpack phase

javascript

web-worker

webpack

vue.js