VSCode扩展webview加载json文件问题

时间:2019-11-02 15:06:42

标签: javascript json typescript webview vscode-extensions

我正在尝试构建一个项目,在其中我必须在主文件中解析一个json文件。但是我不能将其包含在主文件中。在终端中,main.ts和main.js都没有错误。 Webview面板显示html中的内容,但不显示主文件中的内容。如果我通过开发人员工具进行检查,则显示错误。我正在main.ts中导入json,而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

错误是“无法在模块外部使用import语句”

下面是我完整的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 个答案:

答案 0 :(得分:1)

webview沙箱运行普通的javascript,因此,除非您进行其他操作,否则node.js require() module 的概念不可用。 如果文件和资源来自配置的位置,则只能加载它们。看到 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和调用扩展命令

这样,您可以在创建Webview的打字稿代码中加载json文件,然后在发生事件(body onload事件或用户按下按钮)时,Webview html中的javascript将传递一条消息到您的扩展请求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 });

示例Webview javascript代码:

        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;
            }
        });