Reactjs 如何用React和TypeScript设置电子？

我正在用Electron编写一个应用程序，用Babel编写React（jsx）。今天晚上我换成了打字稿，我不知道如何让每件事都顺利进行。Npm数据包设置为React或TypeScript，但不是两者都设置，也不是与Electron一起设置。（我还必须实现webpack。）

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

---

目前，我的数据包是Electron、React、ReactDOM、TypeScript。

首先，我在TypeScript的官方网站上学习了本教程：

如果您按照每一步操作，您将得到一个dist文件夹，其中包含bundle.js（带有Webpack从Typescript接收的捆绑代码）和一个src文件夹，其中包含.tsx文件。Typescript支持开箱即用的React，只需在tsconfig.json中添加

“jsx”：“React”

，并重新生成您的文件

.tsx

，而不是

.ts

。之后，将index.js添加到根文件夹（从此处复制：）

本地安装electron

npm安装electron--save dev

或全局安装

npm安装-g electron

在app文件夹中使用

webpack

运行webpack（以生成./dist/bundle.js文件）

在app文件夹中运行electron时使用

electron.

---

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

我制作了一个锅炉板启动包，其中包含许多在使用react with electron和typescript时发现的错误修复，并自动监控typescript的更改，以重新加载electron应用程序以加快开发速度

---

它与create react应用程序配合使用，无需弹出任何内容。

这个问题有很多不同的答案。您最好使用一个简单的脚手架，它已经使用了这些具有合理默认值的依赖项。周围有一些这样的人。这似乎是一个很好的例子，只要你忽略

打字

而使用

@types/

。