使用React Typescript CRA设置电子

时间:2018-12-29 12:06:04

标签: javascript reactjs typescript electron

_____项目说明_____

我以Web应用程序启动了Typescript&React项目,目前正在将其完全转换为Electron应用程序。我对此有些麻烦。

_____我目前在_____

我跟随this tutorial来使Electron工作。除了electron.js文件(在名为main.js的教程中,我将其放置在src文件夹中,而不是public文件夹中)之外,它是一个javascript文件, 。这并不妨碍我的应用程序运行,但是我更喜欢以Typescript格式使用它。那就是我所坚持的。我将其转换为Typescript文件,但无法从我的package.json配置中指向该文件。

_____问题描述_____

据我了解,main中的package.json属性需要指向此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"
    }
  },
  ...

2 个答案:

答案 0 :(得分:0)

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

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

它可以与Create react应用一起正常工作,而无需将其弹出。

答案 1 :(得分:0)

我发现启动和运行打字稿的最快方法是使用electron-webpack

使用add-ons,可以满足您的要求。我已经将此great success用于电子反应还原应用。