Question

长话短说，我遇到了这个错误：

每当我尝试为电子应用程序使用自定义项目结构（我也使用电子生成器）

我的项目结构如下：

基本上我将应用程序划分为：

angular-来自angular的应用程序的一部分-可行
electron-电子应用程序的一部分-不起作用
shared-两层共享的打字稿类/接口

还有我的package.json：

{
    "main": "dist-electron/electron/main.js",
    "scripts": {
        "postinstall": "electron-builder install-app-deps",
        "ng": "ng",
        "start": "npm-run-all -p ng:serve electron:serve",
        "build": "yarn electron:serve-tsc && ng build",
        "build:dev": "yarn build -- -c dev",
        "build:prod": "yarn build -- -c production",
        "ng:serve": "ng serve",
        "ng:serve:web": "ng serve -c dev-web -o",
        "electron:serve-tsc": "tsc -p tsconfig-serve.json",
        "electron:serve": "wait-on http-get://localhost:4200/ && yarn electron:serve-tsc && electron . --serve",
        "electron:local": "yarn build:prod && electron .",
        "electron:linux": "yarn build:prod && electron-builder build --linux",
        "electron:windows": "yarn build:prod && electron-builder build --windows",
        "electron:mac": "yarn build:prod && electron-builder build --mac",
        "test": "ng test",
        "version": "conventional-changelog -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
        "lint": "ng lint"
    },
}

tsconfig-serve.json：

{
    "compilerOptions": {
        "outDir": "./dist-electron",
    }
}

我在这里做错了什么？如何将电子应用移动到子文件夹？

Answer 1

我最终使用webpack将所有电子打包到一个文件中，现在它可以工作了。甚至在子目录中。

package.json的主文件：

"main": "./dist-electron/main.js",

这是我的electron.webpack.js：

const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const JavaScriptObfuscator = require('webpack-obfuscator');

module.exports = {
    target: 'electron-main',
    mode: 'development', // production
    entry: {
        renderer: 'electron-app/main.ts',
    },
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist-electron')
    },
    node: {
        __dirname: true
    },
    optimization: {
        minimizer: [new UglifyJsPlugin({
            parallel: true,
            uglifyOptions: {
                mangle: {
                    toplevel: true,
                },
                toplevel: true,
                ie8: false,
            },
        })],
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            configFile: "tsconfig-serve.json"
                        }
                    }
                ],
                exclude: [
                    /node_modules/,
                ],

            }
        ]
    },
    plugins: [
        // new JavaScriptObfuscator ({
        //  rotateUnicodeArray: true
        // }, [])
    ],
    resolve: {
        modules: [
            "node_modules",
            path.resolve(__dirname, "node_modules")
        ],
        plugins: [new TsconfigPathsPlugin({ configFile: "tsconfig-serve.json" })],
        extensions: ['.tsx', '.ts', '.js'],
    },
    externals: [nodeExternals()]
};

和tsconfig-serve.json：

{
    "compilerOptions": {
        "sourceMap": true,
        "outDir": "./dist-electron",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es2015",
        "pretty": true,
        "skipLibCheck": true,
        "allowSyntheticDefaultImports": true,
        "allowJs": true,
        "types": [
            "node"
        ],
        "baseUrl": "./",
        "paths": {
            --SNIP--
        },
        "lib": [
            "es2017",
            "es2016",
            "es2015",
            "dom"
        ]
    },
    "files": [
        "electron-app/main.ts"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

Answer 2

注意 '..'

这样电子可以知道在哪里找到索引文件。

此示例与@Angular有关，但思想相同。

  win.loadURL(
    url.format( {
      pathname: path.join( __dirname, '..', `/dist/YOURAPPNAME/index.html` ),
      protocol: "file:",
      slashes: true
    } )
  );

电子项目结构，在子目录中时无法运行

2 个答案: