在前端开发中，我们经常需要使用桌面应用程序来处理一些特定任务。例如，在开发一个基于 Web 技术的应用程序时，我们可能需要在本地运行一个应用程序来与硬件或操作系统进行交互。而基于 Electron 的应用程序可以满足这些需求，但它的学习曲线比较陡峭。在这篇文章中，我们将介绍另一个选项：npm 包 electrino。
什么是 electrino
Electrino 是一个类似于 Electron 的框架，可以用来构建桌面应用程序。与 Electron 不同的是，它使用的是本机的 Web 视图组件，而不是 Chromium。这使得 electrino 极为轻量级，整个包的大小仅有 2 MB 左右，而 Electron 则有将近 100 MB。
由于 electrino 是一个 npm 包，因此我们可以很容易地将它与我们现有的 npm 生态系统集成在一起，并通过命令行界面管理依赖项。这让开发者能够更加专注于应用程序的设计和实现，而不必花费时间和精力来维护大量的依赖项。
electrino 的使用教程
在本文中，我们将开发一个基本的 electrino 应用程序，这个程序能够显示一张图片。首先，我们需要安装 electrino 的依赖项：
$ npm install --save electrino
现在，我们可以开始开发我们的应用程序了。请看下面的示例代码：
const { app, BrowserWindow } = require('electrino');
app.on('ready', () => {
const mainWindow = new BrowserWindow({ width: 800, height: 600 });
mainWindow.loadURL(`file://${__dirname}/index.html`);
});在这段代码中，我们首先从 electrino 导入了 app 和 BrowserWindow 对象。app 对象用于管理应用程序的生命周期，而 BrowserWindow 对象则用于创建应用程序窗口。
在应用程序的 ready 事件中，我们创建了一个新的 BrowserWindow 对象，并将其加载到 index.html 文件。接下来，我们需要创建 index.html 文件并将一张图片加载到其中：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- --------- -----------
-------
----- ---- - ------- -- -------- -- -
--- - ---------- ---- -
--------
-------
------
---- ----------------- --
-------
-------最后，我们需要将我们的图片文件 image.jpg 放置在与 index.html 文件相同的目录下。
现在，我们准备好运行我们的应用程序了。使用以下命令来启动应用程序：
$ electrino .
在这个命令中，电点表示启动一个新的 electrino 应用程序并将当前目录作为该应用程序的根目录。在应用程序启动后，我们将看到一张图片显示在屏幕上。
结论
在本文中，我们介绍了 electrino 这个 npm 包，以及如何使用 electrino 来构建一个简单的桌面应用程序。使用 electrino 可以为我们带来比 Electron 更加轻量级和集成化的体验，并且它非常适合用于开发一些小型的桌面应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b7b81e8991b448d900d