Управление статической ссылкой в ​​js-библиотеках внутри django

Question

Поэтому я пытался добавить функцию аудиозаписи на свой веб-сайт, разработанный с django .

Я хотел сделать что-то похожее на https://github.com/addpipe/simple-web-audio-recorder-demo, поэтому я начал с попытки запустить его без изменений.

Я взял тот же html, что и в git, связанном выше, поместил папку js/ в мою папку static/ и просто изменил следующие строки (index.html, строка 32-33)

<script src="js/WebAudioRecorder.min.js"></script>
<script src="js/app.js"></script>

для

{% load static %}
<script src={% static "js/WebAudioRecorder.min.js" %}></script>
<script src={% static "js/app.js" %}></script>

Эти js-файлы загружаются правильно, но проблема в том, что, когда я нажимаю "запись" на моем веб-сайте, я получаю ошибку "GET /myapp/record/js/WebAudioRecorderWav.min.js HTTP/1.1" 404 на моем сервере django.

WebAudioRecorderWav.min.js вызывается в WebAudioRecorder.min.js. Я пытался использовать трюк {% load static %} в файле js, но он не работает.

Как правильно обойти это?

Заранее спасибо.

Answer 1

Вы должны использовать настройку workerDir, чтобы установить правильный путь к другим импортированным js-файлам. Возможно, ваш рекордер инициализирован в app.js , где вы не можете использовать теги шаблонов, такие как {% static %}. Лучший способ - создать глобальную переменную в шаблоне перед загрузкой app.js :

В вашем HTML шаблоне:

<script>var jsFilesPath = "{% static 'js/' %}"</script>
<script src="{% static 'js/app.js' %}"></script>

В вашем app.js:

if (typeof jsFilesPath !== "undefined") {
    audioRecorder = new WebAudioRecorder(sourceNode, {
      workerDir: jsFilesPath     // must end with slash
    });
}