Visual studio code 如何将函数连接到VS代码Webview？

我有一个函数，可以通过项目目录文件中的一些数据进行提取和解析，并使用activeTerminal.sendText（）将命令发送到CLI。在webview上，我希望有一个“安装”按钮，它将“npm install somePlugin”发送到CLI

但是，获取和分析的功能是在js文件中定义的，并且“webview.html”将无法访问该函数，因为webview是独立的环境

我的第一个问题是如何使webview能够访问该功能？我曾尝试在“webview.html”中添加一个脚本标记（带有enableScript），并使用模板文本定义功能，但它不起作用

即使解决了这个问题，该功能也涉及使用activeTerminal.sendText（）将命令发送到“webview.html”中的终端，我认为webview不会解释这些命令

如何解决这些问题？当前，单击webview上的“安装”按钮时不会执行任何操作

The code is below:
import * as vscode from 'vscode';
import PluginData from '../models/NpmData';
import { PluginPkg } from '../utils/Interfaces';
import Utilities from './Utilities';

export default class WebViews {
  static async openWebView(npmPackage: PluginPkg) {
    const { links, name, version, description } = npmPackage;
    const readMe = await PluginData.mdToHtml(links.repository, links.homepage);

    // turn npm package name from snake-case to standard capitalized title
    const title = name
      .replace(/-/g, ' ')
      .replace(/^\w?|\s\w?/g, (match: string) => match.toUpperCase());

    // createWebviewPanel takes in the type of the webview panel & Title of the panel & showOptions
    const panel = vscode.window.createWebviewPanel(
      'plugin',
      `Gatsby Plugin: ${title}`,
      vscode.ViewColumn.One,
      {
        enableScripts: true
      }
    );

    // create a header for each npm package and display README underneath header
    // currently #install-btn does not work
    // const gatsbycli = new GatsbyCli();
    let installCmnd;

    async function installPlugin(npmName: string, npmLinks: any): Promise<void> {
      const activeTerminal = Utilities.getActiveTerminal();
      const rootPath = Utilities.getRootPath();
      // gets to npmPackage
      // const { name, links } = npmPackage
      // plugin.command.arguments[0];

      if (npmLinks) {
        console.log('npmlinks!');
        installCmnd =
          (await PluginData.getNpmInstall(npmLinks.repository, npmLinks.homepage)) ||
          `npm install ${npmName}`;
  
        if (rootPath) {
          activeTerminal.sendText(`cd && cd ${rootPath}`);
          activeTerminal.sendText(installCmnd);
          activeTerminal.show(true);
        } else {
          activeTerminal.sendText(installCmnd);
          activeTerminal.show(true);
        }
        // check for if "plugin" is a theme or actual plugin
        if (npmName.startsWith('gatsby-theme')) {
          vscode.window.showInformationMessage(
            'Refer to this theme\'s documentation regarding implementation. Simply click on the theme in the "Themes" section.',
            'OK'
          );
        } else {
          vscode.window.showInformationMessage(
            'Refer to this plugin\'s documentation regarding further configuration. Simply click on the plugin in the "Plugins" section.',
            'OK'
          );
        }
      }
    }
    panel.webview.postMessage('hi');
    panel.webview.html = `
    <style>
      .plugin-header {
        position: fixed;
        top: 0;
        background-color: var(--vscode-editor-background);
        width: 100vw;
      }

      #title-btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        align-text: center;
      }

      #install-btn {
        height: 1.5rem;
        margin: 1rem;
      }

      body {
        position: absolute;
        top: 9rem;
      }
    </style>
    <div class="plugin-header">
      <div id="title-btn">
        <h1 id="title">${title}</h1>
        <button id="install-btn" ***onclick="${installPlugin(name, links)}"***>Install</button>
      </div>
      <p>Version: ${version}</p>
      <p>${description}</p>
      
      <hr class="solid">
    </div>

    ${readMe}
    `;

代码如下：
从“vscode”导入*作为vscode；
从“../models/NpmData”导入PluginData；
从“../utils/Interfaces”导入{PluginPkg}；
从“./Utilities”导入实用程序；
导出默认类Web视图{
静态异步openWebView（npmPackage:PluginPkg）{
const{links，name，version，description}=npmPackage；
const readMe=wait PluginData.mdToHtml（links.repository，links.homepage）；
//将npm包名称从snake case改为标准大写标题
const title=名称
.替换（/-/g''）
.replace（/^\w？|\s\w？/g，（match:string）=>match.toUpperCase（））；
//createWebviewPanel采用webview面板的类型以及面板和showOptions的标题
const panel=vscode.window.createWebviewPanel(
“插件”，
`盖茨比插件：${title}`，
vscode.ViewColumn.One，
{
启用脚本：true
}
);
//为每个npm包创建一个标题，并在标题下显示自述
//目前#安装btn不起作用
//const gatsbycli=新gatsbycli（）；
让我们安装CMND；
异步函数installPlugin（npmName:string，npmLinks:any）：承诺{
const activeTerminal=Utilities.getActiveTerminal（）；
const rootPath=Utilities.getRootPath（）；
//进入npmPackage
//常量{name，links}=npmPackage
//plugin.command.arguments[0]；
如果（npmLinks）{
console.log（'npmlinks！'）；
安装CMND=
（等待PluginData.getNpmInstall（npmLinks.repository，npmLinks.homepage））||
`npm安装${npmName}`；
if（根路径）{
sendText（`cd&&cd${rootPath}`）；
activeTerminal.sendText（installCmnd）；
activeTerminal.show（true）；
}否则{
activeTerminal.sendText（installCmnd）；
activeTerminal.show（true）；
}
//检查“插件”是主题还是实际插件
if（npmName.startsWith（'gatsby-theme'））{
vscode.window.showInformationMessage(
'请参阅此主题的有关实现的文档。只需单击“主题”部分中的主题即可。'，
“好的”
);
}否则{
vscode.window.showInformationMessage(
'有关进一步配置，请参阅此插件的文档。只需单击“插件”部分中的插件即可。'，
“好的”
);
}
}
}
panel.webview.postMessage（'hi'）；
panel.webview.html=`
.插件头{
位置：固定；
排名：0；
背景颜色：var（--vscode编辑器背景）；
宽度：100vw；
}
#标题btn{
显示器：flex；
弯曲方向：行；
对齐项目：居中；
对齐文本：居中；
}
#安装btn{
高度：1.5雷姆；
保证金：1rem；
}
身体{
位置：绝对位置；
顶部：9rem；
}
${title}
安装
版本：${Version}

${description}


${readMe}
`;

阅读VSC文档的webview页面，您可以从webview调用扩展函数。这是否回答了您的问题？