javascript - Electron 项目结构,在子目录下无法运行
问题描述
所以长话短说,我收到了这个错误:
每当我尝试为电子应用程序使用自定义项目结构时(我也使用电子生成器)
我的项目结构如下所示:
基本上我将应用程序分开为:
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",
}
}
我在这里做错了什么?如何将电子应用程序移动到子文件夹?
解决方案
我最终使用 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"
]
}
推荐阅读
- python - 套接字在 VSCode 中按预期运行,但在终端发送后关闭
- linux - 使用 seccomp 配置文件从 C 运行进程
- vue.js - Axios mock 在单元测试中未定义
- python - plt.text() 与分类变量而不是数字对齐
- javascript - React 状态正在发生变化,但之前的部分数据仍显示在表格顶部
- facebook-graph-api - 如何在服务器端使用 instagram api 获取所有公共用户个人资料和发布详细信息
- python - Python tkinter 导入 * 缺少函数
- android - 使用 scrollToPosition() 方法时 Recycleview 添加监听器
- django - 在 Django 的管理员用户创建中添加电子邮件
- jms - 使用 IBM 的 mq-jms-spring 检测断开连接