Question

我有一个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>

当我尝试在控制台中初始化Stack实例时，出现以下错误。关于给定的错误有很多问题，但是我看不到有什么对我有帮助的：

    const stack=new Stack()

    Uncaught ReferenceError: Stack is not defined
    at <anonymous>:1:13

Answer 1

模块中的声明仅限于该模块。如果要访问它们，则需要导入它们。

要在浏览器控制台中使用此类导出，您需要将其导入或绑定到全局变量。

全局（请注意，这违背了模块的目的，只能用于临时测试）

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);

Answer 2

谢谢大家的评论。正如@AluanHaddad在评论中提到的那样，我无法通过控制台初始化对象类：

   const stack=new Stack()

相反，我可以在module.js中初始化它，然后像在Aluan答案中那样在window对象中对其进行引用。我这样重写了module.js：

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

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

 window.c = c;

然后我可以从控制台访问对象c

    >c
    >Stack {}

从浏览器控制台JS调用类（在模块中定义）时，出现'Uncaught ReferenceError：...未定义'

2 个答案: