时间戳

首页 > 解决方案 > Typescript：如何从浏览器控制台访问功能

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

问题描述

语境

中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

标签： javascripttypescriptwebpack

解决方案

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

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

(window as any).foo = foo;

然后它应该在window对象上可用（这意味着您可以访问它，window.foo()或者仅仅foo()因为该window对象是全局对象。

默认情况下，变量和方法对于foo它们所在的模块（即文件）是私有的。您可以像这样导出它们：

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

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

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

但是浏览器本身并不理解这一点import和export语法（*），所以它们仍然不是全局的。它是 webpack 理解语法并将它们拼接成浏览器可以使用的形式（在你的“dist/bundle.js”文件中）。查看该文件，您将看到 webpack 插入的引导代码。

(*) 编辑：浏览器开始支持模块：

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

推荐阅读