vs code webview扩展开发中如何导入npm包？

Question

我想使用 npm 包（latextoMathML），但是当我在我的 web 视图上使用它时，它在运行扩展时出现错误：未定义的引用被捕获：包名称（latextoXML）未定义。 我已经尝试通过 let / var / const 使用 require 方法。 我想在 webview 函数下的 js 代码中使用。

Answer 1

你不能以通常的方式将npm包导入webview，例如这样：

var somelibrary = require('somelibrary')

相反，您可以将包加载为本地资源。

查看 Webview API documentation 和 example code 了解详细说明

为此，请遵循以下最少步骤：

• 创建新面板时，启用脚本

const panel = vscode.window.createWebviewPanel(
            'viewType',
            'view name',
            vscode.ViewColumn.One,
            {
                // Enable javascript in the webview
                enableScripts: true
            }
        );

• 将 npm 包路径包装在一个特殊的 vscode uri 中。这个 uri 实际上会包含这个字符串：“vscode-resource://file///path-to-extension/node_modules/somelibrary/somelibrary.js”

const libraryPath = vscode.Uri.file(
    path.join(extensionPath, 'node_modules', 'somelibrary', 'somelibrary.js')
);

const scriptUri = webview.asWebviewUri(libraryPath);

• 创建html面板结构时传递路径

return '
...
<script src='$(scriptUri)'></script>
...
';