Как импортировать npm пакетов в разработку расширений vs кода?

Question

Я хочу использовать npm пакеты (latextoMathML), но когда я использую его в своем веб-просмотре, он выдает ошибку при запуске расширения: не определено определение: имя пакета (latexto XML) не определено. я пробовал через let / var / const с методом require. я хочу использовать в моем js коде под функцией веб-просмотра.

Answer 1

Нельзя импортировать пакет npm в веб-просмотр обычным способом, например, следующим образом:

var somelibrary = require('somelibrary')

Вместо этого вы можете загрузить пакет как локальный ресурс.

См. WebView API документация и пример кода для подробного объяснения

Чтобы сделать это, выполните следующие минимальные шаги:

• при создании Новая панель, включите сценарии

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>
...
';