电子：app.on('ready') 永远不会被调用

Posted 2023-03-13

【中文标题】电子：app.on(\'ready\') 永远不会被调用

【英文标题】：Electron: app.on('ready') never gets called电子：app.on('ready') 永远不会被调用

【发布时间】：2018-01-07 08:30:33

【问题描述】：

我正在尝试使用 TypeScript 和 webpack 运行电子应用程序。 我有这个main.ts 文件并编译了main.js 文件。

我编辑了main.js，以便查看是否调用了ready。

main.ts

import  app, BrowserWindow  from 'electron';
import * as url from 'url';
import * as path from 'path';

let win: Electron.BrowserWindow = null;


console.log('start');
console.log(app.isReady);
app.on('ready', () => 
  console.log('ready');
  win = new BrowserWindow( width: 800, height: 600 );
  win.loadURL(url.format(
    pathname: path.join(__dirname, '../', 'no.html'),
    protocol: 'file:',
    slashes: true,
  ));
);

main.js

console.log('main.js -- start');
exports.ids = [3];
exports.modules = 

/***/ 18:
/***/ (function(module, exports, __webpack_require__) 

"use strict";

Object.defineProperty(exports, "__esModule",  value: true );
const electron_1 = __webpack_require__(19);
const url = __webpack_require__(20);
const path = __webpack_require__(21);
let win = null;
console.log('before ready');
electron_1.app.on('ready', () => 
    console.log('ready');
    win = new electron_1.BrowserWindow( width: 800, height: 600 );
    win.loadURL(url.format(
        pathname: path.join(__dirname, '../', 'index.html'),
        protocol: 'file:',
        slashes: true,
    ));
);


/***/ ),

/***/ 19:
/***/ (function(module, exports) 

module.exports = require("electron");

/***/ ),

/***/ 20:
/***/ (function(module, exports) 

module.exports = require("url");

/***/ ),

/***/ 21:
/***/ (function(module, exports) 

module.exports = require("path");

/***/ )

;;
console.log('main.js -- finish');

当我运行 ./node_modules/.bin/electron . 时，我的控制台会显示

> electron .

main.js -- start
main.js -- finish

然后什么也没有发生。不会打开任何窗口。

这是我的文件夹结构。

.
├── build
│   ├── index.js
│   └── main.js
├── index.html
├── package.json
├── src
│   ├── index.ts
│   └── main.ts
└── webpack.config.js

我还在我的package.son 文件上写了"main": "build/main.js",。

我的环境

操作系统：Mac 10.10.5 电子：1.6.11 节点：v8.2.1 网络包：3.0.0

感谢您的阅读。我将不胜感激！

附： 这是我的 webpack 配置文件。

const path = require('path');
const webpack = require('webpack');
module.exports = 
  entry: 
    main: './src/main.ts',
    index: './src/index.ts',
    template: './src/memo.vue',
    memo: './src/memo.vue'
  ,
  output: 
    path: __dirname + '/build',
    filename: '[name].js'
  ,
  plugins: [
    new webpack.optimize.CommonsChunkPlugin(
      name: 'common'
    )
  ],
  target: 'electron-main',
  resolve: 
    extensions: ['.ts', '.vue', '.js'],
    modules: ["node_modules"],
    alias: 
      vue: 'vue/dist/vue.js'
    
  ,
  module: 
    rules: [
      
        test: /\.ts$/,
        include: [path.resolve(__dirname, 'src')],
        exclude: [path.resolve(__dirname, 'node_modules')],
        loader: 'ts-loader'
      ,
      
        test: /\.vue$/,
        include: [path.resolve(__dirname, 'src')],
        exclude: [path.resolve(__dirname, 'node_modules')],
        loader: 'vue-loader'
      
      ,
      
        test: /\.ts$/,
        include: [path.resolve(__dirname, 'src')],
        exclude: [path.resolve(__dirname, 'node_modules')],
        enforce: 'pre',
        loader: 'tslint-loader',
        options: 
          fix: true
        
      
    ]
  ,
  node: 
    __dirname: false
  

【问题讨论】：

Webpack 不适合编译 nodejs 或电子脚本。我建议将您的打字稿编译为 javascript。 Electron .asar 档案将为您处理包装。

@ThomasDevries 是。事实上，它专门为 node-js 和电子目标提供了选项。

对不起。我的错。

【参考方案1】：

我认为您没有正确使用 webpack 包及其入口点。以下 Works For Me™。

webpack.config.js

const path = require('path');

module.exports = 
  entry: "./index.ts",
  output: 
    path: __dirname,
    filename: "index.js",
  ,
  module: 
    rules: [
      test: /\.ts$/,
      exclude: [/node_modules/],
      loader: "ts-loader"
    ]
  ,
  resolve: 
    modules:[
      "node_modules"
    ],
    extensions: [".ts", ".js", ".json"]
  ,
  target: "electron-main"

index.ts

import * as electron from 'electron';

electron.app.on('ready', function () 
  console.log("electron's body is ready... ");
)

package.json

  "devDependencies": 
    "devtron": "^1.4.0",
    "ts-loader": "^2.3.2",
    "typescript": "^2.4.2",
    "webpack": "^3.4.1"
  ,
  "dependencies": 
    "electron": "^1.6.11"
  ,
  "scripts": 
    "dev": "electron ."
  

tsconfig.json

  "compilerOptions": 
    "target": "es2015",
    "moduleResolution": "node",
    "module": "commonjs"
  ,
  "exclude": [
    "node_modules"
  ]

即使我做了额外的步骤，在index.ts 中有一个额外的文件main.ts 和import "./main.ts"，它仍然有效。

【讨论】：

谢谢，我上传了我的 webpack 配置文件。但我找不到 2 个文件之间的主要区别.. 我想我正确地将目标设置为电子主。还是有问题

从入口点移除 main.ts；然后有index.tsimport "./main.ts"

我从 webpack.config 中删除了 main.ts 并修改了 index.ts。但是 electron 说它找不到 package.json 中指定的主 js 文件（我尝试了 build/main.js 和 build/index.js 但两者都不起作用......）。还是谢谢你。