结合React+TypeScript进行Electron开发

1. electron基本简介

electron是使用JavaScript，HTML和CSS构建跨平台的桌面应用程序。我们可以使用一套代码打包成Mac、Windows和Linux的应用，electron比你想象的更简单，如果把你可以建一个网站，你就可以建一个桌面应用程序，我们只需要把精力放在应用的核心上即可。

为什么选择electron？

• Electron 可以让你使用纯JavaScript调用丰富的原生APIs来创造桌面应用。你可以把它看作是专注于桌面应用。
• 在PC端桌面应用开发中，nwjs和electron都是可选的方案，它们都是基于Chromium和Node的结合体，而electron相对而言是更好的选择方案，它的社区相对比较活跃，bug比较少，文档相对利索简洁。
• electron相对来说比nw.js靠谱，有一堆成功的案例：Atom编辑器 Visual Studio Code WordPress等等。
• Node.js的所有内置模块都在Electron中可用。

2. 快速上手

2.1 安装React(template为ts)

yarn create react-app electron-demo-ts --template typescript

2.2 快速配置React

工程架构

index.html

App.tsx

import React from 'react'  export default function App() {   return (     
App
   ) }

index.tsx

import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import reportWebVitals from './reportWebVitals';  const root = ReactDOM.createRoot(   document.getElementById('root') as HTMLElement ); root.render(   //         //  );  // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();

2.3 安装electron

将electron包安装到您的应用程序的devDependencies.

// npm npm install --save-dev electron // yarn yarn add --dev electron

2.4 配置main.js、preload.js和package.json文件

main.js

// 导入app、BrowserWindow模块 // app 控制应用程序的事件生命周期。事件调用app.on('eventName', callback)，方法调用app.functionName(arg) // BrowserWindow 创建和控制浏览器窗口。new BrowserWindow([options]) 事件和方法调用同app // Electron参考文档 https://www.electronjs.org/docs const {app, BrowserWindow, nativeImage } = require('electron') const path = require('path') // const url = require('url');   function createWindow () {     // Create the browser window.     const mainWindow = new BrowserWindow({         width: 800, // 窗口宽度         height: 600,  // 窗口高度         // title: "Electron app", // 窗口标题,如果由loadURL()加载的HTML文件中含有标签