如何使用 React 和 TypeScript 设置 Electron？

Posted 2023-03-13

【中文标题】如何使用 React 和 TypeScript 设置 Electron？

【英文标题】：How to set up Electron with React and TypeScript?

【发布时间】：2018-04-29 05:33:42

【问题描述】：

我正在使用 Electron 编写应用程序，使用 Babel 编写 React (jsx)。今天晚上我改用 TypeScript，但我不知道如何让一切正常工作。 Npm 数据包设置了 React 或 TypeScript，但不能同时设置，也不能使用 Electron。 （我还要实现 webpack。）

我的问题是：最小文件夹、文件和数据包的结构是什么？我只想使用用 TypeScript 编写的 React 组件在主窗口上显示一个 hello world。 目前，我的数据包是 Electron、React、ReactDOM、TypeScript。

【问题讨论】：

这个问题有很多不同的答案。你最好使用一个简单的脚手架，它已经使用了这些依赖项和合理的默认值。周围有几个。 This one 似乎是一个很好的例子，只要你忽略 typings 并改用 @types/。

【参考方案1】：

首先我在Typescript官方网站上关注了这个教程：https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

如果您按照每一步操作，您最终会得到一个 dist 文件夹，其中包含一个 bundle.js（包含 Webpack 从 Typescript 接收的捆绑代码）和一个包含 .tsx 文件的 src 文件夹。 Typescript 支持开箱即用的 React，只需将 "jsx": "react" 添加到 tsconfig.json 并重新命名您的文件 .tsx 而不是 .ts。之后将 index.js 添加到根文件夹（从此处复制：https://github.com/electron/electron-quick-start/blob/master/main.js）。

在本地安装电子 npm install electron --save-dev 或全局安装 npm install -g electron

在 app 文件夹中使用 webpack 运行 webpack（以生成 ./dist/bundle.js 文件）

在 app 文件夹中使用 electron . 运行电子

需要注意的重要一点是 webpack 的入口点：它的 ./src/index.tsx 而电子入口点是 ./index.js。电子加载 index.js 加载 index.html 加载 ./dist/bundle.js。我们可以将 index.js 转换为 index.ts，但是我们必须更改 webpack 的入口点。

【参考方案2】：

我制作了一个样板启动包，其中包含在使用电子和打字稿反应时发现的许多错误修复，并自动监控打字稿更改以重新加载电子应用程序以加快开发速度。

https://github.com/nateshmbhat/electron-react-ts-starter/

它可以与 create-react-app 一起使用，无需弹出任何东西。