如何使用React和Typescript设置Electron？

Question

我正在使用Electron，React（jsx）和Babel编写应用程序。我今天晚上切换到Typescript，我无法弄清楚如何使一切正常。 Npm数据包设置了React或Typescript，但不是两者都设置，而不是电子设备。 （我还必须实现webpack） 我的问题是：文件夹，文件和数据包的 minimal 结构是什么使一切正常？我只想使用在Typescript中编写的React组件在主窗口上显示一个hello world。 目前我的数据包是Electron，React，ReactDOM，Typescript。

Answer 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）。

在本地[{1}}或全球npm install electron --save-dev

安装电子

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

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

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

Answer 2

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

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

它可与create-react-app一起使用，而无需弹出任何内容。