React+Typescript+Electron 开发跨平台桌面应用教程_electron react typescript

作者：小丑西瓜9 | 2024-04-08 20:52:19

踩

electron react typescript

使用 React+Typescript+Electron 开发跨平台桌面应用

简介

electron 是跨平台桌面应用开发工具，electron 的工作原理大致就是使用 V8 引擎运行 web 应用，于浏览器运行 web 应用的区别就是 electron 支持所有的 NodeJs 的 api（能力），我们可以使用 electron 调用很多浏览器无法调用的操作系统的能力，比如操作文件系统等等。

Electron 特点

优点就是跨平台，开发成本低，Web 前端工程师在学习 Electron 以及 NodeJs 有关的只是后即可上手开发桌面应用，缺点就是性能以及打包后的安装包大小偏大等等。

搭建 electron 工程

按照 electron 官网的搭建流程，具体分为以下几步：

yarn init 按照操作完成即可（包括配置入口文件目录）
使用 yarn add electron 安装 electron 依赖，这里需要注意国内安装 electron 依赖极有可能卡住，这里需要更改 electron 镜像地址：
```
 npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
 npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/
1
2
```
更改（添加）package.json 中的脚本命令，将 start 命令添加在 scripts 中
```
 "scripts": {
    "start": "electron ."
 },
1
2
3
```

创建入口文件，我自己的习惯是创建 electron 目录存放 electron 有关的代码并且使用 typescript 开发，因此这里我的目录结构如下：

-build
|   -electron
|   -index.html
-electron
|   -main.ts
|   -preload.ts
|   -tsconfig.json`
1
2
3
4
5
6
7

tsconfig.json 配置文件配置如下：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "strict": true,
    "outDir": "../build",
    "rootDir": "../",
    "noEmitOnError": true,
    "typeRoots": ["node_modules/@types"]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

这里比较重要的配置就是outDir配置项，这里需要这样配才能将编译后的 js 文件输出到 build 目录下，这样入口文件main.js的位置才能和 package.json 中配置的入口文件相对应。

使用 electron 渲染简单的 html 页面

其实 electron 应用最终打包后页面显示的就是 html 页面，现在我们在上面搭建的基础上继续开发我们的第一个 electron 页面。
第一步：创建 Html 文件，因为最终打包的时候我会把 build 目录下的所有文件打包到安装包，因此我会把 htmk 文件放在 build 目录下，随意写一个简单的页面，比如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>Hello from Electron renderer!</title>
  </head>
  <body>
    <h1>Hello from Electron renderer!</h1>
    <p>声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/388144

推荐阅读

相关标签