@tomjs/vscode-extension-webview
Version:
When using 'webview.html' in vscode extension development, 'HMR' of vue/react is supported.
84 lines (55 loc) • 2.69 kB
Markdown
# @tomjs/vscode-extension-webview
[](https://www.npmjs.com/package/@tomjs/vscode-extension-webview)  
[English](./README.md) | **中文**
> 在 `vscode` 扩展开发使用 `webview.html` 时，支持 `vue`/`react` 的 `HMR`。
由于 `webview.html` 限制，无法直接使用 `vue`/`react` 的 `HMR`，所以需要做一些特殊处理来实现。在返回 `html` 的内容中添加 `<iframe>` 标签，并将 `src` 设置为 `http://localhost:8080`，这样就可以实现 `HMR`。客户端通过 `postMessage` 向父级 `webview` 发送消息，来实现 [acquireVsCodeApi](https://code.visualstudio.com/api/references/vscode-api#Webview) 的 API。
其他也可以通过监听前端代码变化，通过 `commands.executeCommand('workbench.action.webview.reloadWebviewAction')` 刷新前端代码。
如果使用 `vite` 开发，推荐 [@tomjs/vite-plugin-vscode](https://www.npmjs.com/package/@tomjs/vite-plugin-vscode)
## 安装
```bash
# pnpm
pnpm add @tomjs/vscode-extension-webview
# yarn
yarn add @tomjs/vscode-extension-webview
# npm
npm i @tomjs/vscode-extension-webview
```
## 使用
`extension`
```ts
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` 放在顶部。
```ts
// eslint-disable-next-line simple-import-sort/imports
import '@tomjs/vscode-extension-webview/client';
```
## 文档
- [unpkg.com](https://www.unpkg.com/) 提供的 [index.d.ts](https://www.unpkg.com/browse/@tomjs/vscode-extension-webview/dist/index.d.ts).
## 示例
先执行以下命令安装依赖，并生成库文件：
```bash
pnpm install
pnpm build
```
打开 [examples](./examples) 目录，有 `vue` 和 `react` 示例。
- [react](./examples/react)
- [vue](./examples/vue)
## 重要说明
### v2.0.0
**破坏性更新：**
- 模拟的 `acquireVsCodeApi` 与 [@types/vscode-webview](https://www.npmjs.com/package/@types/vscode-webview) 的 `acquireVsCodeApi` 保持一致，改用 `sessionStorage.getItem` 和 `sessionStorage.setItem` 来实现 `getState` 和 `setState`。