Блог

Главная - Вопросы по программированию - Проблема с созданием вложенных файлов модуля .js

Проблема с созданием вложенных файлов модуля .js

#javascript #typescript #import #module #referenceerror

#javascript #машинописный текст #импорт #модуль #ошибка ссылки

Вопрос:

Кажется, я хожу по кругу, пытаясь заставить работать простые вложенные файлы .js. Я начинаю с этих 2 файлов, и все работает так, как ожидалось:

index.html

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="module" src="./scripts/file1.js"></script>
    <title>Hello World Page</title>
</head>
<body >
    <div>
        Some prompt: <input id="Xxx" onkeyup="file1Go('index.html calling file1Go()')"/><br />
    </div>
</body>
</html>

file1.js

 function file1Go(msg) {
    alert('In file1.js - '   msg);
}

Затем я создаю новый file2.js и изменяю file1.js его, чтобы импортировать. Я также изменяю его, чтобы экспортировать используемую функцию. Затем я также изменяю index.html тег скрипта файла, чтобы сообщить ему, что file1.js теперь это такой модуль (чтобы избежать ошибки «Невозможно использовать импорт вне модуля«).:

     <script type="module" src="./scripts/file1.js"></script>

Модифицированный file1.js

 import { file2Go } from "./file2.js"
export function file1Go(msg) {
    alert('In file1.js - '   msg);
    file2Go(msg);
}

Новый file2.js

  export function file2Go(msg) {
    alert('In file2.js - '   msg);
}

Это приводит к загрузке HTML-страницы и загрузке обоих файлов .js без ошибок, но во время выполнения не удается найти экспортированную функцию в file1.js:

 (index):11 Uncaught ReferenceError: file1Go is not defined at HTMLInputElement.onkeyup ((index):11)

Вот и все. Какую глупость я делаю неправильно или что я упускаю?
И заранее благодарю за то, что нашли время.

Запоздалая мысль: поместить похожие файлы .js в папку и выполнить с node.js похоже, это работает.

Подробная информация:

Я обнаружил, что следующий <script> тег импортирует и выполняет функцию. Я также могу установить там обработчики HTML-событий. Просто функции, по-видимому, не видны за пределами области действия <script> тега, который моему маленькому мозгу кажется чрезмерно ограничительным и бесполезным.

     <script type="module">
        import { file1Go } from "./scripts/file1.js";
        file1Go("logging on start in <head> tag...");  // works
        document.getElementById('Xxx').onkeyup = file1Go;  // also works
    </script>

Примечание: Моя конечная цель здесь — использовать TypeScript то, что будет содержать много файлов. Я удалил TypeScript из своего репро для простоты и для устранения основной причины моей проблемы. Как только я пойму проблему с областью видимости, я перейду к TypeScript .