如何使用React和Typescript设置Electron？

Question

我正在使用Electron，Babel与React（jsx）编写应用程序。我今晚切换到Typescript，我不知道如何使所有内容正常工作。Npm数据包可以设置React或Typescript，但不能同时设置两者，也不能与Electron一起设置。（我还必须实现webpack）我的问题是：使一切正常工作的文件夹，文件和数据包的最小结构是什么？我只想使用用Typescript编写的React组件在主窗口上显示一个hello世界。目前我的数据包是Electron，React，ReactDOM，Typescript。

Answer 1

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

如果按照每个步骤进行操作，最终将得到一个dist文件夹，其中包含bundle.js（带有Webpack从Typescript接收的捆绑代码）和一个src文件夹，其中包含.tsx文件。打字稿支架框的反应掉，只需添加"jsx": "react"到tsconfig.json和renane文件.tsx代替.ts。之后，将index.js添加到根文件夹（从此处复制：https : //github.com/electron/electron-quick-start/blob/master/main.js）。

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

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

electron .在app文件夹中同时运行电子

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