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

【问题标题】：Access items inside Webpack bundle in browser console在浏览器控制台中访问 Webpack 包中的项目
【发布时间】：2020-04-14 11:31:31
【问题描述】：

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

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

我想访问/调用

SomeStaticClass.doSomething()

从浏览器中的控制台（比如 Google Chrome 检查器工具）。

【问题讨论】：

标签： javascript typescript static console.log web-inspector

【解决方案1】：

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

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

灵感来自workwise's answer

【讨论】：

正确的语法和拼写是 SO 帖子的要求。请edit 避免投反对票甚至删除。此外，高质量的帖子通常会嵌入对解决方案的关键位如何/为什么解决 OP 问题的解释。随着未来的访问者学习一些他们可以应用于他们自己的编码问题的东西，随着时间的推移，大多数赞成票都会累积起来。 “please/help/thanks/etc”应该从帖子中省略。 StackOverflow.com/help 上的 SO 指南。不用担心，这只是一个板载通知，可帮助您快速了解该平台的独特方面。期待您的贡献。
链接回您正在引用的指定帖子更有用。在每个答案下方和每个问题下方，都有一个“分享”链接。点击它可以快速获得帖子的直接链接。
最后，如果您还没有，我鼓励您投票赞成您认为有用的任何答案（例如，您在上面引用的 workwise 的答案）。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

你可以通过

调用静态方法

console.log(SomeStaticClass.doSomething())

我设法使它工作参考this url

【讨论】：

你成功了吗？ Webpack 不应该是这种情况，因为它不会将打包的项目添加到全局范围内。
@Sachintha Nayanajith：这不起作用。只有全局实例是可访问的，并且显然静态类（或此类）不是其中的一部分。
@Sachintha Nayanajith 感谢您的链接。我能够正确访问代码中的静态类。例如，这将执行一次 console.log。但是，我希望能够从“浏览器检查器工具”（例如：chrome 中的 ctrl+shift+i）动态调试/调用静态类方法以进行调试。
@SachinthaNayanajith 这将在直接使用 TypeScript 时起作用，因为它会发出将定义的项目添加到范围的脚本。但是对于 Webpack，一切都只能在其自己的范围内访问，而不是在全局范围内，因此 Playground 是不相关的。
在控制台中输入时，您会丢失所有类型检查，因此以这种方式调试 Typescript 应用程序不是一个好主意...