Question

我想使用npm软件包（latextoMathML），但是当我在Webview上使用它时，运行扩展时出现错误：未定义引用：软件包名称（latextoXML）未定义。我已经尝试通过let / var / const与require方法。我想在Webview功能下的js代码中使用。

Answer 1

您不能以通常的方式将npm包导入到webview中，例如：

var somelibrary = require('somelibrary')

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

有关详细说明，请参见网络视图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>
...
';

如何在vs代码Webview扩展开发中导入npm软件包？

1 个答案: