Блог

Главная - Вопросы по программированию - Как импортировать файлы javascript в html с помощью Flask

Как импортировать файлы javascript в html с помощью Flask

#javascript #python #html #flask #three.js

Вопрос:

У меня есть Html-страница с частью javascript, в которую я включаю некоторые другие файлы .js :

 <script type="module">

            import * as THREE from "../build/three.module.js";

            import { OrbitControls } from './jsm/controls/OrbitControls.js';
            import { STLExporter } from './jsm/exporters/STLExporter.js';
            import { STLLoader } from './jsm/loaders/STLLoader.js';
            import { GUI } from './jsm/libs/dat.gui.module.js';
            
            ...

Он отображает то, что я хочу, когда я открываю свою html-страницу в браузере.

Проблема возникает, когда я хочу запустить эту html-страницу на своем локальном сервере с помощью Flask.
Это не работает, если я не изменяю импорт : он не находит файлы, поэтому я попытался создать статический репозиторий, в который я помещаю репозиторий jsm и использую url_for() следующим образом :

 <script type="module">

            import * as THREE from "../build/three.module.js";
            import { OrbitControls } from "{{ url_for('static',filename='jsm/controls/OrbitControls.js') }}";
            import { STLExporter } from "{{ url_for('static',filename='jsm/exporters/STLExporter.js') }}";
            import { STLLoader } from "{{ url_for('static',filename='jsm/loaders/STLLoader.js') }}";
            import { GUI } from "{{ url_for('static',filename='jsm/libs/dat.gui.module.js') }}";

Похоже, это работает для статических файлов : он находит статические файлы
Тем не менее, это не работает для three.module.js файл, который находится в репозитории сборки.
Я даже пытался поместить его в статический репозиторий или использовать url_for() для этого импорта…
Но все, что я пытался, похоже, не работает.

Может ли у кого-нибудь быть идея о том, как я могу импортировать этот модуль, полезный для threejs ?

Большое спасибо

Ответ №1:

Переместите three.module.js в папке static/jsm и импортируйте ее следующим образом:

 <script type="text/javascript" src="{{ url_for('static',filename='js/three.module.js') }}"></script>

Комментарии:

1. Да, папка сборки находится на том же уровне, что и статическая папка. Но проблема, похоже, не в пути, так как я попытался представить весь путь так D:/…/build/three.module. js и это не работает так хорошо.

2. Попробуйте переместить его в статический каталог и импортировать следующим образом: <script type="module" src="{{ url_for('static',filename='jsm/three.module.js') }}"></script>

3. или если браузер вернет ошибку: Не удалось загрузить сценарий модуля: Ожидался сценарий модуля JavaScript, но сервер ответил типом MIME «текст/обычный» , попробуйте с: <script type="text/javascript" src="{{ url_for('static',filename='js/three.module.js') }}"></script>

4. Я импортировал, как вы предлагали : <script type="module" src="{{ url_for('static',filename='three.module.js') }}"></script> и он возвращает мне это : 127.0.0.1 - - [28/May/2021 13:03:20] "GET /static/three.module.js HTTP/1.1" 200 - поверх ответа, но он также отображает это : 127.0.0.1 - - [28/May/2021 13:03:21] "GET /build/three.module.js HTTP/1.1" 404 - но другого импорта нет

5. Вы уверены, что других импортных товаров нет? Потому что я попробовал это с помощью: <script type="text/javascript" src="{{ url_for('static',filename='js/three.module.js') }}"></script> и, похоже, он импортирует его правильно. Вы также можете попытаться очистить кэш вашего браузера.

Метки: