В браузере JS-код, который импортируется из модуля ES6, не выполняется

Question

У меня есть модуль ES6 (mymodule) и HTML-страница с JS-кодом, который должен выполняться, когда пользователь открывает страницу. Это мой модуль:

//mymodule.js
class TestClass {

    getString() {
        return "TestString";
    }
}
export {TestClass}

И это моя страница:

//page.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Page</title>
        <script src="./mymodule.js" type="module"></script>
    </head>
    <body>
        <h1>Hello World!</h1>
        <script type="module">
            import {TestClass} from "./mymodule";
            let test = new TestClass();                 
            console.log("OUTPUT: " + test.getString());
        </script>
    </body>
</html>

Page.html и mymodule.js находятся в одной папке, однако, когда я открываю page.html в браузере, у меня ничего не отображается на консоли (нет ошибок, нет вывода) - я использую FF 62.0.3. Как это исправить?

javascript html

0

Pavel_K 23 Окт 2018 в 15:06

Answer 1

   <script src="./mymodule.js" type="module"></script>

Вышеуказанное не нужно. Вы можете удалить это.

import {TestClass} from "./mymodule";

Браузеры не разрешают расширения файлов, как это делает Node.js. (Они не могут, потому что они имеют дело с URL-адресами, а не с файловыми системами, поэтому нет способа получить список файлов в каталоге).

Вам необходимо явно указать URL:

import {TestClass} from "./mymodule.js";

NB: Вам также необходимо загрузить page.html через HTTP, а не из локальной файловой системы.

3

Quentin 23 Окт 2018 в 12:34

Answer 2

Вы можете экспортировать свой класс в ключевое слово по умолчанию.

class TestClass {
    getString() {
        return "TestString";
    }
}
export default {TestClass}

0

André Teixeira 23 Окт 2018 в 12:45

В браузере JS-код, который импортируется из модуля ES6, не выполняется

2 ответа

Похожие вопросы

Новые вопросы

javascript