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

我知道我晚了一年，但是我希望我仍然可以帮助其他人。这是我自己提出的电子应用程序复杂文件结构的替代解决方案。它不像常规的那样，但是对我来说更有意义。

我的项目的目录结构大致如下：

app/
|- index.html
|- index.js    (electron main script)
|- bundle.js   (generated via webpack)

build/
|- compiled ts -> js files

dist/
|- packaged executables

src/
|- all source files (in typescript)

基本上，我只是将电子主脚本与app/一起放在index.html中。这对我来说很有意义，因为dist/应该保留给交付给最终用户的分布式应用程序使用，对于电子应用程序，我们不允许用户访问{仍然直接{1}}。然后，构建过程将如下运行：

在index.html上呼叫tsc，输出到src/
- 通过在build/中设置"outdir": "build"，然后运行tsconfig.json
在npx tsc上呼叫webpack，将所有内容捆绑为一个build/
- 通过设置app/bundle.js，然后运行output: { filename: 'bundle.js', path: path.resolve(__dirname, 'app')}
webpack build/src/[entry point]通过脚本元素加载index.html
- 通过添加bundle.js
<script src="bundle.js"></script>通过电子渲染main.js
- 通过在index.html中设置"main": "app/main.js"，然后运行package.json
npx electron .将electron-builder打包为一个可执行文件
- 由app/完成，并在npx electron-builder中指定了相应的配置

鉴于构建过程的运行方式，目录结构对我来说很有意义。 package.json存储打字稿源文件，src/存储构建的javascript文件，build/存储电子渲染程序的所有文件，app/存储打包的可分发内容。

Answer 2

您可能希望将所有源文件移动到src目录。这不是必需的，但这是人们通常构造项目的方式。
- src
  - 控制器（或您称之为的控制器）
    - 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目录应包含所有输出文件。而且它是独立的，这意味着无论如何您都可以将该目录发送到该目录，并且他/她应该能够在没有任何其他依赖项的情况下运行您的项目。

电子+打字稿文件结构

2 个答案: