Javascript Typescript：如何从浏览器控制台访问函数 上下文

在

ts/app.ts

中，有：

function foo() {
    console.log('Hello Word');
}

它使用Webpack成功编译成

bundle.js

，并加载了：

<script src="dist/bundle.js"></script>

---

由于您拥有它，您无法全局访问它。但如果你愿意，你可以做

function foo() {
    console.log('Hello Word');
}

(window as any).foo = foo;

然后它应该在

窗口

对象上可用（这意味着您可以通过

window.foo（）

或仅

foo（）

访问它，因为

窗口

对象是全局对象

默认情况下，变量和方法（如

foo

）对它们所在的模块（即文件）是私有的。您可以这样导出它们：

export function foo() {
    console.log('Hello Word');
}

这意味着您可以从其他模块导入它们，即

import {foo} from "foo";
foo();

但是，浏览器本身不理解

导入

和

导出

语法（*），因此它们仍然不是全局语法。是网页包理解该语法并将它们缝合到浏览器可以使用的表单中（在“dist/bundle.js”文件中）。查看该文件，您将看到webpack插入的引导代码

（*）编辑：：

---

本质上，没有什么是全球性的，但这是一件好事，否则它们可能会相互冲突。也就是说，它不会是模块化的。

谢谢，你能解释一下为什么它不能在全球范围内提供吗？我补充了很多细节，但我认为简短的回答是“它不应该是全球性的”：-）我认为较新的浏览器现在支持模块加载。还有，那是什么

（任何窗口都是
）？这是有效的JS吗？@weltschmerz，不，这不是有效的JS。它是有效的TypeScript，它知道
窗口
上有哪些方法和属性，并在编译时将对象设置为
foo
。当TypeScript向下传输到JS时，它将只是
window.foo=foo因为JS没有静态类型信息。我还没听说过浏览器支持模块加载。嗯，你说得对：
import {foo} from "foo";
foo();