webview - 如何修复 : "exports is not defined" & "require is not defined" error when importing package from vscode webview extension

Question

我正在开发一个基于 CatCoding example 的 vscode webview 扩展。 .

我正在尝试使用标签从 cdn 导入外部 node_module 。包已加载，我可以使用它，但在某些导入的函数中存在模块导出，我收到以下错误:Uncaught ReferenceError: exports is not defined
我发现有人通过使用以下“hack”解决了它:<script>var exports = {};</script>
所以我试了一下，现在我得到了关于'require'的同样错误:Uncaught ReferenceError: require is not defined
我只是想进行简单的包导入，不知道为什么会发生，可能是因为它作为 webview 运行，可能是因为 Electron ？

知道如何解决吗？

Answer 1

您正在加载的 JavaScript 包正在使用模块系统，可能是 commonJS。 webview 只是一个普通的网页，所以你需要自带模块支持。

为此，您可以使用捆绑器，例如 webpack或包含一个模块加载器，例如 RequireJs直接地。