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

Question

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

我编辑,main.js以便我可以看到是否准备就绪.

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

我也写"main": "build/main.js",了我的package.son文件.

我的环境

操作系统:Mac
10.10.5 electron:1.6.11
node:v8.2.1
webpack:3.0.0

谢谢你的阅读.我将不胜感激!

PS这是我的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
  }
}

Answer 1

我认为您没有正确使用 webpack 包及其入口点。以下适用于我\xe2\x84\xa2。

\n\n

webpack.config.js

\n\n

const path = require(\'path\');\n\nmodule.exports = {\n  entry: "./index.ts",\n  output: {\n    path: __dirname,\n    filename: "index.js",\n  },\n  module: {\n    rules: [{\n      test: /\\.ts$/,\n      exclude: [/node_modules/],\n      loader: "ts-loader"\n    }]\n  },\n  resolve: {\n    modules:[\n      "node_modules"\n    ],\n    extensions: [".ts", ".js", ".json"]\n  },\n  target: "electron-main"\n}\n

\n\n

索引.ts

\n\n

import * as electron from \'electron\';\n\nelectron.app.on(\'ready\', function () {\n  console.log("electron\'s body is ready... ");\n})\n

\n\n

包.json

\n\n

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

\n\n

tsconfig.json

\n\n

{\n  "compilerOptions": {\n    "target": "es2015",\n    "moduleResolution": "node",\n    "module": "commonjs"\n  },\n  "exclude": [\n    "node_modules"\n  ]\n}\n

\n\n

\n\n

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

\n