Visual studio code 如何在VS代码webview中将参数传递到脚本中

我在VS代码中运行React应用程序，并使用Webpack将捆绑的webview代码生成到一个名为dist/webviews/myWebview.js的文件中

以下是我的webview代码的结构：

我已经定义了一个index.js文件，其中包含根App React组件：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(
  <App />,
  document.getElementById('root')
);

要打开webview，我设置了一个新命令，该命令可从编辑器上下文菜单中获得，并使用vscode.commands.executeCommand打开webview

我在扩展代码中有一些变量myFirstProp=first string和mysecondrop=secondstring，这些变量在创建webview vscode.window.createWebviewPanel时可用

我需要做的是将这两个变量myFirstProp和mysecondrop作为props传递给index.js中的React组件。例如：

ReactDOM.render(
  <App
    myFirstProp="first string"
    mySecondProp="second string"
  />,
  document.getElementById('root')
);

---

我曾尝试在index.js中放置占位符内容，类似于我对index.html所做的操作，例如myFirstProp={{myFirstProp}}，然后在设置webview面板内容时用实际变量值替换占位符。但是，捆绑文件dist/webviews/myWebview.js非常大，对该文件的读/写非常密集。我想避免这种情况。有什么方法可以通过编程实现吗？

非常简单：在为webview创建html内容的同时，将JS代码插入index.html。引入另一个宏名，如{{mainScriptUri}}，例如{{init}}，并在创建HTML时用变量替换它。

您的意思是将{{init}插入index.HTML吗？然后，当我设置HTML webview内容时，添加如下内容：content=content.replace'{{init}}'，const myFirstProp=\first string\；常量mysecondrop=\secondstring\；'；？然后在我的index.js中，引用如下全局变量：？完全正确！这就是我的意思。我更正了之前的回答：insert into index.js。