VSCode Расширение webview загрузить JSON файл проблема - PullRequest
Новая
       11

VSCode Расширение webview загрузить JSON файл проблема

1 голос
/ 02 ноября 2019

Я пытаюсь создать проект, в котором у меня есть один файл json, который мне нужно проанализировать в моем основном файле. Но я не могу включить его в основной файл. В терминале нет ошибки как для main.ts, так и для main.js. Панель веб-просмотра показывает содержание из HTML, но ничего из основного файла. Если я проверяю через инструменты разработчика, это отображает ошибку. Я импортирую json в main.ts, а main.js - это скомпилированный файл для main.ts. Мне нужны оба файла, и ошибка возникает для любого из них.

Я пробовал разные комбинации

Комбинация 1: 

import json from "./test.json"; //in main.ts file
"module": "commonjs" // in tsconfig.json file

Ошибка "экспорт неопределено в файле main.js "

комбинация 2: 

const json = require("./test.json"); //in main.ts file
"module": "commonjs" // in tsconfig.json file

Ошибка" Требуется, не определено в файле main.ts "

комбинация 3: 

const json = require("./test.json"); //in main.ts file
"module": "es2015" // in tsconfig.json file

Ошибка: «Требование не определено в main.ts»

Комбинация 4: 

import json from "./test.json"; //in main.ts file
"module": "es2015" // in tsconfig.json file

Ошибка: «Невозможно использовать оператор импорта вне модуля»

А ниже приведен пример моего полного файла tsconfig.json 

{
    "compilerOptions": {
        "module": "es2015",
        "target": "es5",
        "outDir": "out",
        "sourceMap": true,
        "strict": true,
        "rootDir": "src",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "strictNullChecks":false,
        "lib": ["dom","es2015","es5","es6"]
    },
    "exclude": ["node_modules", ".vscode-test"],
    "include"        : [
        "src/**/*"
    ]
}

Что я делаю не так? Пожалуйста помоги. Заранее спасибо.

1 Ответ

1 голос
/ 02 ноября 2019

Песочница для веб-просмотра запускает простой javascript, поэтому, если вы не сделаете что-то дополнительное, node.js require() или концепция модуля недоступна. Файлы и ресурсы могут быть загружены, только если они поступают из настроенного местоположения. См. https://code.visualstudio.com/api/extension-guides/webview#loading-local-content

Что касается VS Code Webview, я бы порекомендовал сохранить логику в вашем коде расширения, оставив Webview только для логики визуализации и передавая сообщения туда и обратно, используя передачу сообщений, описанную здесь: https://code.visualstudio.com/api/extension-guides/webview#scripts-and-message-passing и вызывая ваши команды расширения.

Таким образом, вы можете загрузить файл json в ваш машинописный код, который создает Webview, затем по событию (либо событие загрузки тела, либо пользователь, нажимающий кнопку), javascript в вашем html Webview должен передать вашему расширению сообщение с запросом данных json. Ваше расширение передает сообщение обратно, содержащее данные json в качестве полезной нагрузки.

Пример кода расширения: 

    const json = require("./test.json");

    // Send a message to our webview.
    // You can send any JSON serializable data.
    currentPanel.webview.postMessage({ command: 'load', jsonData: json });

Пример кода Javascript Webview: 

        window.addEventListener('message', event => {

            const message = event.data; // The command and JSON data our extension sent

            switch (message.command) {
                case 'load':
                    // todo: do something with the json data
                    console.log(message.jsonData)
                    break;
            }
        });
...