在浏览器控制台中访问 Webpack 包内的项目

Question

我正在将 Typescript 与 Webpack 结合使用（使用源映射进行调试构建）。我可以正常访问源选项卡中的静态 class 文件。但是，class 名称本身在全局范围内未定义。

class SomeStaticClass {
  public static doSomething() {
     console.log("I just did something!");
  }
}

我想访问/打电话

SomeStaticClass.doSomething()

从浏览器的控制台（比如 Google Chrome Inspector Tools）。

Answer 1

可以通过

调用静态方法

console.log(SomeStaticClass.doSomething())

我设法让它工作参考 this url

Answer 2

我设法解决了如下问题。在主 exports.tsx 中（假设这是顶级导出）：

import { StaticClassToBeExposed } from '...SomeFile';

if(type of window !== undefined) {
   window.StaticClassToBeExposed = StaticClassToBeExposed;
}

Answer 3

假设你想获取所有文件，你可以这样做：

window.SomeStaticClass = require('./path-to-file-with-class').default;

灵感来自

在浏览器控制台中访问 Webpack 包内的项目

Access items inside Webpack bundle in browser console

javascript

typescript

static

console.log

web-inspector