使用 React Typescript CRA 設置 Electron

Question

_____ 項目描述 _____

我開始我的 Typescript & React 項目作為一個 Web 應用程序，我目前正在將它完全轉換為一個 Electron 應用程序。 我在這方面遇到了一些麻煩。

_____ 我現在在哪里 _____

我按照本教程讓 Electron 工作。 它工作正常，除了electron.js main.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"
    }
  },
  ...

Answer 1

我制作了一個樣板啟動包，其中包含許多我在使用與電子和打字稿反應時必須面對的應用錯誤修復，並自動監控打字稿更改以重新加載電子應用程序以加快開發速度。

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

它適用於 Create react 應用程序，無需彈出它。

Answer 2

我發現啟動和運行electron-webpack的最快途徑是使用electron-webpack 。

通過附加組件，它可以滿足您的要求。 我已經使用它在電子反應還原應用程序中取得了巨大的成功。