@tomjs/vscode-extension-webview
v1.2.0
Published
When using 'webview.html' in vscode extension development, 'HMR' of vue/react is supported.
Downloads
121
Maintainers
tomgao365Readme
@tomjs/vscode-extension-webview
English | 中文
在
vscode扩展开发使用webview.html时，支持vue/react的HMR。
由于 webview.html 限制，无法直接使用 vue/react 的 HMR，所以需要做一些特殊处理来实现。在返回 html 的内容中添加 <iframe> 标签，并将 src 设置为 http://localhost:8080，这样就可以实现 HMR。客户端通过 postMessage 向父级 webview 发送消息，来实现 acquireVsCodeApi 的 API。
其他也可以通过监听前端代码变化，通过 commands.executeCommand('workbench.action.webview.reloadWebviewAction') 刷新前端代码。
安装
# pnpm
pnpm add @tomjs/vscode-extension-webview
# yarn
yarn add @tomjs/vscode-extension-webview
# npm
npm i @tomjs/vscode-extension-webview使用
extension
import getHtml from '@tomjs/vscode-extension-webview';
const panel = window.createWebviewPanel('showHelloWorld', 'Hello World', ViewColumn.One, {
enableScripts: true,
localResourceRoots: [Uri.joinPath(extensionUri, 'dist/webview')],
});
if (process.env.NODE_ENV === 'development') {
panel.webview.html = getHtml({
serverUrl: `http://localhost:5173`,
});
} else {
panel.webview.html = /* html */ `
<!doctype html>
<html lang="en">
</html>`;
}将客户端代码放到 vue/react 的 main.ts 放在顶部。
// eslint-disable-next-line simple-import-sort/imports
import '@tomjs/vscode-extension-webview/client';文档
- paka.dev 提供的 API文档.
- unpkg.com 提供的 index.d.ts.
示例
先执行以下命令安装依赖，并生成库文件：
pnpm install
pnpm build打开 examples 目录，有 vue 和 react 示例。