『Carlo』 一個新的 Electron ?
介紹
Carlo是什麼？幾天前 GoogleChromeLabs 的 Git 倉庫裏新增了一個名為 Carlo 的倉庫，官方對它的描述是『讓 Node 程序可以使用 web 來渲染界面』(Web rendering surface for Node applications)。
Carlo 通過 Chrome 瀏覽器給 Node 程序提供了渲染界面的能力。它使用 Puppeteer 項目來跟已安裝的 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 是基於 Puppeteer 的，Puppeteer 是 Chrome 團隊出品的headless無界面瀏覽器，它提供了一堆 API 來控制 Chrome 或 Chromium。看源碼可以發現 Carlo 是 Puppeteer 去掉 Chromium 的版本 puppeteer-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
推薦閱讀：
