Структура файла Electron + Typescript - PullRequest
Новая
       41

Структура файла Electron + Typescript

0 голосов
/ 12 февраля 2019

У меня проблема с структурированием моего electron проекта с использованием typescript.По сути, я хочу, чтобы моя файловая структура выглядела так: 

+dist
    compiled .js files from .ts files 
 +src
   .ts files
 +gui
   html pages 
 +package.json
 +tsconfig.json

Мои tsconfig.json файлы выглядят следующим образом: 

"compilerOptions": {
        "target": "es2015",
        "module": "commonjs",
        "outDir": "dist",
        "sourceMap": true
    },

и мой package.jsonфайлы выглядят следующим образом: 

"name": "electron_test",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/main.js",
  "scripts": {
    "build": "tsc",
    "prestart": "npm run build",
    "start": "tsc && electron ./dist/main.js",
    "pack": "electron-packager . sample --out=dist --arch=x64 --platform=win32 --electron-version=3.0.3 --overwrite --prune --ignore=dist"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^3.0.3",
    "electron-packager": "^12.2.0",
    "typescript": "^3.1.1"
  }
}

Проблема с этими файлами заключается в том, что при компиляции файлов typescript они преобразуются в javascript внутри файла dist.Здесь мне нужно использовать main.js, чтобы приложение electron могло звонить на html страницах.Однако когда страницы Html не находятся внутри файла dist, если я запускаю приложение, страницы html не вызываются.Почему-то страницы main.js и html должны находиться в одном каталоге.

1 Ответ

0 голосов
/ 12 февраля 2019
  1. Возможно, вы хотите переместить все исходные файлы в каталог src.Это не обязательно, но так люди обычно структурируют проекты.
    • src
      • контроллеры (или как вы их называете)
        • ts файлы
      • gui
        • html файлы

  2. Я бы порекомендовал использовать webpack вместо raw tsc.Вы хотите использовать CopyWebpackPLugin 

    const CopyWebpackPlugin = require('copy-webpack-plugin');

plugins: [
 new CopyWebpackPlugin([
   {from: './src/gui', to: ''},
]),

Если вы все еще хотите использовать tsc, вы можете скопировать файлы вручную, используя cp в package.json.

package.json : 

"scripts": {
    "copyHtml": "cp ./src/gui ./dist",
    "build": "tsc && npm run copyHtml",
    "prestart": "npm run build",
    "start": "tsc && npm run copyHtml && electron ./dist/main.js",
    "pack": "electron-packager . sample --out=dist --arch=x64 --platform=win32 --electron-version=3.0.3 --overwrite --prune --ignore=dist"
  },

Вы также можете использовать cpx , если беспокоитесь о поддержке crossOs.

В любом случаеДело в том, что каталог dist должен содержать все выходные файлы.И он самодостаточен, то есть вы можете в любом случае отправить этот каталог, и он / она сможет запустить ваш проект без каких-либо других зависимостей.

...