我正在使用 Electron 编写应用程序，使用 Babel 编写 React (jsx)。今天晚上我改用 TypeScript，但我不知道如何让一切正常工作。 Npm 数据包设置了 React 或 TypeScript，但不能同时设置，也不能使用 Electron。 （我还要实现 webpack。）
我的问题是：最小文件夹、文件和数据包的结构是什么？我只想使用用 TypeScript 编写的 React 组件在主窗口上显示一个 hello world。 目前，我的数据包是 Electron、React、ReactDOM、TypeScript。
【问题讨论】：
typings 并改用 @types/。
标签： reactjs typescript npm webpack electron
首先我在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 的入口点。
【讨论】：
我制作了一个样板启动包，其中包含在使用电子和打字稿反应时发现的许多错误修复，并自动监控打字稿更改以重新加载电子应用程序以加快开发速度。
https://github.com/nateshmbhat/electron-react-ts-starter/
它可以与 create-react-app 一起使用，无需弹出任何东西。
【讨论】：