javascript - הקמת Electron עם React Typescript CRA

_____ תיאור הפרויקט _____

התחלתי את פרויקט ה-Typescript & React שלי כאפליקציית ווב וכעת אני בתהליך להמיר זאת באופן מלא לאפליקציית Electron. עם זאת, יש לי קצת קשיים עם זה.

_____ איפה שאני נמצא כרגע _____

עקבתי אחרי המדריך הזה כדי לגרום ל-Electron לעבוד. זה עובד בסדר, חוץ מזה שהקובץ electron.js (במדריך נקרא main.js, שמתי אותו בתיקייה src שלי, לא בתיקייה public) הוא קובץ JavaScript. זה לא מונע מהאפליקציה שלי להריץ, אבל אני מעדיף שיהיה בפורמט TypeScript. בזה אני תקוע. המירתי אותו לקובץ TypeScript, אך אני לא מצליח להפנות אליו מתוך הקובץ package.json שלי.

_____ תיאור הבעיה _____

לפי ההבנה שלי, התכונה main ב-package.json צריכה להצביע על הקובץ electron.ts הזה. אבל כמובן, הקובץ לא מעובד נכון כי הוא לא קובץ ג'אווהסקריפט.

_____ שאלה _____

איך אני יכול איכשהו להצביע לקובץ 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"
    }
  },
  ...

תשובה #1

יצרתי חבילת התחלה סטנדרטית שמכילה תיקוני באגים רבים שהייתי צריך להתמודד איתם כשעבדתי עם React ב-Electron ו-TypeScript ויש לה ניטור אוטומטי של שינויים ב-TypeScript כדי לטעון מחדש את אפליקציית Electron לפיתוח מהיר יותר.

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

זה עובד טוב עם Create React App ואין צורך לפרוץ אותו.

תשובה #2

הנתיב המהיר ביותר שמצאתי כדי להפעיל TypeScript היה עם electron-webpack.

עם התוספים, זה מכסה את הדרישות שלך. השתמשתי בזה בהצלחה רבה עבור אפליקציית אלקטרון-ריאקט-רידקס.