javascript - VSCode Extension webview加载json文件问题
问题描述
我正在尝试构建一个项目,其中有一个我必须在我的主文件中解析的 json 文件。但我不能将它包含在主文件中。在终端中,main.ts 和 main.js 都没有错误。Webview 面板显示来自 html 的内容,但没有显示主文件中的内容。如果我通过开发人员工具进行检查,则会显示错误。我在 main.ts 中导入 json,而 main.js 是 main.ts 的编译文件。我需要这两个文件,并且其中任何一个都发生错误。
我尝试了不同的组合
组合一:
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/**/*"
]
}
我究竟做错了什么?请帮忙。提前致谢。
解决方案
webview 沙箱运行纯 javascript,所以除非你做一些额外的事情,否则 node.jsrequire()
或模块的概念是不可用的。只有来自配置位置的文件和资源才能加载。请参阅
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 文件,然后在发生事件(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;
}
});
推荐阅读
- c - '=' 标记之前的预期表达式
- reactjs - 无法获取未定义或空引用的属性“包含”
- c# - 显示目录 Asp .Net Core 中可用的文件
- search - 使用 Nativescript 搜索数据
- r - 处理 Quantstat 示例会产生错误
- scala - 从 String 创建 typeTag 并将其传递给多态方法
- mysql - 配置 debezium 连接器以读取没有任何部分数据的 mysql 二进制日志
- c - 2.4inch 8bit bus LCD ili9341 不支持STM32F103
- asp.net - 从 VS2019 将 Asp.Net Core 项目发布到 Web 托管网站 - 不知道如何继续
- spring-boot - 将github信息注入Spring bean