javascript - Typescript:如何从浏览器控制台访问功能

Question

语境
在 ts/app.ts ， 有:

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

使用 Webpack 成功编译成 bundle.js并装有:

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

问题
如何执行foo从我的浏览器控制台？

> foo()
Uncaught ReferenceError: foo is not defined

Answer 1

正如您所拥有的，您无法在全局范围内访问它。但如果你愿意，你可以做

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

(window as any).foo = foo;

那么它应该可以在 window 上找到。对象(这意味着您可以作为 window.foo() 或只是 foo() 访问它，因为 window 对象是全局对象。
变量和方法，如 foo默认情况下它们所在的模块(即文件)是私有(private)的。您可以像这样导出它们:

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

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

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

但是浏览器本身并不理解 import和 export语法 (*) 所以它们仍然不是全局的。是 webpack 理解语法并将它们拼接成浏览器可以使用的形式(在你的“dist/bundle.js”文件中)。查看该文件，您将看到 webpack 插入的引导代码。
(*) 编辑:Browsers are starting to support modules :
本质上，没有什么是全局性的，但这是一件好事，因为否则它们可能会相互冲突。即它不会是模块化的。