介绍
Carlo是什么？几天前 GoogleChromeLabs 的 Git 仓库里新增了一个名为 Carlo 的仓库，官方对它的描述是『让 Node 程序可以使用 web 来渲染界面』(Web rendering surface for Node applications)。
Carlo 通过 Chrome 浏览器给 Node 程序提供了渲染界面的能力。它使用 Puppeteerp 项目来跟已安装的 Chrome 浏览器交流，通过远程调用方法的方式让 Node 和 Chrome 建立通信。
具体方式是 Carlo 调用本地的 Chrome 来渲染指定的 html 文件并在在程序中暴露方法到 Chrome 全局变量中，从而实现 web 程序与 Node 通信。
与 Electron 区别
很多人都会拿 Carlo 和 Electron 对比，并且说 Carlo 是一个 Electron-like 的框架，那 Carlo 是一个新的 Electron 吗？我觉得不是。
Electron 目的是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用，它可以自定义应用图标，可以拓展应用菜单，可以定义系统状态栏，可以把自己打包成应用安装包供用户下载安装使用，原生应用能实现的功能 Electron 都提供了接口来实现。
Carlo 就只是一个普通的 Node 框架，它只有调用 chrome 渲染 html 并与 Chrome 通信这个功能。它自己没有渲染 UI 的能力，它依赖 Chrome，没有 Chrome 会直接报错。 它现在的目的并不是构建应用程序而是扩充 Node 程序的功能让其具备渲染界面的能力。
结论
Electron 的目的是构建桌面应用，Carlo 的目的是让 Node 程序调用 Chrome 渲染界面，所以他们不是同一类东西。
Carlo 使用
Carlo 是基于 Puppeteerp 的，Puppeteerp 是 Chrome 团队出品的headless无界面浏览器，它提供了一堆 API 来控制 Chrome 或 Chromium。看源码可以发现 Carlo 是 Puppeteerp 去掉 Chromium 的版本 puppeteerp-core 加上 寻找已安装的 Chrome 浏览器功能 (find_chrome.js) 和通信功能 (rpc.js) 来实现的。
Carlo 对 Node 版本的最低要求是 v7.6.0，对 Chrome 的版本要求是 70.* （官方是这么说的，但我69的也能用，可能是部分功能不兼容）。
Carlo 的接口很简单现在只有 launch、serveFolder、load、exposeFunction、exposeObject、exposeFactory、evaluate、exit 这几个方法。
launch(): 创建浏览器窗口对象
App.serveFolder(folder, prefix): 让文件夹内的内容可以被浏览器访问
App.load(uri): 加载路径
App.exposeFunction(name, carloFunction) 暴露方法到浏览器的 window 对象里
App.exposeObject(name, object) 暴露对象到浏览器的 window 对象里
App.exposeFactory(factoryConstructor) 暴露工厂构造函数到浏览器的 window 对象里
App.evaluate(pageFunction, ...args) 执行浏览器页面里的方法
App.exit() 退出浏览器窗口
具体 API 可以到这里查看 Carlo API文档
用一个官方的例子介绍一下使用
先安装 Carlo
npm i carlo
创建用来渲染界面的 HTML
保存为 example.html
<script>
async function run() {
// Call the function that was exposed in Node.
const data = await env();
for (const type in data) {
const div = document.createElement('div');
div.textContent = `${type}: ${data[type]}`;
document.body.appendChild(div);
}
}
</script>
<body onload="run()">
创建 Node 程序部分
保存为 example.js
const carlo = require('carlo');
(async () => {
// Launch the browser.
const app = await carlo.launch();
// Terminate Node.js process on app window closing.
app.on('exit', () => process.exit());
// Tell carlo where your web files are located.
app.serveFolder(__dirname);
// Expose 'env' function in the web environment.
await app.exposeFunction('env', _ => process.env);
// Navigate to the main page of your app.
await app.load('example.html');
})();
执行 node example.js
这个时候会新建一个 Chrome 程序并打开一个只有边框的窗口，窗口里显示电脑的系统信息文本。
我这里做了个显示文件目录的小 demo 可以体验一下 PEIC/carlo-demo-dir
