visual-studio-code - 如何将函数连接到 VS Code Webview？

Question

我有一个函数可以获取和解析项目目录文件中的一些数据，然后使用 activeTerminal.sendText() 将命令发送到 CLI。在 webview 上，我想要一个“安装”按钮，它将“npm install somePlugin”发送到 CLI。

但是，获取和解析的功能是在 js 文件中定义的，并且 'webview.html' 将无法访问该功能，因为 webviews 是孤立的环境。

我的第一个问题是如何让 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}
    `;

标签： visual-studio-codewebviewvscode-extensions