javascript - Electron + typescript 文件结构

Question

我在使用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页面应该以某种方式位于同一目录内。

Answer 1

您可能希望将所有源文件移动到src目录。这不是必需的，但这是人们通常构造项目的方式。

src

Controller (或您称其为w)

ts文件

gui

html文件

我建议使用webpack而不是原始的tsc。您想使用CopyWebpackPLugin

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

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

如果仍要使用tsc，则可以使用package.json中的cp手动复制文件。

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"
  },

如果您担心对crossOs的支持，也可以使用cpx。

无论如何，关键是dist目录应该包含所有输出文件。而且它是独立的，这意味着您无论如何都可以将此目录发送到该目录，并且他/她应该能够在没有任何其他依赖项的情况下运行您的项目。