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

用 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