VS Code 平台上运行 Node+Web 应用

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2043 天前的主题，其中的信息可能已经有所发展或是发生改变。

用 Node+Web 开发桌面应用非常方便，可是 Electron 太大了，一些小工具用 Electron 包一下有点牛刀杀鸡的感觉。

我经常用 Electron 写一些自己用的小工具（比如魔兽世界里的“辅助”小工具，逃……），所以就想，能不能利用 VS Code 的 runtime 运行这些小工具呢？经过两天的折腾，答案是能！

我写了个 VS Code 扩展来提供这样的小工具的运行平台：https://marketplace.visualstudio.com/items?itemName=sneezry.vscode-toolkit

安装好了之后，在 VS Code 左下角就能看见一个绿色的烧瓶：

点击那个烧瓶，你就能打开一个 Launcher （中文翻译成启动器？）。一个叫 Installer 的应用已经被预安装了，点那个安装器，选择一个 tka 文件就能安装了。这里有个我写好的 tka 的示例应用： https://github.com/Sneezry/cpu.tka/releases

安装好之后就能在 Launcher 里看到它了：

点击启动就能实时看到本机 CPU 的使用率：

编写一个这样的 app 非常简单，重点就是 Node 和 Web 之间怎么通讯。

首先创建 package.json，在里面分别定义displayName、icon、main和view。displayName就是启动器里显示的 app 的名字，icon是 app 图标的路径，main是 app 启动文件入口，比如index.js， view是 web 的根目录路径，里面的index.html会在 app 启动的时候打开作为界面。

启动文件入口需要定义main函数，并且 export 出去，在 app 启动的时候启动器会去执行那个函数，同时把 web 的 context 传进去：

exports.main = function(webview) {
  // do someting
}

如果想在 Node 端向 Web 端发送数据，就调用 webview 的 send 方法：

exports.main = function(webview) {
  webview.send('hello');
}

然后在 web 端用messager函数来接收这个数据：

function messager(data) {
  console.log(data) //hello
}

Web 端接收数据的函数必须叫messager。

如果在 Web 端想调用 Node 端的函数，首先将 Node 的函数 export 出来：

exports.foo = function() {
  return 'blabla';
}

然后在 Web 端使用内置的NodeJS对象调用：

const data = await NodeJS.foo(); //blabla

无论你在 Node 里是怎么定义函数的，Web 端调用的时候那个函数总是异步的，所以要加 await。

总结下数据流：

+--------------+                     +--------------------+
| Node         |                     | Web                |
|              |                     |                    |
| webview.send ----------------------> messager(data)     |
|              |                     |                    |
| exports.foo  <---------------------- await NodeJS.foo() |
|              |                     |                    |
+--------------+                     +--------------------+

最后用 zip 打包，改后缀名为 tka 就行了。

你也可以在 app 里添加 node module。

例子： https://github.com/Sneezry/cpu.tka

Web

函数

Node

启动器

13 条回复 • 2019-06-01 11:10:22 +08:00

johnnyNg

2019-05-27 16:55:02 +08:00

有点厉害了，但是我不是很理解基于你的小平台写插件相比直接写成 vscode 的插件有什么优势吗？

sneezry

2019-05-27 17:02:07 +08:00

@johnnyNg vscode 插件重点是辅助编辑器的，很多 api 都是和编辑器本身相结合。但是这种比较通用的简单的小玩意反而不容易用 vscode 扩展原生的方法做，webview 的通信就非常繁琐。我把这块包起来了，只暴露出了很少的接口进行通信，然后 web 和 node 相对独立，开发起来更方便。不过这个也完全就是利用 vscode 的 runtime 了，和 vscode 本身的功能没半点关系，所以和 vscode 插件不算冲突。