Как передать параметры в скрипт в веб-представлении VS Code - PullRequest
Новая
       11

Как передать параметры в скрипт в веб-представлении VS Code

0 голосов
/ 10 октября 2019

Я запускаю приложение React в VS Code webview и использую Webpack для генерации связанного кода webview в файл с именем dist/webviews/myWebview.js.

Вот как мойКод веб-просмотра структурирован:

Я определил 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')
);

У меня также есть файл index.html, который загружаетфайл index.js (обратите внимание, что перед настройкой содержимого панели веб-просмотра я заменяю {{mainScriptUri}} на dist/webviews/myWebview.js): 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src vscode-resource: http: https:; img-src vscode-resource: data: https:; style-src blob: 'unsafe-inline'; script-src 'nonce-{{nonce}}'; font-src data: https://unpkg.com;">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Webview</title>
</head>

<body>
    <div id="root"></div>
    <script nonce="{{nonce}}" src="{{mainScriptUri}}"></script>
</body>

</html>

Чтобы открыть веб-просмотр, я настроил новыйкоманда (доступна из контекстного меню редактора) и откройте веб-представление с помощью vscode.commands.executeCommand.

У меня есть несколько переменных (myFirstProp = "first string" и mySecondProp = "second string") в моем коде расширения, которые доступны при создании веб-просмотра vscode.window.createWebviewPanel.

Мне нужно передать эти две переменные myFirstProp и mySecondProp как props компоненту <App /> React в index.js. Например: 

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

Я попытался поместить содержимое заполнителя в index.js аналогично тому, что я сделал с index.html (например, myFirstProp="{{myFirstProp}}"), а затем заменить заполнитель фактическим значением переменной, когдаЯ установил содержимое панели веб-просмотра. Тем не менее, связанный файл dist/webviews/myWebview.js очень большой, и чтение / запись в файл очень интенсивна. Я хочу избежать этого. Есть ли какой-нибудь способ, которым я могу сделать это программно?

1 Ответ

1 голос
/ 11 октября 2019

Это довольно просто: вставьте JS-код в ваш index.html при создании HTML-контента для вашего веб-просмотра. Введите другое имя макроса, например, {{mainScriptUri}} (например, <script nonce="{{nonce}}">{{init}}</script>), и замените его при создании HTML вашими переменными.

...