"Uncaught ReferenceError: ... не определено" при вызове класса (определенного в модуле) из консоли браузера, JS

У меня есть файл class.js

            //implementation details
            const _stackCollection = new WeakMap();


            //interface
            export class Stack {

                constructor() {
                    _stackCollection.set(this, []);
                }

                get count() {
                    return _stackCollection.get(this).length;
                }

                pop() {
                    if (this.count === 0)
                        throw new Error('Nothing to pop');

                    return _stackCollection.get(this).pop();
                }

                peek() {
                    if (this.count === 0)
                        throw new Error('Nothing to peek');

                    return _stackCollection.get(this)[this.count - 1];
                }

                push(e) {
                    _stackCollection.get(this).push(e);
                    return;
                }

            }

и модуль, который импортирует данный класс, выглядит следующим образом: module.js:

   import {Stack} from './class.js';

Index.html выглядит так:

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>

    <body>

        <h1>hello world</h1>


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


    </body>
    </html>

Когда я пытаюсь инициализировать экземпляр стека в консоли, я получаю следующую ошибку. Есть много вопросов относительно данной ошибки, но я не вижу ничего, что помогло бы мне:

    const stack=new Stack()

    Uncaught ReferenceError: Stack is not defined
    at <anonymous>:1:13
Источник

2 ответа

Решение

Объявления в модуле относятся к этому модулю. Если вы хотите получить к ним доступ, вам нужно импортировать их.

Чтобы использовать такой экспорт в консоли браузера, вам необходимо импортировать его или связать с глобальной переменной.

global (обратите внимание, что это противоречит назначению модулей и должно использоваться только для специального тестирования)

export class A {}

// TODO: remove this
window.A = A;

С предложенным динамическим синтаксисом импорта:

// browser console:
  import('./a.js').then(console.log);

С SystemJS

// browser console:
SystemJS.import('./a.js').then(console.log);
Источник

Спасибо всем за ваши комментарии. Как упомянул @AluanHaddad в комментарии, я не могу инициализировать класс объекта из консоли, как я пытался:

   const stack=new Stack()

Вместо этого я могу инициализировать его в module.js, а затем ссылаться на него в объекте окна, как в ответе Aluan. Я переписал module.js таким образом:

 import {Stack} from './class.js';

 const c = new Stack();
 c.push('a');

 window.c = c;

и тогда я могу получить доступ к объекту с из консоли

    >c
    >Stack {}
Источник
Другие вопросы по тегам