介绍
在现代化的应用程序和可执行文件中,桌面应用程序一直扮演着一个非常重要的角色。现在,随着越来越多的应用向云端迁移,一些独立的桌面应用程序,如文本编辑器、功能强大的音频编辑器和其他工具,无论在操作方面还是在性能方面,仍然是有利可图的。在构建这些桌面应用程序时,有一些流行的框架和库,包括 Electron 和 TypeScript。在本篇文章中,我们将学习如何有效地使用这些技术来构建高质量的桌面应用程序。
Electron 简介
Electron 是一个流行的桌面应用程序框架,基于 Chromium 和 Node.js。可以用 HTML、CSS 和 JavaScript 构建桌面应用程序,类似于一个标准化的浏览器。Electron 优化了从网页到桌面应用程序的转换,在不失去任何浏览器功能的同时,为应用程序开发人员提供了良好的灵活性。
在 Electron 中,您可以使用Web技术开发应用程序,包括HTML、CSS、JavaScript和Node.js的模块,并在同一时间内访问操作系统资源。这使得您可以构建出复杂且功能强大的桌面应用程序。Electron 已经被广泛应用于像 Visual Studio Code、Slack、GitHub Desktop、WhatsApp 桌面应用程序等的构建。
TypeScript 简介
TypeScript 是 JavaScript 的超集,通过为 JavaScript 增加类型注释和其他一些特性来改进它。随着时间的推移,我们需要更加严格和安全的代码,这使得TypeScript越来越受欢迎。更重要的是,许多流行的框架和库,如 Angular 和 React,现在也支持 TypeScript。
TypeScript 对于大型项目来说尤其有用。这样做可以提高代码的可读性,更快地发现错误,并提高应用程序的可维护性。此外,VS Code 和 WebStorm 等 IDE 也支持 TypeScript,并提供智能的代码提示、错误检测和自动代码重构。
使用 Electron 构建桌面应用程序
在这个部分中,我们将学习如何使用 Electron 快速构建桌面应用并为其添加 TypeScripts 支持。我们使用的操作系统是 macOS:
安装 Electron
我们将使用 Node.js 模块管理器 npm 安装 Electron。命令如下:
npm install electron
创建一个基本的 Electron 应用程序
我们将创建一个简单的 Electron 应用程序。在您选择的位置创建一个新的目录,并使用 npm 初始化该目录。
mkdir my-electron-app cd my-electron-app npm init -y
现在,我们使用你最喜欢的代码编辑器打开该目录,创建以下文件:
-- -------------------- ---- ------- ---- ---------- --- --------- ----- ------ ------ ----- ---------------- ------------ -------------- ------- ------ --------- ----------- -- --- ----- ------- ------------------------------------------------------- -------- --------------------------------------------------------- --- -------- ----------------------------------------------------------- ------- -------
-- -------------------- ---- ------- -- -------- ----- - ---- ------------- - - ------------------- ----- ---- - --------------- -------- ------------ -- - ----- --- - --- --------------- ------ ---- ------- ---- --------------- - -------- -------------------- ------------- - -- -------------------------- ------------------------------ - ----------------------- -- - -------------- ------------------ -- -- - -- ------------------------------------- --- -- - -------------- - -- -- --------------------------- -- -- - -- ----------------- --- --------- - ---------- - --
// preload.js window.addEventListener('DOMContentLoaded', () => { console.log('Using Node.js ' + process.versions.node + ' in the renderer process') })
现在,我们可以使用以下命令从终端运行我们的应用程序:
npx electron .
这应该会启动一个新的应用程序窗口,其中应该包含一个标题为“Hello World!”的简单网页。我们现在可以使用主进程 Node.js 更改窗口的大小、位置等属性。这个例子是一个非常简单的开始步骤,一旦我们习惯了 Electron 之后,我们可以尝试进一步的开发和工程。
使用 TypeScript 支持
现在我们将为我们的 Electron 项目添加 TypeScript 支持。让我们首先安装 TypeScript:
npm install typescript --save-dev
要启用 TypeScript 支持,请在根目录下创建一个 tsconfig.json
文件并添加以下内容:
-- -------------------- ---- ------- - ------------------ - ------------------ ----- --------- ----------- --------- ------ --------- ------- ------------ ---- -- ---------- - -------------- - -
现在,我们可以将我们的 JavaScript 文件改为 TypeScript 文件:
-- -------------------- ---- ------- -- -------- ------ - ---- ------------- - ---- ---------- ------ - -- ---- ---- ------ -------- ------------ -- - ----- --- - --- --------------- ------ ---- ------- ---- --------------- - -------- -------------------- ------------- - -- -------------------------- ------------------------------ - ----------------------- -- - -------------- ------------------ -- -- - -- ------------------------------------- --- -- - -------------- - -- -- --------------------------- -- -- - -- ----------------- --- --------- - ---------- - --
// preload.ts window.addEventListener('DOMContentLoaded', () => { console.log('Using Node.js ' + process.versions.node + ' in the renderer process') })
这里我们改为使用 import 引入 electron 和 path 而不是使用 require 了。如果您希望在代码内使用 require 函数,需要添加以下内容 import require
:
import * as electron from 'electron' import * as path from 'path' const { app, BrowserWindow } = electron
现在,我们需要使用 TypeScript 编译器编译这些 TypeScript 文件。如果您使用 Electron 12 及更高版本,您需要安装针对您应用程序的 electron
包。如果你使用 Electron 11 或更低版本,electron
中已经包含了 @types/electron
类型定义。安装它们:
npm install electron @types/electron --save-dev
现在,我们需要一个 npm 脚本来生成 JavaScript 文件。你可以在你的 package.json
文件中添加以下脚本:
{ "scripts": { "build": "tsc -p ." }, }
该脚本将使用 TypeScript 编译器来编译所有 TypeScript 文件。执行以下命令,您的 TypeScript 文件将被编译到 /dist
目录下:
npm run build
然后我们开启我们的Electron应用:
electron ./dist
如此,您的 Electron 项目现在可以使用 TypeScript 开发。
总结
在本文中,我们学习了 Electron 和 TypeScript,以及如何在桌面应用程序中使用它们。我们从创建一个简单的 Electron 应用程序开始,然后向其添加了 TypeScript 支持。在您深入学习本地应用程序和 TypeScript 后,这些工具可以帮助您构建功能强大的桌面应用程序。
示例代码
本文的示例代码可以在 GitHub 中找到。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64a53f6f48841e98941c199d