javascript - VSCode扩展webview加载json文件问题

Question

我正在尝试构建一个项目，其中有一个必须在主文件中解析的 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 中未定义 require”

组合3:

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

错误是“main.ts 中未定义 require”

组合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/**/*"
    ]
}

我做错了什么？请帮忙。提前致谢。

Answer 1

webview 沙箱会加载您的 javascript 文件，因此如果您 load them as ESM Modules ，您将主 .js 文件作为模块加载，使用 import ... from ... 语句导入其他文件(感谢 @Phrogz 指出)。但当您将数据从 .json 文件加载到 webview 时，我建议使用 VS Code webview API 附带的消息传递解决方案:

只有来自配置位置的文件和资源才能加载。看 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 的 typescript 代码中加载 json 文件，然后在发生事件(主体 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;
            }
        });