无法从浏览器控制台访问任何对象或功能，但一切都按预期进行？

Question

我正在使用带有一堆静态成员的“类”来使我的非常专业的代码在一定程度上组织起来。像这样：

index.html

<script type="module" src="client/js/main.js"></script>

main.js

import { UINav, UIDimension } from "./interface.js";
import { Dimension } from "./dimension.js";
import { InputFlex } from "./input.js";
function main() {
    Dimension.init();
    UIDimension.init();
    UINav.init();
    InputFlex.start();
}

我的问题：例如，当我想从浏览器控制台内部检查内容时，为什么我得到 Uncaught ReferenceError: InputFlex is not defined，但导入的所有方法都按预期执行？如何从浏览器中找到我心爱的“类”？
我也在使用 TypeScript，但我怀疑这是否重要？
编辑：文件是从本地主机服务器获取的。

编辑：在我的环境中似乎存在一个普遍的问题，我什至无法在浏览器控制台中找到 main() 函数。 我是运行 deno 服务器。这可能是我这个有趣问题的根源吗？
我能够从 js 文件中记录内容，但不能从浏览器控制台中记录内容，我被告知一切都未定义，但显然这些实体存在于某处，因为一切都按预期工作。

编辑：@iamimran input.js 就是这样：

export class InputFlex {
    static myMember123 = {...};
    static start() {...}
    (...)
}

Answer 1

模块有自己的作用域。在其中声明的变量不是全局的。

这是好事：全局变量会导致冲突，使维护和调试更加困难。

如果您想从开发人员工具控制台访问它们，那么您需要将控制台移动到模块的范围内，例如通过在那里设置断点。

Answer 2

您的 import 显示您正在使用 ECMAScript modules。

使用模块背后的一个主要动机是不污染全局名称 space，这意味着模块中定义的任何变量都是该模块私有的，而不是全局的。这叫做封装.

如果您希望模块中的任何内容成为全局变量，您需要明确地将其“发布”到全局对象上：

import { UINav, UIDimension } from "./interface.js";
import { Dimension } from "./dimension.js";
import { InputFlex } from "./input.js";

// to "publish":
Object.assign(globalThis, { UINav, UIDimension, Dimension, InputFlex });
// ...

请记住，这有潜在的危险，因为上面对 Object.assign 的调用会有效地覆盖任何可能已经存在的全局变量（您要使用全局名称 space 的众多原因之一尽可能少，最好一点也不).

如果您的唯一目的是“测试”控制台中的东西，这暂时没问题 (!)。如果您是出于调试目的而这样做，最好直接使用浏览器的开发人员工具调试器。

无法从浏览器控制台访问任何对象或功能，但一切都按预期进行？

Unable to access any objects or functions from within the browser console, yet everything works as intended?

javascript

javascript-objects