使用 React Typescript CRA 设置 Electron答案

【问题标题】：Setting up Electron with React Typescript CRA使用 React Typescript CRA 设置 Electron
【发布时间】：2019-05-26 22:02:14
【问题描述】：

____ 项目描述 _____

我的 Typescript & React 项目是作为一个 Web 应用程序开始的，我目前正在将其完全转换为一个 Electron 应用程序。不过，我在这方面遇到了一些麻烦。

_____ 我目前在 _____ 的地方

我关注this tutorial 让 Electron 工作。它工作正常，除了electron.js 文件（在名为main.js 的教程中，我将它放在我的src 文件夹中，而不是public 文件夹中）是一个javascript 文件。这不会妨碍我的应用程序运行，但我更喜欢使用 Typescript 格式。这就是我所坚持的。我将它转换为 Typescript 文件，但我无法从我的 package.json 配置中指向它。

____ 问题描述_____

据我了解，package.json 中的main 属性需要指向这个electron.ts 文件。但当然，该文件没有得到正确处理，因为它不是 javascript 文件。

____ 问题_____

我怎样才能以某种方式指向electron.ts 文件？在运行时生成的转译代码在哪里？也许我可以将main 属性指向那里？

_____ package.json _____

  ...,
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",
    "electron-dev": "concurrently \"BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\"",
    "electron-pack": "build -- em.main=build/electron.js",
    "preelectron-pack": "npm run build"
  },
  "main": "src/electron.ts",
  "homepage": "./",
  "build": {
    "appId": "com.example.electron-cra",
    "files": [
      "build/**/*",
      "node_modules/**/*"
    ],
    "directories": {
      "buildResources": "assets"
    }
  },
  ...

【问题讨论】：

Clone to try a simple Electron app (in TypeScript) 可能是一个很好的起点。
@Mikaeru 我看过了。它使用 tsc，这不是 React CRA 似乎使用的。
对不起，我必须承认我不知道... ????
我也尝试过这种方法（来自同一个教程），但我被困在同一点上。我认为问题在于，一旦将 main.ts 放入 src 文件夹，它就会被编译到 bundle.js 中。因此，我们要么需要一种方法来使用 bundle.js 调用 electron，但与 CRA 应用程序使用的入口点不同，或者我们需要一种方法来为来自 main 的电子创建第二个捆绑包（我们称之为 electron.js）。 ts。但是，我担心创建第二个捆绑包意味着退出 CRA - 我不希望这样做。

标签： javascript reactjs typescript electron

【解决方案1】：

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

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

它与 Create react 应用程序一起工作正常，无需弹出它。

【讨论】：

【解决方案2】：

我发现启动和运行 typescript 的最快途径是使用electron-webpack。

add-ons 可以满足您的要求。我已将其用于 great success 用于电子反应还原应用程序。

【讨论】：