获取“未捕获的 ReferenceError：x 未定义”如何从另一个脚本中引用来自 typescript 捆绑 js 文件的数据？答案

【问题标题】：Getting "Uncaught ReferenceError: x is not defined" How to reference data from a typescript bundled js file from another script?获取“未捕获的 ReferenceError：x 未定义”如何从另一个脚本中引用来自 typescript 捆绑 js 文件的数据？
【发布时间】：2022-01-28 04:17:45
【问题描述】：

我正在为 typescript 做一些测试设置。我的主要重点是将所有.ts 模块捆绑到一个.js 文件中，该文件可以在简单的index.html 中被客户端引用。这是我的测试模块：

// index.ts
import { Example } from './example'

class x {
  example(): void {
    console.log(Example)
  }
}

let test = new x()
test.example()

// example.ts
export const Example : string = 'Example Message'

我使用 Webpack 5 和 ts-loader 将所有内容编译成 bundle.js 文件。然后，我创建了一个.html 文件来测试创建的类。 test.example() 在index.ts（然后是bundle.js）内正确执行，但第二个在<script/> 内报告Uncaught ReferenceError: x is not defined。

<!-- index.html -->
<html>
  <script src="../dist/js/bundle.js"></script>
  <script>
    // Uncaught ReferenceError: x is not defined
    let test = new x()
    test.example()
  </script>
</html>

如何从第二个<script/> 引用我的班级 x？

【问题讨论】：

你使用的是哪个模块加载器？
我使用的唯一模块是 example.ts

标签： javascript html node.js typescript webpack

【解决方案1】：

如何从第二个<script/> 引用我的类 x？

你不能。至少在不修改源代码结构的情况下是这样。

捆绑器将所有可执行代码放入捆绑包中。这包括您的依赖项和您的应用程序代码。所有这些都只是真正设计用于通过 import 和 export 关键字在该捆绑包中工作。

捆绑器以不污染全局范围的方式管理这些导入/导出。但这确实要求您保持在该捆绑包中。

但是，您似乎希望您的包在该全局范围内提供一些值。为此，您必须明确说明。

class x {
  example(): void {
    console.log(Example)
  }
}

// Add `x` to the browser's global scope.
window.x = x

现在从其他一些<script> 标签new x() 应该可以正常工作。

【讨论】：

感谢您的回答！我现在了解捆绑脚本的预期用途。