Исключение рабочего кода из фазы сборки / веб-пакета Vue - PullRequest
Новая
       7

Исключение рабочего кода из фазы сборки / веб-пакета Vue

0 голосов
/ 03 июля 2018

Я пытаюсь собрать приложение для записи голоса для клиента. Два требования состоят в том, что он должен работать с использованием VUE и записывать в формате без потерь, поэтому я использую подход FLAC. Я обнаружил библиотеку речи в flac на Github и пытаюсь перенести ее на Vue, но у меня возникает проблема с компиляцией Vue, когда на рабочий код ссылаются в любой момент.

Один из подходов заключается в попытке импортировать его так же, как в рабочем примере кодера WAV, который я использовал, используя функциональность import: 

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, я получу это сообщение:

Эта зависимость не найдена:

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

Чтобы установить его, вы можете запустить: npm install --save fs

Запуск сценария установки и повторная сборка приводит к той же ошибке. Я предполагаю, что модуль Vue WebPack пытается разрешить зависимость кода библиотеки FLAC, но этот код должен выполняться в контексте WebWorker, так что есть хороший шанс, что он будет включать зависимости, которые не имеют обычный контекст браузера. не пойму.

Для полноты картины я также попытался предоставить рабочий код работнику как URL, а не как BLOB-объект: 

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

Делая это таким образом, я получаю ошибку 404 при попытке создать работника. Это происходит независимо от того, находится ли flac-encoder.js в том же каталоге, что и служебный скрипт устройства записи, выполняющий этот код, в корневом каталоге всего проекта или где-то между ними.

Есть ли способ, с помощью которого я могу сказать Vue / WebPack игнорировать эти файлы для обхода зависимостей, но по-прежнему включать их?

1 Ответ

0 голосов
/ 03 июля 2018

Если вы использовали 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).

...